This module is a port of the rails/actioncable coffeescript code to ES6 and nodized it. For more info on actioncable, check out their github page - https://github.com/rails/actioncable.
Here is a sample of what I have in my application.
Websocket.js
import Cable from 'es6-actioncable';
class Websocket {
constructor() {
}
connect() {
console.log('connecting websocket');
this.consumer = Cable.createConsumer(WEBSOCKET_URL);
}
getConsumer() {
if(!this.consumer) {
this.connect();
}
return this.consumer;
}
closeConnection() {
if(this.consumer) {
Cable.endConsumer(this.consumer);
}
delete this.consumer;
}
}
MyChannel.js
import WebSocket from './websocket';
class MyChannel {
constructor() {
}
subscribe() {
this.subscription = WebSocket.getConsumer().subscriptions.create("MyChannel", {
connected: function () {
console.log('connected to mychannel');
},
received: function (data) {
//do stuff with data
}
});
}
unsubscribe() {
if(this.subscription)
this.subscription.unsubscribe();
}
}
Actioncable is good stuff, even if it is in Ruby.
If you need to put data in the header, you can use options.headers
let headers = { Cookie: 'key=value' };
Cable.createConsumer(url, { headers } );
es6-actioncable
will work under Node.js, however you will need to bear the following in mind:
- You will need to supply your own websocket library, 2 out of 2 developers recommend: https://www.npmjs.com/package/websocket.
- Your ActionCable Rails server must be bound to a specific IP or
0.0.0.0
, but not localhost. This can be done as followsrails server -b 0.0.0.0
. See https://twitter.com/mattheworiordan/status/713350750483693568 for an explanation of the issue. - You will need to pass the origin to the WebSocket library as Rails will by default reject requests with an invalid origin. See example below:
const consumer = Cable.createConsumer('ws://0.0.0.0:3000/cable', { createWebsocket: () => {
var w3cwebsocket = require('websocket').w3cwebsocket;
let webSocket = new w3cwebsocket(
'ws://0.0.0.0:3000/cable',
protocols,
'http://0.0.0.0:3000',
headers,
extraRequestOptions
);
return webSocket;
} });