2016-04-29 00:11:13 +00:00
|
|
|
# angel_websocket
|
2017-04-17 12:37:17 +00:00
|
|
|
[![1.0.5](https://img.shields.io/badge/pub-1.0.5+3-brightgreen.svg)](https://pub.dartlang.org/packages/angel_websocket)
|
2016-12-24 01:45:52 +00:00
|
|
|
[![build status](https://travis-ci.org/angel-dart/websocket.svg)](https://travis-ci.org/angel-dart/websocket)
|
|
|
|
|
2016-09-17 20:00:17 +00:00
|
|
|
WebSocket plugin for Angel.
|
|
|
|
|
|
|
|
This plugin broadcasts events from hooked services via WebSockets.
|
|
|
|
|
2016-12-24 01:45:52 +00:00
|
|
|
In addition, it adds itself to the app's IoC container as `AngelWebSocket`, so that it can be used
|
2016-09-17 20:00:17 +00:00
|
|
|
in controllers as well.
|
|
|
|
|
2016-12-24 01:45:52 +00:00
|
|
|
WebSocket contexts are add to `req.properties` as `'socket'`.
|
2016-09-03 12:34:01 +00:00
|
|
|
|
|
|
|
|
|
|
|
# Usage
|
|
|
|
|
|
|
|
**Server-side**
|
|
|
|
|
|
|
|
```dart
|
|
|
|
import "package:angel_framework/angel_framework.dart";
|
|
|
|
import "package:angel_websocket/server.dart";
|
|
|
|
|
|
|
|
main() async {
|
|
|
|
var app = new Angel();
|
2017-02-22 22:34:35 +00:00
|
|
|
|
|
|
|
// Ensure this runs after all our services are in-place
|
|
|
|
app.justBeforeStart.add(new AngelWebSocket("/ws"));
|
2016-09-03 12:34:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
```
|
|
|
|
|
2017-04-10 01:45:45 +00:00
|
|
|
Filtering events is easy with hooked services. Just return a `bool`, whether
|
2017-01-29 20:02:19 +00:00
|
|
|
synchronously or asynchronously.
|
|
|
|
|
|
|
|
```dart
|
2017-04-10 01:45:45 +00:00
|
|
|
myService.properties['ws:filter'] = (HookedServiceEvent e, WebSocketContext socket) async {
|
2017-01-29 20:02:19 +00:00
|
|
|
return true;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2016-09-18 01:35:16 +00:00
|
|
|
**Adding Handlers within a Controller**
|
|
|
|
|
2016-09-18 02:53:58 +00:00
|
|
|
`WebSocketController` extends a normal `Controller`, but also listens to WebSockets.
|
|
|
|
|
2016-09-18 01:35:16 +00:00
|
|
|
```dart
|
|
|
|
import 'dart:async';
|
|
|
|
import "package:angel_framework/angel_framework.dart";
|
|
|
|
import "package:angel_websocket/server.dart";
|
|
|
|
|
|
|
|
@Expose("/")
|
2016-09-18 02:53:58 +00:00
|
|
|
class MyController extends WebSocketController {
|
2016-09-18 01:35:16 +00:00
|
|
|
@override
|
2016-09-18 02:53:58 +00:00
|
|
|
void onConnect(WebSocketContext socket) {
|
|
|
|
// On connect...
|
|
|
|
}
|
|
|
|
|
|
|
|
// Dependency injection works, too..
|
|
|
|
@ExposeWs("read_message")
|
2017-04-17 18:19:27 +00:00
|
|
|
void sendMessage(WebSocketContext socket, WebSocketAction action, Db db) async {
|
2017-04-17 12:37:17 +00:00
|
|
|
socket.send(
|
|
|
|
"found_message",
|
|
|
|
db.collection("messages").findOne(where.id(action.data['message_id'])));
|
2016-09-18 01:35:16 +00:00
|
|
|
}
|
2017-01-29 20:02:19 +00:00
|
|
|
|
|
|
|
// Event filtering
|
|
|
|
@ExposeWs("foo")
|
|
|
|
void foo() {
|
|
|
|
broadcast(new WebSocketEvent(...), filter: (socket) async => ...);
|
|
|
|
}
|
2016-09-18 01:35:16 +00:00
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2017-04-17 12:37:17 +00:00
|
|
|
**Client Use**
|
2017-04-17 18:20:32 +00:00
|
|
|
|
2017-04-17 12:37:17 +00:00
|
|
|
This repo also provides two client libraries `browser` and `io` that extend the base
|
|
|
|
`angel_client` interface, and allow you to use a very similar API on the client to that of
|
|
|
|
the server.
|
|
|
|
|
|
|
|
The provided clients also automatically try to reconnect their WebSockets when disconnected,
|
|
|
|
which means you can restart your development server without having to reload browser windows.
|
|
|
|
|
|
|
|
They also provide streams of data that pump out filtered data as it comes in from the server.
|
|
|
|
|
|
|
|
Clients can even perform authentication over WebSockets.
|
|
|
|
|
2016-09-03 12:34:01 +00:00
|
|
|
**In the Browser**
|
|
|
|
|
|
|
|
```dart
|
|
|
|
import "package:angel_websocket/browser.dart";
|
|
|
|
|
|
|
|
main() async {
|
2016-12-24 01:45:52 +00:00
|
|
|
Angel app = new WebSockets("/ws");
|
|
|
|
await app.connect();
|
|
|
|
|
2016-09-03 12:34:01 +00:00
|
|
|
var Cars = app.service("api/cars");
|
|
|
|
|
|
|
|
Cars.onCreated.listen((e) => print("New car: ${e.data}"));
|
|
|
|
|
|
|
|
// Happens asynchronously
|
|
|
|
Cars.create({"brand": "Toyota"});
|
2016-12-24 01:45:52 +00:00
|
|
|
|
2017-02-28 14:15:34 +00:00
|
|
|
// Authenticate a WebSocket, if you were not already authenticated...
|
|
|
|
app.authenticateViaJwt('<some-jwt>');
|
|
|
|
|
2016-12-24 01:45:52 +00:00
|
|
|
// Listen for arbitrary events
|
|
|
|
app.on['custom_event'].listen((event) {
|
|
|
|
// For example, this might be sent by a
|
|
|
|
// WebSocketController.
|
|
|
|
print('Hi!');
|
|
|
|
});
|
2016-09-03 12:34:01 +00:00
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
**CLI Client**
|
|
|
|
|
|
|
|
```dart
|
2017-04-17 12:37:17 +00:00
|
|
|
import "package:angel_framework/common.dart";
|
2016-12-24 01:45:52 +00:00
|
|
|
import "package:angel_websocket/io.dart";
|
2016-09-03 12:34:01 +00:00
|
|
|
|
|
|
|
// You can include these in a shared file and access on both client and server
|
2017-04-17 12:37:17 +00:00
|
|
|
class Car extends Model {
|
2016-09-03 12:34:01 +00:00
|
|
|
int year;
|
|
|
|
String brand, make;
|
|
|
|
|
|
|
|
Car({this.year, this.brand, this.make});
|
|
|
|
|
|
|
|
@override String toString() => "$year $brand $make";
|
|
|
|
}
|
|
|
|
|
|
|
|
main() async {
|
2016-12-24 01:45:52 +00:00
|
|
|
Angel app = new WebSockets("/ws");
|
|
|
|
|
2016-09-17 20:00:17 +00:00
|
|
|
// Wait for WebSocket connection...
|
|
|
|
await app.connect();
|
2016-12-24 01:45:52 +00:00
|
|
|
|
2016-09-03 12:34:01 +00:00
|
|
|
var Cars = app.service("api/cars", type: Car);
|
|
|
|
|
|
|
|
Cars.onCreated.listen((e) {
|
|
|
|
// Automatically deserialized into a car :)
|
|
|
|
Car car = e.data;
|
|
|
|
|
|
|
|
// I just bought a new 2016 Toyota Camry!
|
|
|
|
print("I just bought a new $car!");
|
|
|
|
});
|
|
|
|
|
|
|
|
// Happens asynchronously
|
|
|
|
Cars.create({"year": 2016, "brand": "Toyota", "make": "Camry"});
|
2017-02-28 14:15:34 +00:00
|
|
|
|
|
|
|
// Authenticate a WebSocket, if you were not already authenticated...
|
|
|
|
app.authenticateViaJwt('<some-jwt>');
|
2016-09-03 12:34:01 +00:00
|
|
|
}
|
|
|
|
```
|