Fatal编程技术网
  • javascript/
  • Javascript Socket.io断开事件触发新连接

Javascript Socket.io断开事件触发新连接

javascript html node.js socket.io

Javascript Socket.io断开事件触发新连接,javascript,html,node.js,socket.io,Javascript,Html,Node.js,Socket.io,根据一本书中的教程，我正在尝试使用node和socket.io构建聊天服务器和客户端。前端代码如下： <html> <head> <title>Socket.IO example application</title> <style type = "text/css"> #input { width: 200px; } #messages { position: f

根据一本书中的教程，我正在尝试使用node和socket.io构建聊天服务器和客户端。前端代码如下：

<html>
<head>
    <title>Socket.IO example application</title>
    <style type = "text/css">
    #input {
        width: 200px;
    }
    #messages {
        position: fixed;
        top: 40px;
        bottom: 8px;
        left: 8px;
        right: 8px;
        border: 1px solid #EEEEEE;
        padding: 8px;
    }
    </style>
</head>
<body>
    Your message:
    <input id = "input" type = "text" />
    <div id = "messages"></div>
    <script src = "http://localhost:4001/socket.io/socket.io.js"></script>
    <script type = "text/javascript">
    var messagesElement = document.getElementById('messages');
    var lastMessageElement = null;

    function addMessage (message) {
        var newMessageElement = document.createElement('div');
        var newMessageText = document.createTextNode(message);

        newMessageElement.appendChild(newMessageText);
        messagesElement.insertBefore(newMessageElement, lastMessageElement);
        lastMessageElement = newMessageElement;
    }

    var socket = io.connect('http://localhost:4001');

    socket.on('login', function() {
        var username = prompt('What username would you like to use?');
        socket.emit('login', username);
    });

    socket.on('serverMessage', function (content) {
        addMessage(content);
    });

    function sendCommand(command, args) {
        if(command === 'j') {
            socket.emit('join', args);
        } else {
            alert('unknown command: ' + command);
        }
    }

    function sendMessage(message) {
        var commandMatch = message.match(/^\/(\w*)(.*)/);
        if(commandMatch) {
            sendCommand(commandMatch[1], commandMatch[2].trim());
        } else {
            socket.emit('clientMessage', message);
        }
    }

    var inputElement = document.getElementById('input');

    inputElement.onkeydown = function(keyboardEvent) {
        if(keyboardEvent.keyCode === 13) {
            sendMessage(inputElement.value);
            inputElement.value = '';
            return false;
        } else {
            return true;
        }
    };
    </script>
</body>
</html>
我面临的问题是，每当一个新用户登录时，所有以前的用户都会收到一条消息，在新用户登录之前，它会显示“user”+randomID+“disconnected”，并正常工作。如果一个新用户在前一个用户登录后很快登录，则不会出现此问题（我猜这与心跳有关）。如果您能帮助我弄清楚为什么每次新用户登录时都会触发此断开连接事件，我将不胜感激。谢谢。

我一直在复制您的代码，并在我的服务器上运行，我找不到您面临的问题，但我发现了一个问题，当我取消usename输入窗口时，我的用户名为空，我发现我的用户名为随机字符串。当我断开连接时，socket.io会广播这样的消息

“用户”+随机ID+“已断开连接”

javascript中的
alert
或
prompt
是阻止函数，它们停止浏览器上的所有javascript事件

这就是socket.io内的“心脏”停止跳动的原因。

更详细地说：

在每一次心跳中，服务器都会向客户端发送一个数据包，以检查客户端是活的还是死的，如果客户端没有响应，服务器就会认为它死了

解决方案是用异步函数、弹出式div、表单等替换
提示符
函数

这是故意的行为。您是否尝试打开一个会话，等待10秒再打开另一个会话？第一个用户应该会收到不寻常的消息。我确实按照您的提示进行了操作，但我没有发现问题，我的浏览器是chrome，您呢。我想您的意思是
提示
。删除提示符并用随机数生成器替换它（目前）似乎可以做到这一点。谢谢@莫里亚蒂非常感谢您的编辑：-）。你应该有2K的声誉，然后你可以编辑没有5名评论员。我不能复制你提到的问题。 
/*jslint node: true */
var httpd = require('http').createServer(handler);
var io = require('socket.io').listen(httpd);
var fs = require('fs');

function handler(req, res) {
    "use strict";
    fs.readFile(__dirname + '/index.html', function (err, data) {
        if (err) {
            res.writeHead(500);
            return res.end('Error Loading index.html');
        }

        res.writeHead(200);
        res.end(data);
    });
}

httpd.listen(4001);

io.sockets.on('connection', function (socket) {
    "use strict";
    socket.on('login', function(username) {
        socket.set('username', username, function (err) {
            if (err) {
                throw err;
            }
            socket.emit('serverMessage', 'Currently logged in as ' + username);
            socket.broadcast.emit('serverMessage', 'User ' + username + ' logged in');
        });
    });

    socket.on('clientMessage', function (content) {
        socket.emit('serverMessage', 'You said: ' + content);
        socket.get('username', function (err, username) {
            if (!username) {
                username = socket.id;
            }
            socket.get('room', function (err, room) {
                if (err) {
                    throw err;
                }
                var broadcast = socket.broadcast,
                    message = content;
                if (room) {
                    broadcast.to(room);
                }
                broadcast.emit('serverMessage', username + ' said: ' + message);
            });
        });
    });

    socket.on('join', function (room) {
        socket.get('room', function (err, oldRoom) {
            if (err) {
                throw err;
            }
            socket.set('room', room, function (err) {
                if (err) {
                    throw err;
                }
                socket.join(room);
                if (oldRoom) {
                    socket.leave(oldRoom);
                }
                socket.get('username', function (err, username) {
                    if (!username) {
                        username = socket.id;
                    }
                    socket.emit('serverMessage', 'You joined room' + room);
                });
                socket.get('username', function (err, username) {
                    if (!username) {
                        username = socket.id;
                    }
                    socket.broadcast.to(room).emit('serverMessage', 'User ' + username + ' joined this room');
                });
            });
        });
    });

    socket.on('disconnect', function() {
        socket.get('username', function (err, username) {
            if (!username) {
                username = socket.id;
            }
            socket.broadcast.emit('serverMessage', 'User ' + username + ' disconnected');
        });
    });

    socket.emit('login');
});