Node.js Socket.IO刷新浏览器时添加连接_Node.js_Sockets_Socket.io

Node.js Socket.IO刷新浏览器时添加连接

node.js sockets socket.io

Node.js Socket.IO刷新浏览器时添加连接,node.js,sockets,socket.io,Node.js,Sockets,Socket.io,我在我的NodeJS应用程序中添加Socket.IO（顺便说一句，我是新手），当我在Chrome上按F5刷新网页时，会根据我的服务器日志创建一个新的套接字：用户连接的SWpG6Fv9mjmMoLZRAAAA 用户断开了SWpG6Fv9mjmMoLZRAAAA的连接用户连接的gvtxcnJR6sC4DW7CAAAB 用户连接的gvtxcnJR6sC4DW7CAAAB 用户已断开gvtxcnJR6sC4DW7CAAAB的连接用户已断开gvtxcnJR6sC4DW7CAAAB的连接用户连接的P

我在我的NodeJS应用程序中添加Socket.IO（顺便说一句，我是新手），当我在Chrome上按F5刷新网页时，会根据我的服务器日志创建一个新的套接字：

用户连接的SWpG6Fv9mjmMoLZRAAAA
用户断开了SWpG6Fv9mjmMoLZRAAAA的连接
用户连接的gvtxcnJR6sC4DW7CAAAB
用户连接的gvtxcnJR6sC4DW7CAAAB
用户已断开gvtxcnJR6sC4DW7CAAAB的连接
用户已断开gvtxcnJR6sC4DW7CAAAB的连接
用户连接的PWPJZBV_u2;-lnVL4RAAAC
用户连接的PWPJZBV_u2;-lnVL4RAAAC
用户连接的PWPJZBV_u2;-lnVL4RAAAC
用户断开的PWPJZBV_u2;-lnVL4RAAAC
用户断开的PWPJZBV_u2;-lnVL4RAAAC
用户断开的PWPJZBV_u2;-lnVL4RAAAC
用户连接的sP7lJaRrH6Hrevp7AAAD
用户连接的sP7lJaRrH6Hrevp7AAAD
用户连接的sP7lJaRrH6Hrevp7AAAD
用户连接的sP7lJaRrH6Hrevp7AAAD
用户已断开sP7lJaRrH6Hrevp7AAAD的连接
用户已断开sP7lJaRrH6Hrevp7AAAD的连接
用户已断开sP7lJaRrH6Hrevp7AAAD的连接
用户已断开sP7lJaRrH6Hrevp7AAAD的连接
用户已连接-86W ITTDWRSYEVGAAE
用户已连接-86W ITTDWRSYEVGAAE
用户已连接-86W ITTDWRSYEVGAAE
用户已连接-86W ITTDWRSYEVGAAE
用户已连接-86W ITTDWRSYEVGAAE

你知道为什么会这样吗

这是我的密码：

index.js:

"use strict";

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

const opn = require('opn');

const login = require('./scripts/login.js');
const main = require('./scripts/main.js')(socket);
const init = require('./scripts/init.js');
const config = require('./scripts/config.js');

app.use(express.static('public'));
app.set('view engine', 'ejs');
http.listen(3000, function () {
    console.log('==> Servidor iniciado -- Puerto 3000');
});

opn('http://localhost:3000');

app.use('/', main);

main.js

"use strict";

const express = require('express');
const router = express.Router();
const main = function (socket) {

    // Home page route.
    router.get('/', function (req, res) {
        socket.on('connection', function (socket) {
            console.log('user connected ' + socket.id);
            socket.on('disconnect', function () {
                console.log('user disconnected ' + socket.id);
            });
        });

        res.render('main', {
            page_name: 'main'
        });
    });

    return router;
};

module.exports = main;

index.html

<script src="/socket.io/socket.io.js" charset="utf-8"></script>
<script>
    var socket = io();

    socket.on('connect', function (data) {
        console.log('connected');
    });
</script>


var socket=io（）；
socket.on（'connect'，函数（数据）{
console.log（'connected'）；
});

实际上，您并没有获得多个连接，而是为

连接

事件添加了越来越多的侦听器，因此最终会多次处理同一事件（导致出现多个连接）

当您将socket.io

connect

事件侦听器放入路由处理程序中时，如下所示：

// Home page route.
router.get('/', function (req, res) {
    socket.on('connection', function (socket) {
        console.log('user connected ' + socket.id);
        socket.on('disconnect', function () {
            console.log('user disconnected ' + socket.id);
        });
    });

    res.render('main', {
        page_name: 'main'
    });
});

"use strict";
const router = require('express').Router();

module.exports = function(io) {

    io.on('connection', function (socket) {
        console.log('user connected ' + socket.id);
        socket.on('disconnect', function () {
            console.log('user disconnected ' + socket.id);
        });
    });

    // Home page route.
    router.get('/', function (req, res) {
        res.render('main', {
            page_name: 'main'
        });
    });

    return router;
};

然后，每次点击

路由时，您都会为

连接

事件添加另一个重复的侦听器。因此，当一个新的socket.io连接发生时，您有多个侦听器，因此您会多次处理同一个连接（造成混乱的日志记录）

解决方案通常是将socket.io侦听器移到任何路由处理程序之外，以便只安装一次。但是，如果由于其他原因将它们放在路由处理程序中，那么还必须解决其他问题。在任何情况下，socket.io侦听器都必须位于任何路由处理程序之外，因此它只能在服务器启动时安装一次

也许是这样的：

// Home page route.
router.get('/', function (req, res) {
    socket.on('connection', function (socket) {
        console.log('user connected ' + socket.id);
        socket.on('disconnect', function () {
            console.log('user disconnected ' + socket.id);
        });
    });

    res.render('main', {
        page_name: 'main'
    });
});

"use strict";
const router = require('express').Router();

module.exports = function(io) {

    io.on('connection', function (socket) {
        console.log('user connected ' + socket.id);
        socket.on('disconnect', function () {
            console.log('user disconnected ' + socket.id);
        });
    });

    // Home page route.
    router.get('/', function (req, res) {
        res.render('main', {
            page_name: 'main'
        });
    });

    return router;
};

注意，在同一范围内还有两个变量，它们都名为

socket

。这是一种糟糕的做法，因为它会阻止对更高范围的访问，并且通常会在处理代码时造成错误或混乱

您的更高级别可能应该命名为

io

，以免与

connection

事件的

socket

参数混淆，

io

是引用主socket.io服务器实例时的常用惯例。

您实际上没有获得多个连接，但是，您正在为

连接

事件添加越来越多的侦听器，因此最终会多次处理同一事件（导致出现多个连接）