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=';
})
});
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.
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
© 2024 OneMinuteCode. All rights reserved.