How to avoid create a new socket connection in socket.io after html page refresh?

Question

I have tried socket.io, I found when client html page load, a new socket connection created.When I refresh the page, I found a new socket connection create, and then the old connection disconnect.

My problem is how to avoid this? Because I am building a chat room application. When a user enter the room page, on "connection" servier side emit "Welcome user xxx come!", and on 'disconnec' event emit "User xxx leaved." But when a user refresh the current page, this will fire 'disconnect' event and filre 'connected' event again. And it will emit "Welcome user xxx come!" and "User xxx leaved." messages together.

How to ignore page refresh event?And Just like http session?

Update: I have already found way to solve the problem. from this question Handle browser reload socket.io

Found a possible solution here : https://stackoverflow.com/questions/41924713/node-js-socket-io-page-refresh-multiple-connections — Abbin Varghese, Jan 02 '19 at 10:22

score 22 · Accepted Answer · answered Mar 02 '12 at 07:33

22

You can't block refreshing the page, and there is no way to avoid the socket.io disconnect when a user refreshes the page either.

I would suggest adding a timeout:

When a user is seen disconnecting, start a timer, say 10-30 seconds
If a user returns to the chat while the timer hasn't finished, don't do anything
If a user has not returned after the timer ends, then display the "user has left" message

answered Mar 02 '12 at 07:33

Jani Hartikainen

42,745
10
68
86

Is there a 'session-like' solution for this problem? – qichunren Mar 02 '12 at 07:56
3

I don't really know what you mean by that.. The client's socket is in the browser, and when a page is reloaded, all client-side JS code and state for that page is essentially discarded. – Jani Hartikainen Mar 02 '12 at 10:32
Can you give pseudocode for this? I am a bit confused – Sssssuppp Oct 29 '20 at 03:13

score 9 · Answer 2 · edited Jul 22 '16 at 17:02

You can use sessions. Even though the socket disconnects when refreshing occurs, you could still retain some data of that particular user and use that data whenever the socket is connected again.

Here's how you use sessions:

var express = require('express');     
var MemoryStore = require('express').session.MemoryStore;

app.use(express.cookieParser());
app.use(express.session({ secret: "keyboard cat", store: new MemoryStore({ reapInterval: 60000 * 10 })}));

app.get('/', function(req,res){
    req.session.name ="clients_name";
    res.render(__dirname + '/index.jade',{user:req.session.name});
});

and you should use jade or any other "View Engine" to get the data passed to the page.

How to avoid create a new socket connection in socket.io after html page refresh?

2 Answers2