Introduction

Trong hướng dẫn này, chúng ta sẽ khám phá hai tính năng của Ruby on Rails - Action Cable và Active Job. Action Cable có tính năng tích hợp giao thức truyền thông WebSocket so với HTTP , cung cấp một số tính năng mới tuyệt vời sẽ cung cấp cho bạn nhiều ý tưởng mới để xây dựng nhiều thứ. Rails có lẽ là framework đầu tiên áp dụng và triển khai giao thức WebSocket! Để thể hiện tốt nhất các khả năng của ActionCable, WebSocket và Active Job, tôi sẽ tạo một cuộc trò chuyện bằng Ruby on Rails.

HTTP and Websockets

Trong HTTP, kết nối giữa server và client có tuổi thọ ngắn: Client yêu cầu tài nguyên từ server, kết nối với máy chủ được thiết lập và tài nguyên được yêu cầu (có thể là JSON, HTML, XML ... ) được truyền trực tuyến tới client dưới dạng response. Sau đó, kết nối bị đóng. Nhưng làm thế nào để người dùng biết nếu máy chủ có dữ liệu mới hoặc có cập nhật? Thông thường, HTTP sẽ sử dụng tính năng long polling, trong đó client sẽ "hỏi" máy chủ nếu có điều gì đó mới trong một khoảng thời gian nhất định.

Không giống như HTTP, WebSockets là giao thức cho phép client và server giữ kết nối mở, cho phép chúng truyền trực tiếp dữ liệu giữa nhau. Client subscribes kết nối websocket mở trong server và khi có thông tin mới, server sẽ phát dữ liệu và các client đã đăng ký sẽ nhận được. Bằng cách này, cả server và client đều biết về trạng thái của dữ liệu và có thể dễ dàng đồng bộ hóa các thay đổi khi chúng xảy ra.

Building the application

Setup

Giả sử máy bạn đã cài đặt sẵn Ruby, Rails và DB(MySQL). Ở đây mình sử dụng Ruby 2.7, Rails 5.2.4 và MySQL

Tạo app: rails new demo-socket -d mysql

Di chuyển tới thư mục chứa project cd demo-socket

Thiết lập các biến để kết nối DB ở file database.yml

Thử rails server và access vào localhost:3000 đã được chưa nhé.

User and Devise

Thêm gem 'devise' vào file Gemfile trong project.

Cài đặt gem mới bằng lệnh bundle install

Intergration devise : rails generate devise:install

Tạo model User bằng cách sử dụng devise generator: rails generate devise User email:string name:string

Migrate vào DB: rails db:migrate

Rooms and messages

Tạo model Room:

rails g model Room name:string user:references

Tạo model Message :

rails g model Message content:text user:references room:references

Thiết lập quan hệ :

app/models/user.rb

  has_many :messages
  has_many :rooms

app/models/room.rb

  belongs_to :user
  has_many :messages

app/models/message.rb

  belongs_to :user
  belongs_to :room

Migrate database: rails db:migrate

Tạo RoomController:

class RoomsController < ApplicationController
  before_action :authenticate_user!

  def index
    @rooms = Room.all
  end

  def new
    @room = current_user.rooms.new
  end

  def show
    @room = Room.find_by id: params[:id]
    @messages = @room.messages.includes(:user).order(created_at: :asc)
  end

  def create
    @room = current_user.rooms.new room_params

    if @room.save
      flash[:success] = "Room is created"
      redirect_to root_url
    else
      flash.now[:danger] = "Something wrong"
      render :new
    end
  end

  private

  def room_params
    params.require(:room).permit :name, :image
  end
end

Cấu hình config/routes.rb

  devise_for :users
  resources :rooms

Thêm view cho index và show room app/views/rooms/index.html.erb

<div class="container">
  <h2>List rooms</h2>
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Owner</th>
      </tr>
    </thead>
    <tbody>
        <% @rooms.each do |room| %>
        <tr>
          <td><%= link_to room.name, room_path(room) %></td>
          <td><%= room.user.name %></td>
        </tr>
        <% end %>
    </tbody>
  </table>
</div>

<%= link_to "Create room", new_room_path %>

app/views/rooms/show.html.erb

<h1><%= current_user.name %></h1>

<div class="messaging">
  <div class="inbox_msg">
    <div class="mesgs">
			<div class="msg_history" id="messages"
				current_user = <%= current_user.id %>
				room_id = <%= @room.id %>>
				<% @messages.each do |message| %>
					<% if message.user_id == current_user.id%>
						<%= render "messages/message", message: message %>
					<% else %>
						<%= render "messages/message_other", message: message %>
					<% end %>
				<% end %>
      </div>
			<div class="type_msg">
				<div class="input_msg_write">
					<input id="user_id" name="user_id" type="hidden" value=<%= current_user.id %> />
                    <input type="text" class="write_msg js-message-content" placeholder="Type a message" />
				</div>
			</div>
    </div>
  </div>
</div>

Thêm 2 view để thể hiện message của người gửi và người nhận app/views/messages/_message.html.erb

<div class = "message">
  <div class="outgoing_msg">
    <div class="sent_msg">
      <% unless message.content.blank? %>
        <p><%= message.content %></p>
      <% end %>
      <span class="time_date"><%= time_ago_in_words message.created_at %> ago</span>
    </div>
  </div>
</div>

app/views/messages/_message_other.html.erb

<div class = "message">
  <div class="incoming_msg">
    <div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
    <div class="received_msg">
      <div class="received_withd_msg">
        <% unless message.content.blank? %>
          <p><%= message.content %></p>
        <% end %>
        <span class="time_date"><%= time_ago_in_words message.created_at %> ago</span>
      </div>
    </div>
  </div>
</div>

Thêm jquery và bootstrap cho đẹp :

gem "jquery-rails"
gem "bootstrap"

bundle install

Creating a channel

Điều đầu tiên chúng ta cần làm là kích hoạt sử dụng ActionCable trong ứng dụng. Nó được thực hiện trong hai bước đơn giản: config/routes.rb

mount ActionCable.server => '/cable'

app/assets/javascripts/cable.js

//= require action_cable
//= require_self
//= require_tree ./channels

(function() {
  this.App || (this.App = {});

  App.cable = ActionCable.createConsumer();

}).call(this);

Tạo channel rails g channel room speak

#app/channels/room_channel.rb

class RoomChannel < ApplicationCable::Channel
  def subscribed
    stream_from "room_#{params[:room_id]}_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def speak(data)
    current_user.messages.create! content: data["message"],
                                  user_id: data["user_id"],
                                  room_id: data["room_id"]

  end
end

Phương thức subscribed là phương thức mặc định được gọi khi client kết nối với channel và phương thức này thường được sử dụng để 'subscribe' để client nhận các thay đổi. Action speak sẽ được sử dụng để nhận dữ liệu từ đại diện client của nó.

Đế sử dụng current_user ở channel cần chỉnh sửa một chút ở app/channels/applicationcable/connection.rb

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = env["warden"].user || reject_unauthorized_connection
    end
  end
end

Nó sẽ tạo app/assets/javascripts/channels/room.js Sửa lại như sau :

$(document).ready(function() {
  var roomId = $('#messages').attr('room_id');
  App.room = App.cable.subscriptions.create({channel: "RoomChannel", room_id: roomId}, {
    connected: function() {},
    disconnected: function() {},
    received: function(data) {
      if ($('#messages').attr('current_user') == data['user_id']) {
        $('#messages').append(data['message']);
      } else {
        $('#messages').append(data['message_other']);
      }
      scrollToLastMessage();
    },
    speak: function(message, user_id, room_id) {
      this.perform('speak', {
        message: message,
        user_id: user_id,
        room_id: room_id
      });
    }
  });
});

Tiếp theo là viết đoạn js bắt sự kiện gửi message bằng phím enter assets/javascripts/rooms/actioncable.js

$(document).on('keypress', '[data-behavior~=room_speaker]', function(event) {
  if (event.keyCode === 13) {
    if (!event.target.value.trim().length) {
      return 0;
    }
    App.room.speak(event.target.value,
      $("#user_id").val(),
      $("#messages").attr("room_id")
    );
    event.target.value = '';
    return event.preventDefault();
  }
});

Testing

Bật rails server lên và test thử. Có thể mở 2 trình duyệt hoặc bật ẩn danh