How to use ActionCable as API

Question

I built a very simple app using Rails 5 beta 1 and ActionCable to show when users come online and let them send messages to each other.

Now, I would basically like

Answer 1

You'll essentially need to include a copy or port of the ActionCable JS code in your other app (https://github.com/rails/rails/tree/master/actioncable/app/assets/javascripts).

Update: I recently released an npm package called actioncable-js that provides a direct port of Ruby on Rails 5's ActionCable CofeeScript to standard JS for use outside of Rails: https://github.com/mwalsher/actioncable-js

Because ActionCable is just a layer on top of HTML5 WebSockets, so you can also use raw WebSockets JS code (or any third-party library) to handle the messaging.

The ActionCable message protocol is somewhat documented here: https://github.com/NullVoxPopuli/action_cable_client#the-action-cable-protocol. I'll paste below for convenience:

1. Connect to the Action Cable URL

2. After the connection succeeds, send a subscribe message

   • The subscribe message JSON should look like this: {"command":"subscribe","identifier":"{\"channel\":\"MeshRelayChannel\"}"}
   • You should receive a message like this: {"identifier"=>"{\"channel\":\"MeshRelayChannel\"}", "type"=>"confirm_subscription"}

3. Once subscribed, you can send messages.

   • Make sure that the action string matches the data-handling method name on your ActionCable server.
   • Your message JSON should look like this: {"command":"message","identifier":"{\"channel\":\"MeshRelayChannel\"}","data":"{\"to\":\"user1\",\"message\":\"hello from user2\",\"action\":\"chat\"}"}
   • Received messages should look about the same

4. Notes:

   • Every message sent to the server has a command and identifier key.
   • The channel value must match the name of the channel class on the ActionCable server.
   • identifier and data are redundantly jsonified.

So, for example (in ruby)

payload = {
  command: 'command text',
  identifier: { channel: 'MeshRelayChannel' }.to_json,
  data: { to: 'user', message: 'hi', action: 'chat' }.to_json
}.to_json