客户端未在 Socket.IO 中接收事件

Question

我这里有一个简单的聊天室：

app.js

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

app.get('/', function(req, res){
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket) {
    var messages;
    fs.readFile('log.txt', 'utf8', function(err, data) {
        messages = data.split('|/');
        for (i = 0; i < messages.length; i++) {
            socket.emit('message', messages[i]);
        }
        if (err) throw err;
    })
    socket.on('message', function(data) {
        fs.appendFile('log.txt',
            '<span class="seen">' + data.name + ': ' + data.msg + '</span>' + '|/',
            function(err) {
            if (err) throw err;
        })
        socket.broadcast.emit('message', data);
    })
})

http.listen(2099, function(){
    console.log('litening on :2099');
});

index.HTML

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>chat</title>
<style>
body {
    font-family: sans-serif;
    font-size: 18px;
    background: #404040;
}
input[type=text],[type=submit] {
    font-size: 18px;
}
#chatList {
    list-style: none;
    margin: 0;
    padding: 0;
}
#inputContainer {
    position: fixed;
    bottom: 0;
    width: 100%;
    margin: 10px;
}
#input {
    width: calc(90% - 40px);
    padding: 10px 20px;
    border: 1px solid white;
    border-radius: 10px;
    margin-right: -3px;
    display: inline-block;
    color: white;
    background: #404040;
}
#submit {
    border: 1px white solid;
    border-radius: 10px;
    padding: 11px 2.2%;
    color: white;
    background-color: #404040;
}
.msg {
    margin: 0 12px 0px 12px;
    padding: 12px;
    border-bottom: 1px solid gray;
    color: white;
}
.income {
    color: crimson;
}
.sender {
    color: cyan;
}
</style>
 </head>
</head>
<body>
<div id='chat'>
<ul id='chatList'>
</ul>
</div>
<div id='inputContainer'>
<input type="text" id='input' placeholder="Type a message..." autocomplete="off">
<input type="submit" id='submit' value="Send" onclick="send()">
</div>
</form>
<script src='/socket.io/socket.io.js'></script>
<script>
document.getElementById('input').value = '';
var socket = io();
document.addEventListener("keydown", function(e) {
    if (e.keyCode == 13) {
        send();
    }
})
function send() {
    value = document.getElementById('input').value;
    if (value != '') {
        socket.emit('message', {msg: value, name: username})
        var list = document.getElementById('chatList');
        var msg = document.createElement('li');
        msg.className = 'msg';
        msg.innerHTML = '<span class="sender">' + username + '</span>' + ': ' + value;
        list.appendChild(msg);
        document.getElementById('input').value = '';
    }
}
socket.on('message', function(data) {
    var list = document.getElementById('chatList');
    var msg = document.createElement('li');
    msg.className = 'msg';
    msg.innerHTML = data;
    list.appendChild(msg);
})
document.getElementById('input').value = '';
var username = prompt('Choose a username:');
if (username == '') {
    username = 'mysteryman' + Math.floor(Math.random() * 100);
}
</script>
</body>
</html>

所以这个函数：

fs.readFile('log.txt', 'utf8', function(err, data) {
        messages = data.split('|/');
        for (i = 0; i < messages.length; i++) {
            socket.emit('messages', messages[i]);
        }
        if (err) throw err;
    })

假设从 log.txt 读取数据并将其作为事件发送给客户端以加载旧消息。它工作正常，但即使此循环正在运行并发送事件，客户端也没有收到任何事件。

我已尝试确保在发送数据之前加载所有事件。

任何帮助将不胜感激！！！

Answer 1

您的拼写错误，您在服务器端发出 messages 事件，但在客户端监听 message（没有 s）事件。

Answer 2

我的猜测是当服务器触发socket.emit('message'...时，客户端中的套接字还没有注册socket.on('message'...