Message Handler Does Not Fire When Receiving Data Through WebSocket

What do you want to do
You want JavaScript event handlers to fire when you receive a message with the chat feature that you are creating in the Rails application.

Current Code
Currently, I am using the 'message' handler with reference to the URL below.
https://developer.mozilla.org/ja/docs/Web/API/WebSocket/message_event

When loading the page, you can see that the 'message' handler is on fire in the developer tool console.
On the other hand, the 'message' handler does not fire when it receives a message entered by another browser.

Chat page view

<div class="talk_room">

  <div class="talk_room_content">

    <h5class="title">Open Chat</h5>

    <!==Chat Contents==>
　　 <!== Receive messages from websocket here too==>
    <divid="chat-index">
      <%=render@talks%>
    </div>
　　
    <!==Form==>
    <form class="talk_room_form">
      <input id="content" type="text" class="form-control">
    </form>

  </div>

</div>

<script>
    // Bottom scroll
    function scrollBottom(){
        vara = document. documentElement;
        variable = a.scrollHeight-a.clientHeight;
        window.scroll(0,y);
    }
    scrollBottom();

    window.addEventListener("message",()=>{
      console.log('hoge');
    })

</script>

When you receive the message, I would like you to tell me which event handler will ignite the addEventListener.
Thank you for your cooperation.

Additional Information

Write the code for where you want to receive WebSocket

Create a chat channel with the post action.

chat_channel.rb

class ChatChannel <ApplicationCable::Channel
  def subscribed
    stream_from 'chat_channel'
  end

  defunsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def post(data)
    message =Talk.create!content: data ['message'] [0]
    template = ApplicationController.render.render (partial: 'talks/talk', locals: {talk:message})
    ActionCable.server.broadcast ('chat_channel', template)
  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
    },

    // What to do when you receive a message
    received: function(data){
        return$('#chat-index').append(data);
    },

    // Receive form completion
    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=';
    })
});

javascript ruby-on-rails websocket

2022-09-30 21:50

2 Answers

The message event occurs for the WebSocket DOM object that is returned when newWebSocket.The code in your question registers an event listener for the window object, so it seems that the listener is registered incorrectly.

2022-09-30 21:50

I have solved it myself, so I will write it down below.
Although it is not a resolution of the message handler ignition, the purpose is to:
"Run the function when you receive a message with the chat function" was realized.

Chat page view

<script>
    function hoge() {
        console.log('hoge')
    };
    // Omitted below

</script>

chat.js

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

*The reason why the content is exactly the same as the URL below is because it is my post.
https://teratail.com/questions/281095

2022-09-30 21:50

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656