ライブチャットとActionCable

ライブチャットの例を使用して、最近、ActionCableをRuby on Railsプロジェクトに統合する方法に関する短いメモを公開したいと思います。 ActionCableの仕組みについては詳しく説明しませんが、使用例を簡単に紹介します。

準備する

まず、Gemfileにactioncableとpumaを追加します 。

gem 'actioncable', github: 'rails/actioncable' gem 'puma' 

ActionCableは、メインアプリケーションプロセスとは別に起動されます。 したがって、 PumaマルチスレッドWebサーバーを使用します。

建築家チャット

メインページで、ユーザーはニックネームを入力します。その後、Cookieにニックネームを書き込み、チャットページで編集します。

config / routes.rbにいくつかのルートを追加します 。

 resources :messages, only: [:index, :create] resources :sessions, only: [:new, :create] 

アクションコントローラーを作成します。 クッキーのニックネーム：

 # app/controllers/sessions_controller.rb class SessionsController < ApplicationController def create cookies.signed[:username] = params[:session][:username] redirect_to messages_path end end 

ユーザー認証フォームアプリ/ビュー/セッション/ new.html.slim：

 = form_for :session, url: sessions_path do |f| p = f.label :username, '  ' p = f.text_field :username p = f.submit '' 

チャット自体では、印刷されたメッセージへの応答として200を送信します。

 # app/controllers/messages_controller.rb class MessagesController < ApplicationController def create head :ok end end 

ビューアプリ/ビュー/メッセージ/index.html.slim：

 p = cookies.signed[:username] p #messages p = form_for :message, url: messages_path, remote: true, id: 'messages-form' do |f| p = f.label :body, ' :' p = f.text_field :body p = f.submit '' 

メッセージはAJAXによってサーバーに送信されます。

ActionCalbeを構成する

ActionCableとの統合を担当する3つのクラスを作成しましょう。

 # app/channels/application_cable/connection.rb module ApplicationCable class Connection < ActionCable::Connection::Base end end # app/channels/application_cable/channel.rb module ApplicationCable class Channel < ActionCable::Channel::Base end end # app/channels/messages_channel.rb class MessagesChannel < ApplicationCable::Channel def subscribed stream_from 'messages' end end 

作成したディレクトリをautoload_pathsに追加することを忘れないでください。 これで、 MessagesChannelチャネルにサブスクライブしている全員が、 サブスクライブされたメソッドで定義された対応するストリームでメッセージを受信できるようになります。 - メッセージ 。

ActionCableはRedisを介したメッセージングを提供します。 すでにインストールされていると仮定します。 config / redis / cable.ymlでそれとの通信を設定する必要があります：

 development: &dev :url: redis://localhost:6379 :host: localhost :port: 6379 :timeout: 1 :inline: true test: *dev production: *dev 

Pumaを構成します。

 # cable/config.ru require ::File.expand_path('../../config/environment', __FILE__) Rails.application.eager_load! require 'action_cable/process/logging' run ActionCable.server 

ポート34523でプーマを起動します。

 # /bin/bash bundle exec puma -p 34523 cable/config.ru 

これで、クーガーは./bin/cableコマンドによって起動されます。

一般的なチャットにメッセージを送信する

app / controllers / messages_controller.rbを少し調整しましょう：

 class MessagesController < ApplicationController def create ActionCable.server.broadcast 'messages', message: params[:message][:body], username: cookies.signed[:username] head :ok end end 

最も重要なことは、チャンネル登録です。 2つのコーヒーファイルを作成してみましょう（忘れずに再取得してください）：

 #app/assets/javascripts/channels/messages.coffee App.messages = App.cable.subscriptions.create 'MessagesChannel', received: (data) -> $('#messages').append("<p><b>[#{data.username}]:</b> #{data.message}</p>") #app/assets/javascripts/channels/index.coffee #= require cable #= require_self #= require_tree . @App = {} App.cable = Cable.createConsumer('ws://127.0.0.1:34523') 

以上です。
いつものように、小さなプロジェクト-https://github.com/lon10/live-chat