Websocket Railsを使ってみたお話

何について

先日Railsを使って初めて作ったサイト（こちら）で Websocketを使ってみたので忘れないようにメモっておこうと思う。
 

Websocket

まず第一にWebsocketって何なのか？美味しいのか、美味しくないのか？

Websocketとはクライアントとサーバーで双方向通信ができる技術らしいです。つまり、クライエント側からサーバにリクエストする事もできるし、サーバ側からも何らかのアクションをクライエント側に起こす事ができる（サーバプッシュ）。こんな感じで大雑把に理解している。（参考サイト）

WebsocketRails

とりあえず実際に使ってみる事に。今回は主に公式のGithubページとこちらの記事がとても分かりやすかったので参考にさせて頂きました。
まずブロードキャスティングから。ブロードキャスティングとはWebsocketの接続が確立されているユーザー全員にサーバープッシュを行います。

では、初めからやってみましょう。とりあえずお決まりのコマンドを走らせます。

rails new demo
bundle install --path vendor/bundle

Gemfileに以下を足す。もう一度bundle install。

gem "websocket-rails"

次にこちらのコマンド。

rails g websocket_rails:install
      create  config/events.rb
      create  config/initializers/websocket_rails.rb
      append  app/assets/javascripts/application.js

Development環境でwebsocketを動かすには以下のコードをconfig/environments/development.rbに足す必要があるらしい。ふむふむ

config.middleware.delete Rack::Lock

早速config/evetns.rbを開いて下記を付け足します。下記は後に書いていくJS側で呼ばれるsend_messageに対して、WebsocketMessageControllerのrecieve_messageのメソッドが呼ばれるという意味。

subscribe :send_message, :to => WebsocketMessageController, :with_method => :recieve_message

次に上のファイルで指定したコントローラーを手動で作成します（app/controller/websocket_message_controller.rb）。こちらのファイルには下記を書いていきます。これでメッセージをブロードキャスティングする準備はほぼ整いました。

class WebsocketMessageController < WebsocketRails::BaseController
  def recieve_message
　　message = message();
　　broadcast_message :show_message, message
  end
end

次に以下のコマンドを使い、クライエントサイドを作っていきましょう。Controllerを作成するのは、Indexページを表示する為。

bundle exec rails g controller messages index --no-helper --no-assets

作成したHtmlファイルに以下を書き足します。(app/view/messages/index.html.erb)

  <div id="message_box">
    <p>broadcasting message</p>
    <!-- message will be shown here -->
  </div>
  <input type="text" id="message_input">
  <input type="button" id="send_message" value="send">

<script>
$(document).ready(function(e){
  var dispatcher = new WebSocketRails('localhost:3000/websocket');

  $(document).on("click", "#send_message", function(e){
    message_text = $("#message_input").val();
    dispatcher.trigger("send_message", message_text);
  });

  dispatcher.bind("show_message", function(message){
    $("#message_box").append("<p>" + message + "</p>");
  });
});
</script>

これでブロードキャスティングのメッセージ機能は完成です。rails サーバーを起動させて、http://localhost:3000/messages/index にアクセスしてみましょう。

rails s

これで動くはずです。
ここまでは結構色々な方々がやっていて比較的情報が手に入れやすくスムーズに出来ました。でも今回サイトを作るにあたって実装したかった機能は特定のユーザにのみメッセージを送る事。次回の記事で少し触れてみようと思います。

:)