

**実現したいこと**  
Railsアプリケーションで作成しているチャット機能でメッセージを受け取った際に、JavaScriptのイベントハンドラーを発火させたい。

**現在のコード**  
現在は下記URLを参考に 'message' ハンドラーを使用している。  
<https://developer.mozilla.org/ja/docs/Web/API/WebSocket/message_event>

ページを読み込んだ際は 'message' ハンドラーが発火していることが、デベロッパーツールのコンソールで確認できる。  
一方で他のブラウザで入力されたメーセージを受け取った際に 'message' ハンドラーは発火しない。

チャットページのview

[code]

    <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>
    
    
[/code]

メッセージを受け取った際、addEventListenerを発火させるイベントハンドラーをご教示頂きたいです。  
よろしくお願いします。

追加情報

WebSocket受信箇所のコードを記述します

postというアクションを持つ、chatチャンネルを作成。

chat_channel.rb

[code]

    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
    
[/code]

chat.js

[code]

    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 = '';
        })
    });
    
[/code]


CC BY-SA 4.0
2020-07-29T06:56:25.817
69089
2020-07-31T05:16:41.027
2020-07-31T01:10:43.853
3060
40969
question
javascript ruby-on-rails websocket
WebSocket を通じてデータを受け取った際にmessageハンドラーが発火しない


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

チャットページのview

[code]

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

chat.js

[code]

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

※なお下記URLと全く同じ内容である理由は私の投稿であるためです。  
<https://teratail.com/questions/281095>


CC BY-SA 4.0
2020-07-29T12:03:14.837
69099
2020-07-31T05:16:41.027
2020-07-31T05:16:41.027
40969
40969
69089
answer


`message` イベントは `new WebSocket` としたときに返される `WebSocket` DOM
オブジェクトに対して発生します。ご質問にあるコードは `window`
オブジェクトに対してイベントリスナーを登録していますので、リスナーを登録する対象が間違っているようです。


CC BY-SA 4.0
2020-07-30T10:57:46.200
69117
2020-07-30T10:57:46.200
40595
69089
answer