无法启动并运行socket.io
我在Windows上运行并使用WAMP作为本地主机服务器。 我已经search了很多教程,尝试了很多东西等,但仍然没有工作..
当前设置
所以现在写在我的www /目录中,我创build了一个名为socketiodemo
的文件夹。
其中,我做了npm install socket.io
以及安装其他几个节点包:
- socket.io
- performance
- 笔尖
- 唱针
我安装了所有上面的包,即使我并不需要它们。 我只是安装了他们,因为很多教程需要他们,但我宁愿不使用它们,只是用javascript来纯粹的socket.io。
所以,下面是www下的我的目录的快照:
- app.js
- 的index.html
- node_modules
- socket.io
- performance
- 笔尖
- 唱针
我发现最精简的教程之一给了我这个app.js代码,这是服务器端:
// Require HTTP module (to start server) and Socket.IO var http = require('http'), io = require('socket.io'); // Start the server at port 8080 var server = http.createServer(function(req, res){ // Send HTML headers and message res.writeHead(200,{ 'Content-Type': 'text/html' }); res.end('<h1>Hello Socket Lover!</h1>'); }); server.listen(8080); // Create a Socket.IO instance, passing it our server var socket = io.listen(server); // Add a connect listener socket.sockets.on('connection', function(client){ // Create periodical which ends a message to the client every 5 seconds var interval = setInterval(function() { client.send('This is a message from the server! ' + new Date().getTime()); },5000); // Success! Now listen to messages to be received client.on('message',function(event){ console.log('Received message from client!',event); }); client.on('disconnect',function(){ clearInterval(interval); console.log('Server has disconnected'); }); });
和下面的客户端代码index.html:
<!DOCTYPE html> <html> <head> <style> * { margin:0; padding:0; font-size:11px; font-family:arial; color:#444; } body { padding:20px; } #message-list { list-style-type:none; width:300px; height:300px; overflow:auto; border:1px solid #999; padding:20px; } #message-list li { border-bottom:1px solid #ccc; padding-bottom:2px; margin-bottom:5px; } code { font-family:courier; background:#eee; padding:2px 4px; } </style> <script src="http://cdn.socket.io/stable/socket.io.js"></script> <script> // Create SocketIO instance var socket = new io.Socket('localhost',{ port: 8080 }); socket.connect(); // Add a connect listener socket.on('connect',function() { log('<span style="color:green;">Client has connected to the server!</span>'); }); // Add a connect listener socket.on('message',function(data) { log('Received a message from the server: ' + data); }); // Add a disconnect listener socket.on('disconnect',function() { log('<span style="color:red;">The client has disconnected!</span>'); }); // Sends a message to the server via sockets function sendMessageToServer(message) { socket.send(message); log('<span style="color:#888">Sending "' + message + '" to the server!</span>'); } // Outputs to console and list function log(message) { var li = document.createElement('li'); li.innerHTML = message; document.getElementById('message-list').appendChild(li); } </script> </head> <body> <p>Messages will appear below (and in the console).</p><br /> <ul id="message-list"></ul> <ul style="margin:20px 0 0 20px;"> <li>Type <code>socket.disconnect()</code> to disconnect</li> <li>Type <code>socket.connect()</code> to reconnect</li> <li>Type <code>sendMessageToServer('Your Message')</code> to send a message to the server</li> </ul> </body> </html>
客户端代码被devise为通过在chrome的检查器中dynamic调用sendMessageToServer('Your Message')
来工作。
电stream输出
所以,时间来运行服务器。 WAMP在线,并去www / socketiodemo和做
node app.js
给我输出:
info - socket.io started
现在,去localhost / socketiodemo,重复显示以下日志:
XMLHttpRequest cannot load http://localhost:8080/socket.io/xhr-polling//1338578840544. Origin http://localhost is not allowed by Access-Control-Allow-Origin. XMLHttpRequest cannot load http://localhost:8080/socket.io/xhr-polling//1338578850545. Origin http://localhost is not allowed by Access-Control-Allow-Origin.
现在服务器(节点app.js)开始显示以下消息:
info - socket.io started warn - unknown transport: "undefined" info - unhandled socket.io url warn - unknown transport: "undefined" info - unhandled socket.io url warn - unknown transport: "undefined"
另外,在客户端,做sendMessageToServer('Hello');
只需追加到ul: Sending "hello" to the server!
但实际上并没有对服务器做任何事情。 服务器只是扼杀info
并warn
以上。 客户端也在做上面显示的XMLHttpRequest
错误。
你能找出问题所在吗? 我已经尝试了这么多的教程和东西,这是最接近我得到的东西工作。
如果任何人也想build议他们知道的教程,请这样做。
一些Socket.IO的东西已经改变了。 此外,您可能想要从同一主机/端口提供HTML和Socket.IO JS。 试试这个:
将你的index.html移动到一个public
目录
所以你有以下的树:
app.js public/ index.html node_modules/ socket.io express (whatever else)
修改app.js来提供HTML
改变你的app.js到下面的JavaScript(只有前几行改变):
// Require Express module (to start server) and Socket.IO var io = require('socket.io'), express = require('express'); var server = express.createServer(); server.use(express.static(__dirname + "/public")); server.listen(8080); // Create a Socket.IO instance, passing it our server var socket = io.listen(server); // Add a connect listener socket.sockets.on('connection', function(client){ // Create periodical which ends a message to the client every 5 seconds var interval = setInterval(function() { client.send('This is a message from the server! ' + new Date().getTime()); },5000); // Success! Now listen to messages to be received client.on('message',function(event){ console.log('Received message from client!',event); }); client.on('disconnect',function(){ clearInterval(interval); console.log('Server has disconnected'); }); });
使用此代码,当您访问localhost:8080时,您的服务器将使用Express来提供index.html
改变你的Socket.IO代码
在index.html
,将您的<script>
标记更改为: <script src="/socket.io/socket.io.js"></script>
,然后将JavaScript更改为只读(仅更改第一部分):
// Create SocketIO instance var socket = io.connect(); // Add a connect listener socket.on('connect',function() { log('<span style="color:green;">Client has connected to the server!</span>'); }); // Add a connect listener socket.on('message',function(data) { log('Received a message from the server: ' + data); }); // Add a disconnect listener socket.on('disconnect',function() { log('<span style="color:red;">The client has disconnected!</span>'); }); // Sends a message to the server via sockets function sendMessageToServer(message) { socket.send(message); log('<span style="color:#888">Sending "' + message + '" to the server!</span>'); } // Outputs to console and list function log(message) { var li = document.createElement('li'); li.innerHTML = message; document.getElementById('message-list').appendChild(li); }
启动您的服务器并访问本地主机:8080
请注意,这将一起跳过WAMP堆栈; Node.js同时提供Socket.IO代码和静态文件 。 当你访问localhost:8080时,你应该看到这些消息。 还要注意,你应该使用socket.socket.disconnect()
来断开连接,并使用socket.socket.connect()
来重新连接。
源代码
这个应用程序的工作版本的源代码是在https://github.com/BinaryMuse/so-10856370 ; 记得要npm install express socket.io
!