GithubHelp home page GithubHelp logo

ignu / es6-actioncable Goto Github PK

View Code? Open in Web Editor NEW

This project forked from eacaps/es6-actioncable

0.0 2.0 0.0 67 KB

Port of actioncable code to ES6 and nodized it

License: The Unlicense

JavaScript 100.00%

es6-actioncable's Introduction

es6-actioncable

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.

Usage

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.

Adding your own headers.

If you need to put data in the header, you can use options.headers

let headers = { Cookie: 'key=value' };

Cable.createConsumer(url, { headers } );

Connecting from Node.js

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 follows rails 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;
} });

es6-actioncable's People

Contributors

eacaps avatar ignu avatar mattheworiordan avatar

Watchers

 avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.