Skip to content

Commit 9506287

Browse files
jonasjabarigitbook-bot
authored andcommitted
GitBook: [#16] fixing action cable docs
1 parent 355f027 commit 9506287

File tree

1 file changed

+8
-9
lines changed

1 file changed

+8
-9
lines changed

docs/integrations/action-cable.md

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
# Action Cable
22

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.
44

55
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.
66

77
## Setup
88

99
Create a channel using the rails generator. Run the command `rails generate channel MatestackUiVueJsChannel`.
1010

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.
1212

1313
It also generates the corresponding server side `MatestackUiVueJsChannel < ApplicationCable::Channel` class.
1414

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".
1616

1717
All we need to do is to tell this channel that it should trigger an event using the `MatestackUiVueJs.eventHub` with the received data.
1818

19-
`app/javascript/channels/matestack_ui_core_channel.js`
19+
`app/javascript/channels/matestack_ui_vue_js_channel.js`
2020

2121
```javascript
2222
import MatestackUiVueJs from "matestack-ui-vuejs"
@@ -39,7 +39,7 @@ consumer.subscriptions.create("MatestackUiVueJsChannel", {
3939

4040
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.
4141

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.
4343

4444
## Usage
4545

@@ -52,7 +52,7 @@ If you've used the generator to setup your channels you already have a `app/chan
5252
```ruby
5353
class MatestackUiVueJsChannel < ApplicationCable::Channel
5454
def subscribed
55-
stream_from "matestack_ui_core"
55+
stream_from "matestack_ui_vuejs"
5656
end
5757

5858
def unsubscribed
@@ -64,7 +64,7 @@ end
6464
Emitting events from controller actions or elsewhere in your Rails application can be done by calling:
6565

6666
```ruby
67-
ActionCable.server.broadcast('matestack_ui_core', {
67+
ActionCable.server.broadcast('matestack_ui_vuejs', {
6868
event: 'update'
6969
})
7070
```
@@ -225,5 +225,4 @@ PrivateChannel.broadcast_to(user, {
225225

226226
## Conclusion
227227

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.
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

Comments
 (0)