Flask-socketio: how to close a socket connection

[buptmuye]

For client, how to disconnect the websocket.
For server, is it right to use socket.disconnect()?

[miguelgrinberg]

You can call socket.disconnect() from either side. A connection also breaks if the client navigates to a different page.

[buptmuye]

Thanks, but if I want to connect again, what should I do, is it possible?
I use:

var socket = io.connect('http://0.0.0.0:5566/test');
socket.disconnect();
socket = io.connect('http://0.0.0.0:5566/test');
socket.emit('event', {data: "hello"});

however, the other side didn't receive.

[miguelgrinberg]

I don't know. Did you look at the Javascript console for errors? Maybe that is not supported?

[buptmuye]

the console.log(socket) can print socket information, but the other side didn't receive "hello" message =_=||.
Another issue i met, if i put emit() in one funciton,

(in Javascript)
var socket;
function clickmouse(d) {
d3.select(this).classed("fixed", d.fixed = false);
socket = io.connect('http://0.0.0.0:5566/test');
console.log(socket);
socket.emit('event', {data: "hello"});
}

function clickmouse means to response click someplace, but only the first case executes emit() successlly, when i click again, the other side didn't receive "hello" message anylonger.

[miguelgrinberg]

Socket.IO is not designed to be used like this. You should open a single connection that you use during the life of the application.

If you want to send single events to the server, then use HTTP requests.

[buptmuye]

Thank you for your guide, forgive my poor English D:

[jrbdeveloper]

@miguelgrinberg so what you're saying is that I shouldn't expect to open a connection on a button click, carry out some routine and then disconnect the socket? Meaning, when I click a button a request for some action occurs and then when it gets a response I shouldn't disconnect the socket?

[miguelgrinberg]

@jrbdeveloper no, that is the use case for HTTP requests. When a button is clicked, you send an Ajax HTTP request to the server, get the response, then the connection is closed.

WebSocket and Socket.IO are for long, uninterrupted connections where server and client exchange data frequently.

[jrbdeveloper]

Sounds good, @miguelgrinberg thanks for the reply

[ej23lee]

@miguelgrinberg Am I suppose to connect (ie: var socket = io.connect('http://' + document.domain + ':' + location.port); each time I navigate to a different page?

[miguelgrinberg]

@ej23lee The connection is not going to survive a page change, so yes, each page will have to start a connection (and ideally close it when it is going away, though abandoned connection time out if not explicitly closed).

The typical use case for WebSocket and Socket.IO application is single-page apps, or pages where the user stays a long time.

[jrbdeveloper]

To share my experience, I ended up creating a JS app library that would be persistent across pages. so for example:
var app = {};

Set the following values in a Layout Page/Master Page/Route Index etc.
app.socketUri = "";
app.socket = io.connect(app.socketUri);

then inside my specific libraries I can do the following:
app.socket.emit("some-method", function(response){
});

[ej23lee]

@miguelgrinberg How do I properly disconnect and close a room when a client changes to a new page. I noticed that if I constantly just refresh the page, it will keep making a new connection (thus a new room with the sid) and the room list just keeps growing.

[jrbdeveloper]

@ej23lee socket.disconnect(true); will do it, but the connection will automatically be closed after 30 seconds I believe.

[miguelgrinberg]

@ej23lee Yes, you can call socket.disconnect in an unload event handler for your page.

[ej23lee]

@miguelgrinberg @jrbdeveloper Ok, thanks, I'll give that a try and see how it goes.

[ej23lee]

@miguelgrinberg I'm trying to emit on page unload (also tried beforeunload bind) but that doesn't seem to work.

Related: this stack overflow question might help: http://stackoverflow.com/questions/2970782/javascript-wait-until-ajax-request-finishes-to-close-page.

[miguelgrinberg]

In which way it does not work? Are you calling socket.disconnect? Does the server receive the call?

[ej23lee]

@miguelgrinberg The server does not receive the call (using flask that just prints some text under the disconnect handler). It works if I do the disconnect through a button event though.

In my template, I have something like

$(window).unload(function () {
    socket.disconnect();
});

$('#test').click(function () {
    socket.disconnect();
});

And in my backend, I have:

@socketio.on('disconnect')
def test_disconnect():
print('Client disconnected', request.sid)

[miguelgrinberg]

I'm closing this issue. I have opened #249 to add documentation on properly disconnecting when the page is closed.

[mariohmol]

Hi there, this fixed for me: socket = io.connect("https://"+ document.domain + ':' + location.port ,{'sync disconnect on unload':false);

[miguelgrinberg]

@mariohmol Don't you want the sync disconnect option set to true?

[mariohmol]

@miguelgrinberg Thats true.. i just tested here and is weird.. now is working with or without this option... with true or false... i will leave true as that makes more sense =)