Учебник Socket.io Chat не работает должным образом

Итак, я наконец решил дать Node.js выстрел. Я решил пойти с небольшим приложением для чата, чтобы сломать лед. Учебник, за которым я следую, находится непосредственно с сайта socket.io.

http://socket.io/get-started/chat/

Я следую учебному слову в слово и даже пытался скопировать и вставить код в исходный код, и я не получаю, когда я печатаю текст и отправляю его. Предполагается, что он появится в моей командной строке, но это не так.

У меня был пользователь, который подключился, и пользовательские сообщения отключились, но я на него напал, так как шаг за шагом последовал за учебником.

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. Я проверил и не нашел ответа на эту проблему. Любая помощь будет отличной.

EDIT: проблема связана с jQuery, по какой-то причине он не отвечает так, как должен. После перезаписи script в ваниле он работает по назначению.

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>

Ответ 1

Вы можете активировать ведение журнала для Socket.IO в Chrome, набрав консоль:

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

и на стороне сервера:

DEBUG=* node yourfile.js

Кроме того, вы хотите, чтобы script выполнялся, когда документ готов, чтобы использовать jQuery, поэтому вам нужно немного задержать его:

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

Ответ 2

Немного по факту, но у меня была такая же проблема и связал ее с проблемой загрузки. Просто переместите код, привязывающий форму к нижней части <body>, а не в <head>. Это немного вводит в заблуждение, поскольку некоторые из ранних кодов в учебнике были непосредственно в <head>.