Action Cable
ActionCable seamlessly integrates WebSockets in Ruby on Rails. It allows for real-time communication between your clients and server. ActionCable and matestack can be combined to emit events using matestacks event hub from the server side, for example triggering a rerendering of a chat view if a new message was created on the server.
In this guide we will provide information on how to create channels, consumers and subscriptions to broadcast messages to all subscribed clients or target specific user via user authenticated connections.
Create a channel using the rails generator. Run the command
rails generate channel MatestackUiVueJsChannel.This will create a
app/javascript/channels/matestack_ui_vue_js_channel.js file where you can setup your subscriptions.It also generates the corresponding server side
MatestackUiVueJsChannel < ApplicationCable::Channel class.The
matestack_ui_vue_js_channel.js is responsible to create a subscription to the "MatestackUiVueJsChannel".All we need to do is to tell this channel that it should trigger an event using the
MatestackUiVueJs.eventHub with the received data.app/javascript/channels/matestack_ui_vue_js_channel.jsimport MatestackUiVueJs from "matestack-ui-vuejs"
import consumer from "./consumer"
consumer.subscriptions.create("MatestackUiVueJsChannel", {
connected() {
// Called when the subscription is ready for use on the server
},
disconnected() {
// Called when the subscription has been terminated by the server
},
received(data) {
MatestackUiVueJs.eventHub.$emit(data.event, data)
}
});
We expect the pushed data to include an event key with the name of the event that should be triggered. We also pass the data as event payload to the event emit, giving you the possibility to work with server side send data.
If you do not want to use the rails generator just create the
matestack_ui_vue_js_channel.js yourself in app/javascript/channels/ and paste the above code in it.After setting up the client side JavaScript for our action cable we now take a look at how to create server side events to trigger for example rerenderings of
async/isolated components or show/hide content with the toggle component. We will introduce two different types of creating server side events. First broadcasting events to all subscribed clients and secondly sending events to a user by authenticating a connection through a devise user.If you've used the generator to setup your channels you already have a
app/channels/matestack_ui_core_channel.rb. If not create it now. Inside it we define that every subscriber of this channel should stream from the "matestack-ui-core" channel, which means that anything transmitted by a publisher to this channel is direcetly routed to the channel subscribers.class MatestackUiVueJsChannel < ApplicationCable::Channel
def subscribed
stream_from "matestack_ui_vuejs"
end
def unsubscribed
# Any cleanup needed when channel is unsubscribed
end
end
Emitting events from controller actions or elsewhere in your Rails application can be done by calling:
ActionCable.server.broadcast('matestack_ui_vuejs', {
event: 'update'
})
You don't always want to broadcast messages to all other clients. You may only want to broadcast to a specific signed in user or multiple users. We now take a look at sending messages via websockets to an authenticated user using devise. Therefore we need to edit our
ApplicationCable::Connection to identify connections by a current user.# app/channels/application_cable/connection.rb
module ApplicationCable
class Connection < ActionCable::Connection::Base
identified_by :current_user
def connect
self.current_user = find_verified_user
end
protected
def find_verified_admin
if verified_user = env['warden'].user
verified_user
else
reject_unauthorized_connection
end
end
end
end
Every websocket connection that gets established will be authorized by a
current_user. We check if a user is signed in by accessing env['warden'].user which gets set when a user is successfully authenticated. If env['warden'].user is not set we reject the connection.Now we can create a channel which streams for a specific user, enabling us to send broadcasts to all clients which are signed in with this user.
# app/channels/current_user_channel.rb
class CurrentUserChannel < ApplicationCable::Channel
def subscribed
stream_for current_user
end
def unsubscribed
# Any cleanup needed when channel is unsubscribed
end
end
Emitting events for a user can now be done anywhere in your Rails application by calling:
# sending to the current user
CurrentUserChannel.broadcast_to(current_user, {
event: 'update'
})
# sending to a user
CurrentUserChannel.broadcast_to(User.first, {
event: 'new_message'
})
With the above implemented connection authorization in place we will not be able to create connections from clients where no one is signed in. To be able to connect unauthenticated and authenticated users and only give access to authenticated users to specific channels we have to remove the
reject_unauthorized_connection call from our connection.# app/channels/application_cable/connection.rb
class Connection < ActionCable::Connection::Base
identified_by :current_user
def connect
self.current_user = find_verified_user
end
protected
def find_verified_admin
env['warden'].user
end
end
We then can create two different channels. One allows all clients to subscribe to it and another which only allows signed in users to subscribe to it and handles user specific broadcasting.
First a public channel to which every user can subscribe.
# app/channels/public_channel.rb
class PublicChannel < ApplicationCable::Channel
def subscribe
stream_from 'public'
end
end
Corresponding front end channel subscription.
// app/javascript/channels/public_channel.js
import MatestackUiVueJs from "matestack-ui-vuejs"
import consumer from "./consumer"
consumer.subscriptions.create("PublicChannel", {
received(data) {
MatestackUiVueJs.eventHub.$emit(data.event, data)
}
});
Second a channel only available for signed in users. We reject clients that try to subscribe but are not signed in by calling
reject unless a current_user is present.# app/channels/private_channel.rb
class PrivateChannel < ApplicationCable::Channel
def subscribe
return reject unless current_user
stream_for current_user
end
end
Corresponding front end channel subscription.
// app/javascript/channels/private_channel.js
import MatestackUiVueJs from "matestack-ui-vuejs"
import consumer from "./consumer"
consumer.subscriptions.create("PrivateChannel", {
received(data) {
MatestackUiVueJs.eventHub.$emit(data.event, data)
}
});
Broadcasting messages
With these two channels in place and our connection authentication we can now broadcast messages either to a specific clients with a signed in user or to all clients.
Broadcasting to all clients can be achieved with:
ActionCable.server.broadcast('public', {
event: 'update'
})
Broadcasting to specific clients with a logged in user can be achieved with:
# sending to a user
PrivateChannel.broadcast_to(user, {
event: 'new_message'
})
Creating channels and connections can be done like you want. To learn more about all the possibilities read Rails Guide about ActionCable. Important for the use with matestack is to emit events in the JavaScript
received(data) callback and have a clear structure to determine what the name of the event is which should be emitted. Like shown above we recommend using an :event key in your websocket broadcast, which represents the event name that gets emitted through the event hub. You optionally can pass all the received data as payload to that event or also use a specific key. As this is optional you don't need to pass any data to the event emit.Last modified 11mo ago