【JavaScript】WebSoketを通じてデータを受け取った際にmessageハンドラーが発火しない

Question

#実現したいこと
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">
　　　 <button id="button" class="btn btn-info">送信</button>
    </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を発火させるイベントハンドラーをご教示頂きたいです。
よろしくお願いします。

#追加情報
WebSoket受信箇所のコードを記述します

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 = '';
    })
});

Comments

[omochi]

WebSoket受信箇所のコードを記述した方がよいです。

[koki0502]

ご指摘ありがとうございます！
該当箇所のコードを記載いたしました。

Answer 1

message ハンドラー発火の解決ではありませんが、下記のようにすることで目的である
「チャット機能でメッセージを受け取った際に関数を実行する」を実現できました。

チャットページのview

<script>
    function hoge(){
        console.log('hoge')
    };
    //以下省略

</script>

chat.js

post: function(content) {
        this.perform('post', { message: content });
        return hoge();
    }