When I reload the page in vue js socket io client create multiple message receiver - socket.io

When I reload the page in vue js socket io client create multiple message receiver. show old message in message receiver

Related

How Can I listen or subscribe to pusher:pong event using Vue pusher echo?

I'm using the Vue + Laravel pusher in my Realtime app.
I realized that client sends "pusher:ping" event to backend and it responds with "pusher:pong" based on Doc.
I was wondering how can I detect if the socket connection is alive?
Is there a way to subscribe or listen to the protocol level events?
Thanks

can not show messages received in console with pusher and websocket

for project i used pusher to create realtime chat using laravel 9 . i can send message from front end to backend with api but can not received messages from backend
chat channel created but won't show up anything
for example when an event called backend completely received that but could not send anything or can not connect to channel
js :
Echo.channel('chat').listen('.MyMessage', (e) => {
console.log(e)
})
could anyone help me ?

Fails to create a websocket object with javascript code

I wanted to make a chat example using websocket in the spring environment.
However, a problem arose from creating a websocket object with JavaScript code. Like this:
WebSocket connection to 'ws://localhost:6680/websocket/replyEcho' failed:
(anonymous) # replyEcho?name=%EB%82%98%EC%84%B1%EC%A7%84:12
The error code is:
var socket = new WebSocket('ws://localhost:6680/websocket/replyEcho');
The only backend configuration I made was to create a handler and register the handler in the servlet context.
I don't know why the hell this is happening.
Help me

In a group chat, should the new message event (websocket) be sent by the client or the API?

I have a doubt, in a group chat system that has a database with a rest API, who should issue the event of a new message?
The client or the endpoint to create the new message?
For example: X user sends a message to group Y, then uses the api endpoint api.com/message-create and that endpoint emits the message-create event through websocket
Example 2: X user sends a message to group Y, then uses the api api.com/message-create endpoint and the endpoint does not emit the message-create event, but was emitted when the user pressed the send message button
I still don't quite understand if it would occupy more websocket channels to achieve that, if a global one is enough, etc.
The server should be responsible for communication logic. So your first example is better.
But: why do you use two communication channels for sending an creating messages?
If you use websocket, you don't need create a message from a client by using additional rest endpoint.
This approach is prone to errors. For example if the client will loose network connection after sending message through websocket and before executing call to the REST endpoint?
The message will not be stored in a database.
Your flow should looks as follows:
User clicks the send button.
Message is send through the websocket.
Message is stored in the database asynchronously (you can do it directly from communication server, or use rest endpoint)
Emit "new message" event to the group.

Client side event when using response.flush() in an iframe

I have an iframe which is loading a page. I am using response.flush() on server side because html of iframe could be very large. Is there any event which is triggered on client side when response is flushed on server? I tried load,init but they are being called when all data is flushed.

Resources