Server-Sent Events on Rails
このmoduleをincludeしたcontroller内のすべてのactionで response.stream が使える
レスポンスヘッダでtext/event-streamを宣言したあと、 response.stream.write で送信したデータを書き込む サーバーサイド
code:ruby
class MyController < ActionController::Base
include ActionController::Live
def stream
response.stream.write("event: connected\n")
response.stream.write("data: #{JSON.dump({message: 'connected', thread_id: Thread.current.object_id})}\n\n") # 何らかの処理
response.stream.write("event: result\n")
message: 'Process completed successfully!',
timestamp: Time.now.to_i,
thread_id: Thread.current.object_id,
processing_time: processing_time
})}\n\n")
ensure
response.stream.close
end
end
クライアント
onmessageでイベントハンドラを書くか、addEventListenerでカスタムイベントのハンドラを書く code:js
// Railsの提供するAPIに向ける
const eventSource = new EventSource("/events/stream");
// メッセージ受信時
eventSource.onmessage(function(e) {
const data = JSON.parse(e.data);
// 受け取ったdataを処理する
});
// カスタムイベント: 接続
eventSource.addEventListener('connected', function(e) {
const data = JSON.parse(e.data);
// 受け取ったdataを処理する
});
// カスタムイベント: 接続
eventSource.addEventListener('connected', function(e) {
const data = JSON.parse(e.data);
// 受け取ったdataを処理する
});
// カスタムイベント: 結果
eventSource.addEventListener('result', function(e) {
const data = JSON.parse(e.data);
// 受け取ったdataを処理する
// 接続を閉じる
eventSource.close();
});
2025-04
本記事はそれぞれのメリット、デメリットについて詳しい