前提条件:
- ルビー2.0.0+
- Rails 4.0.0+
- Redis
- プーマ
イニシエーター:
redis.rb
を作成します config/initializers
の初期化ファイル ディレクトリ、redis
のインスタンスをグローバル化 。 heartbeat
を設定することもお勧めします スレッド(要件に応じて、5秒から5分までは問題ありません):
$redis = Redis.new
heartbeat_thread = Thread.new do
while true
$redis.publish("heartbeat","thump")
sleep 15.seconds
end
end
at_exit do
heartbeat_thread.kill
$redis.quit
end
コントローラー:
ChatController
に2つのメソッドを追加する必要があります 、pub
およびsub
。 pub
の役割 チャットイベントとメッセージをredis
に公開することです 、およびsub
これらのイベントを購読します。次のようになります:
class ChatController < ApplicationController
include ActionController::Live
skip_before_filter :verify_authenticity_token
def index
end
def pub
$redis.publish 'chat_event', params[:chat_data].to_json
render json: {}, status: 200
end
def sub
response.headers["Content-Type"] = "text/event-stream"
redis = Redis.new
redis.subscribe(['chat_event', 'heartbeat']) do |on|
on.message do |event, data|
response.stream.write "event: #{event}\ndata: #{data}\n\n"
end
end
rescue IOError
logger.info "Stream Closed"
ensure
redis.quit
response.stream.close
end
end
routes
で 、 pubを作成します POST
およびsub GET
、パスを/chat/publish
のようなものに一致させます および/chat/subscribe
。
Coffeescript / Javascript:
チャットアプリの実際のウェブページが/chat
にあると仮定します 、 Javascriptを作成する必要があります 実際にチャットメッセージを送受信します。
理解を容易にするために、Webページにテキストボックスとボタンしかない場合を考えてみましょう。ボタンを押すと、テキストボックスのコンテンツがチャットストリームに公開されます。AJAXを使用して公開できます:
$('button#send').click (e) ->
e.preventDefault()
$.ajax '/chat/publish',
type: 'POST'
data:
chat_data: {
message: $("input#message").val()
timestamp: $.now()
error: (jqXHR, textStatus, errorThrown) ->
console.log "Failed: " + textStatus
success: (data, textStatus, jqXHR) ->
console.log "Success: " + textStatus
ここで、チャットメッセージをサブスクライブして受信できるようにする必要があります。 EventSource
を使用する必要があります このため。 EventSourceの使用 、イベントを受信できるようにSSEのチャネルを開き、そのデータを使用してビューを更新します。この例では、JavaScriptコンソールにのみログを記録します。
コードは次のようになります。
$(document).ready ->
source = new EventSource('/chat/subscribe')
source.addEventListener 'chat_event', (e) ->
console.log(e.data)
注: 上記の両方のコードブロックをcontrollername.coffee
に配置します ファイル。この例では、chat.js.coffee
である必要があります。 app/assets/javascript
で ディレクトリ。また、アセットパイプラインに読み込まれていることを確認する必要があります。 require
application.js
にあります ファイル(まだrequire tree .
。
並列リクエストを有効にする:
開発環境では、これらの2行をconfig/environments/development.rb
に追加して、並列リクエストを有効にする必要があります。 :
config.preload_frameworks = true
config.allow_concurrency = true
次にブラウザを起動し、/chat
にアクセスします 魔法を見てください。メッセージを入力してボタンをクリックすると、そのWebページのすべてのインスタンスでメッセージが受信されます。
これが、rails
で基本的なチャットアプリケーションを作成する方法です。 ActionController::Live
を使用する およびRedis
。最終的なコードは、要件によって明らかに大きく異なりますが、これで開始できます。
チェックアウトする必要のあるその他のリソース:
- 優しいラブメイキング-ライブですか?
- Railscasts-#401 --ActionController ::Live
- SitePoint-RailsとSSEを使用したミニチャット
- Github-mohanraj-ramanujam/ライブストリーム
- Thoughtbot-SSEを使用したチャットの例