Socket.io 在刷新页面时执行两次函数

Question

我正在使用nodejs、express-handlebars 和socket.io。我使用 UUID 和套接字 io 创建了一个简单的功能，并想要创建持久的房间。因为我想以干净的方式使用它，所以我构建了控制器。我不知道这是否是一个好主意，但是当我刷新页面时，套接字控制器以某种方式执行内部代码...这将在我的数据库中产生严重问题...

1. 我首先在 server.js 文件中创建主要事件：

const server = http.createServer(app);
const io = new Server(server);

io.on('connection', socket => {
    //User look for user and send invitation to chat
    lookForUserAndInvite(socket);

    //Rooms creation 
    createASingleRoom(socket);
});

2. 然后，我在控制器、服务器端发送了函数： 这里将从客户端接收数据对象。 这是我想存储在 mongodb 中的对象。 另外，这个被执行了两次

const createASingleRoom = socket => {
    socket.on('create_room', data => {
        const roomObject = {
            roomId:         uuidv4(),
            author:         data.author,
            invitedUsers:   data.invitedUsers || []
        };

        console.log('server', roomObject); //Logged this. This creates a new room each time I will refresh the page
    })
}

export default createASingleRoom;

3. 我这里使用了express handbars所以我导入了io库CDN。 在这里，我从服务器端点获取用户数据，并发出事件

   create_room

   。现在我只是用一个数组填充它......

<script src="/socket.io/socket.io.js"></script>
<script>

    const handlereateRoom = () => {
        socket.emit('create_room', {
            roomId: roomName,
            author: user._id,
            invitedUsers: ['numero1', 'numero2']
        });
    }

     document.addEventListener('DOMContentLoaded', async () => {
        //Execute this only after the document is fully loaded
        //Get the main user
        user = await fetchData();
        let url = window.location.origin + '/signup';
        

        //Get dom elements
        const roomName = document.querySelector('#roomName').value;

        if (user) {
            handlereateRoom()
        }

    
    });


</script>

我看到每次刷新页面时，我都会得到一个新的连接 id SET，因此我也得到一个新的 UUID（一个完全不同的对象）。所以我得到了一个新的套接字和一个新的对象。

7spvSFlQ9YJubmgrAAAD
server {
  roomId: '6b20f71b-23ad-48d8-9a20-db8a78ae4dc8',
  author: '65b41b7c389a60d75ed9a2f3',
  invitedUsers: [ 'numero1', 'numero2' ]
}
EHdSu_RuZzkc7_8nAAAF
server {
  roomId: 'f641a9fc-0fa0-4b65-9186-c782a25fab57',
  author: '65b41b7c389a60d75ed9a2f3',
  invitedUsers: [ 'numero1', 'numero2' ]
}

Answer 1

正如您所说，每当页面重新加载时，都会设置一个新连接，您无法采取任何措施来避免它 但是，您可以使用快速会话来存储用户的详细信息，即使在页面重新加载后也是如此，并进行必要的检查以避免 createASingleRoom 被同一个人调用

可能在客户端会话中创建一个单独的 userID 变量，并维护对该变量的检查

用法

const session = require('express-session')

app.use(session({
secret: 'my-secret',
resave: false, 
saveUninitialized: false  
}))

app.get('/', (req, res)=>{
req.session.userID = someRandomNumber
})

然后继续检查该用户ID