You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/integrations/action-cable.md
+8-9Lines changed: 8 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,22 +1,22 @@
1
1
# Action Cable
2
2
3
-
[ActionCable](https://guides.rubyonrails.org/action_cable_overview.html#server-side-components-connections) 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.
3
+
[ActionCable](https://guides.rubyonrails.org/action\_cable\_overview.html#server-side-components-connections) 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.
4
4
5
5
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.
6
6
7
7
## Setup
8
8
9
9
Create a channel using the rails generator. Run the command `rails generate channel MatestackUiVueJsChannel`.
10
10
11
-
This will create a `app/javascript/channels/matestack_ui_core_channel.js` file where you can setup your subscriptions.
11
+
This will create a `app/javascript/channels/matestack_ui_vue_js_channel.js` file where you can setup your subscriptions.
12
12
13
13
It also generates the corresponding server side `MatestackUiVueJsChannel < ApplicationCable::Channel` class.
14
14
15
-
The `matestack_ui_core_channel.js` is responsible to create a subscription to the "MatestackUiVueJsChannel".
15
+
The `matestack_ui_vue_js_channel.js` is responsible to create a subscription to the "MatestackUiVueJsChannel".
16
16
17
17
All we need to do is to tell this channel that it should trigger an event using the `MatestackUiVueJs.eventHub` with the received 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.
41
41
42
-
If you do not want to use the rails generator just create the `matestack_ui_core_channel.js` yourself in `app/javascript/channels/` and paste the above code in it.
42
+
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.
43
43
44
44
## Usage
45
45
@@ -52,7 +52,7 @@ If you've used the generator to setup your channels you already have a `app/chan
Creating channels and connections can be done like you want. To learn more about all the possibilities read Rails Guide about [ActionCable](https://guides.rubyonrails.org/action_cable_overview.html). 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.
229
-
228
+
Creating channels and connections can be done like you want. To learn more about all the possibilities read Rails Guide about [ActionCable](https://guides.rubyonrails.org/action\_cable\_overview.html). 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.
0 commit comments