Question

所以我最终决定给Node.js一个机会。我决定使用一个小聊天应用来打破僵局。我正在关注的教程直接来自socket.io站点。

我正在逐字逐句地阅读教程，甚至尝试将代码复制并粘贴到源代码中，当我输入文本并发送它时，我没有得到任何结果。它应该在我的命令提示符中出现，但事实并非如此。

我已经连接了用户并且出现了用户断开连接的消息，但是当我按照本教程逐步操作时，我对此感到困惑。

Index.js

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

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

io.on('connection', function(socket){
    socket.on('chat message', function(msg){
        console.log('message: ' + msg);
    });
});

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

的index.html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Chat</title>

    <script src="/socket.io/socket.io.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
        var socket = io();
        $('form').submit(function(){
            socket.emit('chat message', $('#m').val());
            $('#m').val('');
            return false;
        });
    </script>

    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font: 13px Helvetica, Arial; }
        form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
        form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
        form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
        #messages { list-style-type: none; margin: 0; padding: 0; }
        #messages li { padding: 5px 10px; }
        #messages li:nth-child(odd) { background: #eee; }
    </style>
</head>
<body>

    <ul id="messages"></ul>

    <form action="">
        <input id="m" autocomplete="off" /><button>Send</button>
    </form>

</body>
</html>

我假设我犯了一些地方，但我没有看到它，即使我确实尝试复制并粘贴它。此外，如果重要，我使用的是Windows 8.1和Chrome。我查了一下，也找不到这个问题的答案。任何帮助都会很棒。

编辑：问题出在jQuery上，由于某些原因它没有响应。在vanilla中重写脚本后，它按预期工作。

Index.js - JavaScript

<script>
    var socket = io();

    function sendMessage() {
        var msg = document.getElementById('m');

        socket.emit('message', msg.value);
        msg.value = '';
        return false;
    }
</script>

HTML：

<form action="" onsubmit="javascript:sendMessage();">
        <input id="m" autocomplete="off" /><button>Send</button>
</form>

Answer 1

您可以通过在控制台中输入来激活Chrome中的Socket.IO日志记录：

localStorage.debug = "socket.io-client:socket"

并在服务器端：

DEBUG=* node yourfile.js

此外，您希望在文档准备好时执行脚本，以便使用jQuery，因此您需要稍微延迟一下：

$( document ).ready(function() {
   var socket = io();
   $('form').submit(function(){
       socket.emit('chat message', $('#m').val());
       $('#m').val('');
       return false;
   });
});

Answer 2

事后一点点，但我遇到了同样的问题并将其与负载订单问题联系起来。只需将绑定到表单的代码移到<body>的底部而不是<head>。这有点误导，因为本教程中的一些早期代码直接位于<head>。

Socket.io Chat Tutorial无法正常运行

2 个答案: