如何使socket.io只连接一次

Posted 2023-02-16

【中文标题】如何使socket.io只连接一次

【英文标题】：How to make socket.io only connect once

【发布时间】：2020-10-10 17:44:45

【问题描述】：

当我转到另一个屏幕或更新页面时，socket.io 上会发出一个新连接。我希望当用户进入第一页时只连接一次并在其他屏幕上继续使用相同的连接

const express = require('express');
const path = require('path');

const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);


app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, 'public'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');


app.get('/', (req, res) => 
    res.render('home.html');
);

app.get('/chat', (req, res) => 
    res.render('salachat.html');
);

app.get('/novoproduto', (req, res) => 
    res.render('novoproduto.html');
);

let messages = [];

let produtos = [];

io.on('connection', socket =>
    console.log(`novo usuario conectado : $socket.id`);
    socket.emit('previousMessages', messages );
    socket.emit('previousprodutos', produtos );


    socket.on('sendMessage', data => 
        messages.push(data);
        socket.broadcast.emit('receivedMessage', data);
    );

    socket.on('sendProduto', data => 
        produtos.push(data);
        socket.broadcast.emit('receivedProdutos', data);
    );

);

server.listen(3000);

当我输入路由时“/”创建一个新连接，当我输入“/chat”或“/novoproduto”时创建另一个

【参考方案1】：

由于浏览器的工作方式，当它离开网页并加载新页面时，原始网页中的所有资源都会被处理掉。这包括 webSocket 或 socket.io 连接。因此，当您在浏览器选项卡/窗口中将页面 A 替换为不同的网页时，您无法保持从页面 A 打开的 socket.io 连接。没有办法做到这一点。

通常的解决方法是在新网页中建立一个新的 socket.io 连接，并让服务器使用某种状态（通常是 cookie）来知道它是哪个用户，这样它就可以重新连接无论它需要为该用户做什么，就好像同一个 socket.io 连接正在继续一样。

其他解决方法是使用框架，其中一个框架不会在浏览器中被替换，因此它可以保持连续的 socket.io 连接，或者使用单页应用程序架构，其中浏览器页面不会在用户导航时被替换周围。