Question

我使用nodejs和socket.io开发简单的应用程序。我创建了两个频道，我希望我的客户端在点击按钮时连接其中一个频道。问题是我没有收到服务器的响应

这是我的代码：

//服务器端

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

var nameSpaceWeek = io.of('/week');
var nameSpaceDay = io.of('/day');

app.get('/', function(req, res){
res.sendfile('MDC.html');
});

io.on('connection', function(socket){
    console.log("User = " + socket.id)
});

nameSpaceDay.on('connection', function(socket){
    console.log('someone connected on namespace day');
    nameSpaceDay.emit('hiDay', 'Hello everyone on namespace day!');
});

nameSpaceWeek.on('connection', function(socket){
    console.log('someone connected on namespace week');
    nameSpaceDay.emit('hiWeek', 'Hello everyone on namespace week!');
});

http.listen(3000, function(){
    console.log('listening on localhost:3000');
});

// CLIENT SIDE

<!DOCTYPE html>
<html>
    <head><title>Hello world</title></head>
    <script src="/socket.io/socket.io.js"></script>
    <script>
    var socket = io();

    function setDay(){
        console.log("setDay");
        socket = io.connect('/day');
        console.log(socket)
    }

socket.on('hiDay',function(data){
    console.log("hiDay")
    console.log("data = ." + data + ".")
    document.getElementById('message-container').innerHTML = 'Update day'
    console.log("data = ." + data + ".")
});

function setWeek(){
    console.log("setWeek");
    socket = io.connect('/week');        
    console.log(socket)
}

socket.on('hiWeek',function(data){
    console.log("hiWeek")
    document.getElementById('message-container').innerHTML = 'Update Week'
    //document.getElementById('message-container').innerHTML = data
    console.log(data)
});

</script>
<body>
    <div id="message-container"></div>
    <div id="error-container"></div>
    <button type="button" name="button" onclick="setWeek()">Week</button>
    <button type="button" name="button" onclick="setDay()">Day</button>
</body>

在我的客户端，我创建了两个按钮，当我点击一个我想要更改套接字命名空间

时

Answer 1

当您致电setDay()或setWeek()时，您正在创建一个全新的socket.io连接，从而覆盖之前的socket变量。您拥有的socket.on( hiDay , ...)和socket.on('hiWeek', ...)处理程序仅在您创建的第一个套接字上，而不是在新创建的套接字上，因此您永远不会在这些上看到消息。

要修复此问题，请在连接到该命名空间后将这些邮件处理程序添加到右侧套接字。

function setWeek() {
    // close previous socket.io connection
    socket.close();

    // make new connection to new namespace
    console.log("setWeek");
    socket = io.connect('/week');        
    console.log(socket)

    // add event handler for new socket
    socket.on('hiWeek',function(data){
        console.log("hiWeek")
        document.getElementById('message-container').innerHTML = 'Update Week'
        console.log(data)
    });
}

然后，对setDay()函数执行相同的操作。

而且，如图所示，您可能希望在更改名称空间时断开以前的连接，这样您就不必留下您不再使用的连接。

仅供参考，你还有一个错字：

nameSpaceDay.emit('hiWeek', 'Hello everyone on namespace week!');

应该是这样的：

nameSpaceWeek.emit('hiWeek', 'Hello everyone on namespace week!');

最终，经过测试和运行的代码是：

<!DOCTYPE html>
<html>
    <head><title>Hello world</title></head>
    <script src="/socket.io/socket.io.js"></script>
    <script>
    var socket = io();

    function setDay(){
        socket.close();

        console.log("setDay");
        socket = io.connect('/day');

        socket.on('hiDay',function(data){
            console.log("hiDay")
            document.getElementById('message-container').innerHTML = 'Update day';
            console.log(data);
        });     
    }



    function setWeek() {
        // close previous socket.io connection
        socket.close();

        // make new connection to new namespace
        console.log("setWeek");
        socket = io.connect('/week');        

        // add event handler for new socket
        socket.on('hiWeek',function(data){
            console.log("hiWeek");
            document.getElementById('message-container').innerHTML = 'Update Week';
            console.log(data);
        });
    }

</script>
<body>
    <div id="message-container"></div>
    <div id="error-container"></div>
    <button type="button" name="button" onclick="setWeek()">Week</button>
    <button type="button" name="button" onclick="setDay()">Day</button>
</body>

服务器代码：

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

var nameSpaceWeek = io.of('/week');
var nameSpaceDay = io.of('/day');

app.get('/', function(req, res){
    res.sendFile(path.join(__dirname, 'socket-io-namespace.html'));
});

io.on('connection', function(socket){
    console.log("User = " + socket.id)
});

nameSpaceDay.on('connection', function(socket){
    console.log('someone connected on namespace day');
    nameSpaceDay.emit('hiDay', 'Hello everyone on namespace day!');
});

nameSpaceWeek.on('connection', function(socket){
    console.log('someone connected on namespace week');
    nameSpaceWeek.emit('hiWeek', 'Hello everyone on namespace week!');
});

http.listen(3000, function(){
    console.log('listening on localhost:3000');
});

Answer 2

如果创建connect（ns）函数，则可以在命名空间更改时重新构建套接字事件侦听器。以下应该有效：

        <script>
            var connect = function (ns) {
                return io.connect(ns, {
                    query: 'ns=' + ns,
                    resource: "socket.io"
                }).on('hiWeek', function (data) {
                    console.log("hiWeek")
                    document.getElementById('message-container').innerHTML = 'Update Week'
                    //document.getElementById('message-container').innerHTML = data
                    console.log(data)
                }).on('hiDay', function (data) {
                console.log("hiDay")
                console.log("data = ." + data + ".")
                document.getElementById('message-container').innerHTML = 'Update day'
                console.log("data = ." + data + ".")
            });
            }

            var socket = io();

            function setDay() {
                console.log("setDay");
                socket = connect('/day');
                console.log(socket);
            }

            function setWeek() {
                console.log("setWeek");
                socket = connect('/week');        
                console.log(socket);
            }


        </script>

单击按钮时JS从客户端更改套接字命名空间

2 个答案: