Socket.io聊天教程无法正常工作

所以我最终决定给Node.js一个镜头。 我决定与一个小型聊天应用程序打破冰。 我正在遵循的教程直接来自socket.io站点。

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

我一直在跟随教程,甚至试图将代码复制并粘贴到源代码中,当我input文本并发送时,我没有收到任何地方的代码。 这应该是在我的命令提示符,但事实并非如此。

我有用户连接和用户断开连接的消息出现,但我难住这一个,因为我一步一步地跟随教程。

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。 我查了一下,也没有find这个问题的答案。 任何帮助将是伟大的。

编辑:问题是与jQuery,由于某种原因,它没有响应,因为它应该。 在香草重写脚本后,它按预期工作。

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> 

您可以在Chrome中input您的控制台来激活Socket.IO的日志logging:

 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; }); }); 

有一点事后,但我有同样的问题,并把它绑回加载顺序问题。 只要将绑定到表单的代码移动到<body>的底部,而不是在<head> 。 这有点误导,因为本教程中的一些早期代码直接在<head>