All geek questions in one place

The socket.on event is repeated more than once with each response

I set the socket.emit event after a successful comment. But the problem occurs when I bind the sockets.on event. It fires several times.

$(document).on('click', '#comment_button', function() { $.ajax({ // upon success success: function (response) { if (response) { socket.emit('postcomment'); socket.on('refresh', function () { console.log('refresh'); //This console.log('refresh') is coming multiple times. I mean its occurance increases with every successful ajax response. }); } }); });

Here is my server.js

 socket.on('postcomment', function () { io.sockets.emit("refresh"); });

I checked that in my server.js function socket.on socket.on called only once. I'm not sure what the problem is with socket.on('refresh', function () {} in ajax. Any help would be great.

The PS socket connection is already done. No problem with that.

EDIT: I fixed the error. If someone reads this in the future. As Jason and Niranjan mentioned, the socket.on{} event linked itself to a successful response. To be simple: Each time a click handler is called, it attaches additional event listeners to the socket. Listeners attached to previous clicks remain active.

so I made the following changes to the previous code

  $(document).on('click', '#comment_button', function() { $.ajax({ // upon success success: function (response) { if (response) { socket.emit('postcomment'); } }); }); socket.on('refresh', function () { console.log('refresh'); });

Happy coding.

+5
source share
3 answers

i made the following changes to the previous code. It worked.

 $(document).on('click', '#comment_button', function() { $.ajax({ // upon success success: function (response) { if (response) { socket.emit('postcomment'); } }); }); socket.on('refresh', function () { console.log('refresh'); });
Event

socket.on {} was associated with a successful response. to be simple: every time a click handler is called, it attaches additional event listeners to the socket. The listeners you pasted on previous clicks remain active.

+4
source

What I feel, sockets are working fine. Maybe ajax() is called multiple times.

For example, you call ajax() when you click something. and if socket.on('refresh') executes. So, if the user clicks the button several times, ajax will be called so many times. This causes it to repeat on sockets()

So make sure you don't call ajax multiple times.

Your problem has been resolved :)

+2
source

You add another copy of the anonymous function inside socket.on refresh function every time the ajax request succeeds.

I did this test. If I press the ajax button and then click the "click me" button, I get one "howdy" in the console. If I press the ajax button again and then click “click me”, I will get “howdy” twice. Press ajax again, "click me" prints "howdy" three times, etc.

 <!DOCTYPE html> <html> <script src="jquery-2.1.4.min.js"></script> <script> function send_ajax_request() { $.ajax("http://localhost/test.html").done(function() { console.log("ajax done"); $("#clicker").click(function() { console.log("howdy"); }); }); } </script> </head> <body> <input type="button" value="ajax request" onclick="send_ajax_request()"> <input type="button" value="click me" id="clicker"> </body> </html>

Edit: Thus, the solution, if your goal is to simply configure some behavior for the socket.on refresh event, is to assign this behavior outside of the ajax function and outside of any function that can be called multiple times.

+1
source

Source: https://habr.com/ru/post/1233778/

More articles:


All Articles