无法启动并运行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! 但实际上并没有对服务器做任何事情。 服务器只是扼杀infowarn以上。 客户端也在做上面显示的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