Cáp hành động trong đường ray

Thứ Hai, 23/11/2020

Tram Ho

Action Cable in Rails

Hôm nay chúng ta sẽ build 1 app chat sử dụng ActionCable websocket, rails và postgreql

Http và Websockets

Với Http việc kết nối giữa client server có vòng đời ngắn. Client request đến server, kết nối được hình thành và dữ liệu được máy chủ trả về cho client gọi là response. Sau đó kết nối được đóng lại. Nhưng làm thế nào để client biết server có thay đổi. Thông thường, http sử dụng long pulling. Client sẽ hỏi server xem có gì thay đổi không trong khoảng thời gian nhất định
Không giống như http, websocket là phương thức cho phép client và server giữ kết nối, client và server có thể trao đổi qua lại. Client subscribes đến channel trên server và khi có thay đổi, server sẽ phát tín hiệu và client nhận nó.

ActionCable hoạt động như thế nào?

Trong Rails, controller được xây dựng với mục đích xử lí các http request. Để xử lí các kết nối websocket, rails đã tạo ra thư mục mới gọi là channels. Channels hoạt động giống controller để xử lí các Websocket request. Các channel có thể được client subscribe để truyền dữ liệu qua lại.

Cài đặt

ActionCable là tín năng mới được tích hợp trên rails 5.
Databse: PostgreSQL

    rails _5.0.0.beta3_ new chatapp --database=postgresql

1 2	rails _5.0.0.beta3_ new chatapp --database=postgresql

Sau đó cấu hình ở trong file database.yml xong thì chạy

    cd chatapp
    rake db:create

cd chatapp

rake db:create

Các bước cần làm:

Tạo channel websocket phía server gọi là room_channel, nó sẽ có các các method để xử lí việc subscribe, unsubscribe và gửi data đến client
Sử dụng javascript ở client đế gọi subscribe, unsubcribe, xử lí việc gửi mà nhận dữ liệu.

    rails g controller rooms show

1 2	rails g controller rooms show

<span class="token comment">#config/routes.rb</span>

<span class="token constant">Rails</span><span class="token punctuation">.</span>application<span class="token punctuation">.</span>routes<span class="token punctuation">.</span>draw <span class="token keyword">do</span>
root to<span class="token punctuation">:</span> <span class="token string">'rooms#show'</span>

#config/routes.rb

Rails.application.routes.draw do

root to: 'rooms#show'

Tiếp theo chúng ta sẽ tạo model mesage

rails g model message content:text

1 2	rails g model message content:text

rồi tạo bảng message trong db

rails db:migrate

1 2	rails db:migrate

List tất cả các message

<span class="token comment">#app/controllers/rooms_controller.rb</span>

<span class="token keyword">class</span> <span class="token class-name">RoomsController</span> <span class="token operator">&lt;</span> <span class="token constant">ApplicationController</span>
  <span class="token keyword">def</span> <span class="token method-definition"><span class="token function">show</span></span>
    <span class="token variable">@messages</span> <span class="token operator">=</span> <span class="token constant">Message</span><span class="token punctuation">.</span>all
  <span class="token keyword">end</span>
<span class="token keyword">end</span>

#app/controllers/rooms_controller.rb

class RoomsController < ApplicationController

def show

@messages = Message.all

end

view rooms#show

<span class="token operator">&lt;</span>h1<span class="token operator">&gt;</span><span class="token constant">Chat</span> room<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">"messages"</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token string">%= render @messages %&gt;
&lt;/div&gt;

&lt;form&gt;
  &lt;label&gt;Say something:&lt;/label&gt;&lt;br&gt;
  &lt;input type=</span><span class="token string">"text"</span> data<span class="token operator">-</span>behavior<span class="token operator">=</span><span class="token string">"room_speaker"</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>form<span class="token operator">&gt;</span>

<%= render @messages %>

</div>

<form>

<label>Say something:</label>

</form>

<span class="token comment"># app/view/messages/_message.html.erb</span>

<span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span>“message”<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">%</span><span class="token operator">=</span> message<span class="token punctuation">.</span>content <span class="token string">%&gt;&lt;/p&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

# app/view/messages/_message.html.erb

</div>

<span class="token comment">// app/assets/javascripts/application.js</span>

<span class="token comment">//= require jquery</span>
<span class="token comment">//= require jquery_ujs</span>

// app/assets/javascripts/application.js

//= require jquery

//= require jquery_ujs

Tạo channel

routes.

  <span class="token comment">#config/routes.rb</span>
     <span class="token comment"># Serve websocket cable requests in-process</span>
   mount <span class="token constant">ActionCable</span><span class="token punctuation">.</span>server <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token string">'/cable'</span>

#config/routes.rb

# Serve websocket cable requests in-process

mount ActionCable.server => '/cable'

cable.coffee

#= require action_cable
#= require_self
#= require_tree ./channels
#
@App ||= {}
App.cable = ActionCable.createConsumer()

#= require action_cable

#= require_self

#= require_tree ./channels

@App ||= {}

App.cable = ActionCable.createConsumer()

Đặt <%= action_cable_meta_tag %> trong head của app/views/layouts/application.html.erb

Tạo channel

rails g channel room speak

1 2	rails g channel room speak

 <span class="token comment">#app/channels/room_channel.rb</span>

<span class="token keyword">class</span> <span class="token class-name">RoomChannel</span> <span class="token operator">&lt;</span> <span class="token constant">ApplicationCable</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">Channel</span>
  <span class="token keyword">def</span> <span class="token method-definition"><span class="token function">subscribed</span></span>
    <span class="token comment"># stream_from "some_channel"</span>
  <span class="token keyword">end</span>

  <span class="token keyword">def</span> <span class="token method-definition"><span class="token function">unsubscribed</span></span>
    <span class="token comment"># Any cleanup needed when channel is unsubscribed</span>
  <span class="token keyword">end</span>

  <span class="token keyword">def</span> <span class="token method-definition"><span class="token function">speak</span></span>
  <span class="token keyword">end</span>
<span class="token keyword">end</span>

#app/channels/room_channel.rb

class RoomChannel < ApplicationCable::Channel

def subscribed

# stream_from "some_channel"

end

def unsubscribed

# Any cleanup needed when channel is unsubscribed

end

def speak

end

subscribed method sẽ được gọi khi client kết nối đến channel, và nó thường được sử dụng để bật lắng nghe những thay đổi cho client. speak method nhận data từ client.

 #app<span class="token operator">/</span>assets<span class="token operator">/</span>javascripts<span class="token operator">/</span>channels<span class="token operator">/</span>room<span class="token punctuation">.</span>coffee

App<span class="token punctuation">.</span>room <span class="token operator">=</span> App<span class="token punctuation">.</span>cable<span class="token punctuation">.</span>subscriptions<span class="token punctuation">.</span>create <span class="token string">"RoomChannel"</span><span class="token punctuation">,</span>
  connected<span class="token operator">:</span> <span class="token operator">-</span><span class="token operator">&gt;</span>
    # Called when the subscription is ready <span class="token keyword">for</span> use on the server

  disconnected<span class="token operator">:</span> <span class="token operator">-</span><span class="token operator">&gt;</span>
    # Called when the subscription has been terminated by the server

  received<span class="token operator">:</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">&gt;</span>
    # Called when there's incoming data on the websocket <span class="token keyword">for</span> <span class="token keyword">this</span> channel

  speak<span class="token operator">:</span> <span class="token operator">-</span><span class="token operator">&gt;</span>
    @perform <span class="token string">'speak'</span>

#app/assets/javascripts/channels/room.coffee

App.room = App.cable.subscriptions.create "RoomChannel",

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

# Called when there's incoming data on the websocket for this channel

speak: ->

@perform 'speak'

Ở đây, client subscribes đến server thông qua App.room = App.cable.subscriptions.create "RoomChannel". connected và disconnected dùng để xử lí trạng thái kết nối, received xử lí data nhận được từ server. speak method có nhiệm vụ gửi data lên server.

Truyền dữ liệu

Thêm tham số vào speak method

#app<span class="token operator">/</span>assets<span class="token operator">/</span>javascripts<span class="token operator">/</span>channels<span class="token operator">/</span>room<span class="token punctuation">.</span>coffee

App<span class="token punctuation">.</span>room <span class="token operator">=</span> App<span class="token punctuation">.</span>cable<span class="token punctuation">.</span>subscriptions<span class="token punctuation">.</span>create <span class="token string">"RoomChannel"</span><span class="token punctuation">,</span>
  #rest <span class="token keyword">of</span> the code
  speak<span class="token operator">:</span> <span class="token punctuation">(</span>message<span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">&gt;</span>
    @perform <span class="token string">'speak'</span><span class="token punctuation">,</span> message<span class="token operator">:</span> message

#rest of the code

speak: (message) ->

@perform 'speak', message: message

speak sẽ gửi 1 message Json object đến speak method trong class RoomChannel.

 <span class="token comment">#app/channels/room_channel.rb</span>

  <span class="token keyword">def</span> <span class="token method-definition"><span class="token function">speak</span></span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
    <span class="token constant">ActionCable</span><span class="token punctuation">.</span>server<span class="token punctuation">.</span>broadcast <span class="token string">"room_channel"</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> data<span class="token punctuation">[</span><span class="token string">'message'</span><span class="token punctuation">]</span>
  <span class="token keyword">end</span>

#app/channels/room_channel.rb

def speak(data)

ActionCable.server.broadcast "room_channel", message: data['message']

end

Bây giờ, speak method sẽ phát tin nhắn lên room_channel. Nhưng làm thế nào để chúng ta nhận được?
Để làm điều này ta chỉ định tất cả các subscriber nhận nó sử dụng stream_from trong subscribed method.

 <span class="token comment">#app/channels/room_channel.rb</span>

<span class="token keyword">class</span> <span class="token class-name">RoomChannel</span> <span class="token operator">&lt;</span> <span class="token constant">ApplicationCable</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">Channel</span>
 <span class="token keyword">def</span> <span class="token method-definition"><span class="token function">subscribed</span></span>
    stream_from <span class="token string">"room_channel"</span>
 <span class="token keyword">end</span>

 <span class="token keyword">def</span> <span class="token method-definition"><span class="token function">unsubscribed</span></span>
   <span class="token comment"># Any cleanup needed when channel is unsubscribed</span>
 <span class="token keyword">end</span>

 <span class="token keyword">def</span> <span class="token method-definition"><span class="token function">speak</span></span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
   <span class="token constant">ActionCable</span><span class="token punctuation">.</span>server<span class="token punctuation">.</span>broadcast <span class="token string">"room_channel"</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> data<span class="token punctuation">[</span><span class="token string">'message'</span><span class="token punctuation">]</span>
 <span class="token keyword">end</span>
<span class="token keyword">end</span>

#app/channels/room_channel.rb

def subscribed

stream_from "room_channel"

end

def unsubscribed

# Any cleanup needed when channel is unsubscribed

end

Về bản chất, room_channel là môi trường trong actioncable server, nơi mà dữ liệu đến và đổ về những client nhất định. Chúng ra có thể nhận dữ liệu từ subscribed method sử dụng received method trong room.coffee

#app<span class="token operator">/</span>assets<span class="token operator">/</span>javascripts<span class="token operator">/</span>channels<span class="token operator">/</span>room<span class="token punctuation">.</span>coffee

  received<span class="token operator">:</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">&gt;</span>
    <span class="token function">alert</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span><span class="token string">'message'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>

  #speak <span class="token keyword">function</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token parameter">document</span><span class="token punctuation">)</span><span class="token punctuation">.</span>on <span class="token string">'keypress'</span><span class="token punctuation">,</span> <span class="token string">'[data-behavior~=room_speaker]'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">&gt;</span>
  <span class="token keyword">if</span> event<span class="token punctuation">.</span>keyCode is <span class="token number">13</span> # <span class="token keyword">return</span><span class="token operator">/</span>enter <span class="token operator">=</span> send
    App<span class="token punctuation">.</span>room<span class="token punctuation">.</span>speak event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value
    event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">''</span>
    event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

alert(data['message'])

#speak function

$(document).on 'keypress', '[data-behavior~=room_speaker]', (event) ->

if event.keyCode is 13 # return/enter = send

App.room.speak event.target.value

event.target.value = ''

event.preventDefault()

Một event listener được thêm phía dưới file cho textbox ở trong template. Khi chúng ta viết gì đó và nhấn enter, nó sẽ gọi speak method trong room.coffee và gửi text đã nhập lên server.

Xử lí database

Khi nhận data từ client gửi lên, thay vì phát nó lên channel thì bây giờ lưu vào database.

 <span class="token comment">#app/channels/room_channel.rb</span>

  <span class="token comment">#the rest of the methods</span>
  <span class="token keyword">def</span> <span class="token method-definition"><span class="token function">speak</span></span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
    <span class="token constant">Message</span><span class="token punctuation">.</span>create<span class="token operator">!</span> content<span class="token punctuation">:</span> data<span class="token punctuation">[</span><span class="token string">'message'</span><span class="token punctuation">]</span>
  <span class="token keyword">end</span>

#app/channels/room_channel.rb

#the rest of the methods

Message.create! content: data['message']

end

Để giảm thời gian chờ server xử lí request, ta sử dụng background job để phát sóng message lên channel

<span class="token comment">#app/models/message.rb</span>

<span class="token keyword">class</span> <span class="token class-name">Message</span> <span class="token operator">&lt;</span> <span class="token constant">ApplicationRecord</span>
  after_create_commit <span class="token punctuation">{</span> <span class="token constant">MessageBroadcastJob</span><span class="token punctuation">.</span>perform_later <span class="token keyword">self</span> <span class="token punctuation">}</span>
<span class="token keyword">end</span>

#app/models/message.rb

class Message < ApplicationRecord

after_create_commit { MessageBroadcastJob.perform_later self }

end

<span class="token comment">#app/jobs/message_broadcast_job.rb</span>
<span class="token keyword">class</span> <span class="token class-name">MessageBroadcastJob</span> <span class="token operator">&lt;</span> <span class="token constant">ApplicationJob</span>
  queue_as <span class="token symbol">:default</span>

  <span class="token keyword">def</span> <span class="token method-definition"><span class="token function">perform</span></span><span class="token punctuation">(</span>message<span class="token punctuation">)</span>
    <span class="token constant">ActionCable</span><span class="token punctuation">.</span>server<span class="token punctuation">.</span>broadcast <span class="token string">'room_channel'</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> render_message<span class="token punctuation">(</span>message<span class="token punctuation">)</span>
  <span class="token keyword">end</span>

  <span class="token keyword">private</span>

  <span class="token keyword">def</span> <span class="token method-definition"><span class="token function">render_message</span></span><span class="token punctuation">(</span>message<span class="token punctuation">)</span>
    <span class="token constant">ApplicationController</span><span class="token punctuation">.</span>renderer<span class="token punctuation">.</span>render<span class="token punctuation">(</span>partial<span class="token punctuation">:</span> <span class="token string">'messages/message'</span><span class="token punctuation">,</span> locals<span class="token punctuation">:</span> <span class="token punctuation">{</span> message<span class="token punctuation">:</span> message <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token keyword">end</span>
<span class="token keyword">end</span>

#app/jobs/message_broadcast_job.rb

class MessageBroadcastJob < ApplicationJob

queue_as :default

def perform(message)

ActionCable.server.broadcast 'room_channel', message: render_message(message)

end

private

def render_message(message)

ApplicationController.renderer.render(partial: 'messages/message', locals: { message: message })

end

<span class="token comment">#app/assets/javascripts/channels/room.coffee</span>

  received<span class="token punctuation">:</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">&gt;</span>
    $<span class="token punctuation">(</span><span class="token string">'#messages'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>append data<span class="token punctuation">[</span><span class="token string">'message'</span><span class="token punctuation">]</span>

#app/assets/javascripts/channels/room.coffee

received: (data) ->

$('#messages').append data['message']

Hoàn thành

Bây giờ, bạn có thể start server và nhập vào textbox và tin nhắn của mình xuất hiện trong cuộc trò chuyện.

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Cáp hành động trong đường ray

Action Cable in Rails

Hôm nay chúng ta sẽ build 1 app chat sử dụng ActionCable websocket, rails và postgreql

Http và Websockets

ActionCable hoạt động như thế nào?

Cài đặt

Tạo channel

routes.

cable.coffee

Truyền dữ liệu

Xử lí database

Hoàn thành

Google cập nhật Doodle tôn vinh trà sữa trân châu

Thông tin về iPhone 15 được hé lộ qua iOS 17

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript