0

実現したいこと
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 = '';
    })
});
3
  • 回答される方へ teratail.com/questions/281095
    – htb
    Commented 2020年7月29日 7:20
  • WebSoket受信箇所のコードを記述した方がよいです。
    – htb
    Commented 2020年7月29日 7:21
  • ご指摘ありがとうございます! 修正いたしました。
    – koki
    Commented 2020年7月29日 7:31

2 件の回答 2

1

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

1
  • ご教示ありがとうございます! すでに別の方法で実装はできましたが、これを機に見直します。
    – koki
    Commented 2020年7月31日 5:19
0

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

チャットページのview

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

</script>

chat.js

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

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

2
  • 1
    teratail における他のユーザーからの回答 をこのサイトにそのまま投稿しているようですが、この書き方だとご自身で解決したように見えてしまいます。 / 他人の投稿 (=著作物) を参考にしたのであれば、クレジットを明示することを心がけてください。 - 参考ヘルプ: 他の人が書いた資料を参照する方法
    – cubick
    Commented 2020年7月29日 16:46
  • 1
    ご指摘ありがとうございます。 リンク先は私のアカウントであり自己解決できたのでそのまま記載したのですが、ご指摘いただいた内容については把握しておりませんでした。 ご教示ありがとうございます。
    – koki
    Commented 2020年7月31日 5:13

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。