Socket.io 服务器不接收消息

Question

我正在尝试遵循官方的 socket.io 教程，但我无法让服务器接收消息。我花了几个小时尝试各种事情。我完全没有想法。

这是服务器：

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

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

io.on('connection', function (socket) {
    //socket.emit('greeting', 'welcome to the chat');
    socket.on('chat', function (msg) {
        console.log('message: ' + msg);
    });
});

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

和客户：

<!doctype html>
<html>
<head>
    <title>Socket.IO chat</title>
    <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>
    <script src="/socket.io/socket.io.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
        //localStorage.debug = '*';
        var socket = io("http://localhost:3000/");
        socket.on('greeting',
            function (msg)
            {
                console.log(msg);
            }
            );
        /*
        $('form').submit(function ()
        {
            socket.emit('chat message', $('#m').val());
            //$('#m').val('');
            return false;
        });
        */
        $("#sendBtn").click(function ()
        {
            socket.emit('chat', $('#m').val());
            return false; 
        });
    </script>
</head>
<body>
    <ul id="messages"></ul>
    <form action="">
        <input id="m" autocomplete="off" /><button id="sendBtn">Send</button>
    </form>
</body>
</html>

客户端可以从服务器接收消息，但反之则不行。我试过打开调试，但我不知道我看到的是对还是错。但是，当我在网页上按发送时，肯定会发生交互。

从客户端看是这样的：

Answer 1

您需要更正与元素的绑定，并且您正在尝试绑定到尚未呈现的组件。您需要等待 DOM 准备好。试试这个。

$(function() {
    $("#sendBtn").on('click', function ()
    {
        socket.emit('chat', $('#m').val());
        return false;
    });
});

像这样包装你的函数，你告诉它只在页面加载时执行