はじめに
本記事は錆びかけたRailsの知識を頑張ってアップデートするアドベントカレンダー22日目です。
今回は、リアルタイムメッセージ送信機能の実装を考えます。
この時、UIはLINEのように自分のメッセージと他の人のメッセージとの区別がつくような形を想定します。
画像引用:https://linecorp.com/ja/pr/news/ja/2020/3520
課題
こちらは参考にした記事に詳しいのですが、turbo streamを利用したfetchで部分テンプレート部分を更新する場合、current_userを利用することができません。
解決方法
更新したメッセージがcurrent_userのものかどうかは、Stimulusを使って別途伝える必要があります。
その際、以下のようにログインしているユーザーのidをbodyタグに仕込み、Stimulusに渡すようにします。
application.html.erb
<!-- app/views/layouts/application.html.erb -->
<body data-controller="application" data-application-user-id-value="<%= current_user.id if user_signed_in? %>">
<%= yield %>
</body>
bodyタグに仕込んだcurrent_userのidは、Stimulusのコントローラで以下のように取得できます。
application_controller.js
// app/javascript/controllers/application_controller.js
import { Controller } from "@hotwired/stimulus"
export default class ApplicationController extends Controller {
// 共通のメソッドや値を定義
static values = { userId: Number }
}
このコントローラを継承した別のコントローラを作ると、current_userの値が共通化できてよさそうです。
message_controller.js
// app/javascript/controllers/message_controller.js
import ApplicationController from "./application_controller"
export default class extends ApplicationController {
connect() {
if (this.userIdValue === Number(this.element.dataset.userId)) {
// 現在のユーザーによるメッセージの場合の処理
} else {
// それ以外の場合の処理
}
}
}
あとは、リアルタイム通信時にブロードキャストされる部分テンプレートをStimulusで捕捉し、接続されたタイミングで左右に出し分けるCSSを当てるようにすればよさそうですね。
_message.html.erb
<!-- app/views/messages/_message.html.erb -->
<div id="message_<%= message.id %>"
class="message <%# デフォルトは左側に表示 %>"
data-controller="message"
data-message-user-id-value="<%= message.user.id %>">
<!-- メッセージの内容 -->
</div>
終わりに
今回はRails側のコントローラ部分や、HotWireによるリアルタイム通信の部分は触れなかったので、機会があればその辺もまとめて実装方法として公開したいですね。
参考
こちらの記事を参考にさせていただきました。