実現したいこと
Railsアプリケーションで作成しているチャット機能でメッセージを受け取った際に、JavaScriptのイベントハンドラーを発火させたい。
現在のコード
現在は下記URLを参考に 'message' ハンドラーを使用している。
https://developer.mozilla.org/ja/docs/Web/API/WebSocket/message_event
ページを読み込んだ際は 'message' ハンドラーが発火していることが、デベロッパーツールのコンソールで確認できる。
一方で他のブラウザで入力されたメーセージを受け取った際に 'message' ハンドラーは発火しない。
チャットページのview
<div class="talk_room">
<div class="talk_room_content">
<h5 class="title">オープンチャット</h5>
<!==チャットの内容==>
<!==websoketで受け取ったメッセージもここで受け取る==>
<div id="chat-index">
<%= render @talks %>
</div>
<!== フォーム ==>
<form class="talk_room_form">
<input id="content" type="text" class="form-control">
</form>
</div>
</div>
<script>
//最下部スクロール
function scrollBottom(){
var a = document.documentElement;
var y = a.scrollHeight - a.clientHeight;
window.scroll(0, y);
}
scrollBottom();
window.addEventListener("message", () => {
console.log('hoge');
})
</script>
メッセージを受け取った際、addEventListenerを発火させるイベントハンドラーをご教示頂きたいです。
よろしくお願いします。
追加情報
WebSocket受信箇所のコードを記述します
postというアクションを持つ、chatチャンネルを作成。
chat_channel.rb
class ChatChannel < ApplicationCable::Channel
def subscribed
stream_from 'chat_channel'
end
def unsubscribed
# Any cleanup needed when channel is unsubscribed
end
def post(data)
message = Talk.create! content: data['message'][0]
templete = ApplicationController.renderer.render(partial: 'talks/talk', locals: { talk: message })
ActionCable.server.broadcast('chat_channel', templete)
end
end
chat.js
App.chat = App.cable.subscriptions.create("ChatChannel", {
connected: function() {
// Called when the subscription is ready for use on the server
},
disconnected: function() {
// Called when the subscription has been terminated by the server
},
//メッセージを受け取った際の処理
received: function(data) {
return $('#chat-index').append(data);
},
//フォームの入力を受け取る
post: function(content) {
return this.perform('post', { message: content });
}
});
document.addEventListener('DOMContentLoaded', function () {
var input = document.getElementById('content');
var button = document.getElementById('button');
button.addEventListener('click', function () {
var content = [input.value];
App.chat.post(content);
input.value = '';
})
});