我在 Windows 上运行并使用 WAMP 作为本地主机服务器。我搜索了很多教程,尝试了很多东西等等,但仍然没有效果..
当前设置
所以现在写,在我的 www/目录中,我创建了一个名为 socketiodemo
的文件夹。
在其中,我执行了 npm install socket.io
以及安装了一些其他 Node 包:
- socket.io
- express
- Nib
- 手写笔
我安装了上述所有软件包,尽管我实际上并不需要它们。我刚刚安装了它们,因为很多教程都需要它们,但我不想使用它们,而只是使用 javascript 访问纯 socket.io。
所以,这是我的 www 目录的快照:
- app.js
- index.html
- Node 模块
- socket.io
- express
- Nib
- 手写笔
我发现的最简洁的教程之一给了我这个 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>
客户端代码设计为通过在 Chrome 的检查器中动态调用 sendMessageToServer('Your Message')
来工作。
电流输出
那么,是时候运行服务器了。 WAMP 已上线,正在访问 www/socketiodemo 并进行操作
Node app.js
给我输出:
信息 - socket.io 已启动
现在,转到 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.
现在服务器( Node 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 即可:
向服务器发送“hello”!
但实际上并不对服务器执行任何操作。服务器只是连续转储上面的 info
和 warn
。客户端也会连续出现上面所示的 XMLHttpRequest
错误。
您能确定问题出在哪里吗?我实际上已经尝试了很多教程和东西,这是我最接近让某些东西发挥作用的。
如果有人也想推荐一个他们知道可行的教程,请这样做。
最佳答案
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');
});
});
使用此代码,您的服务器将使用 Express 来服务 index.html
当您访问 localhost:8080
更改您的 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);
}
启动服务器并访问 localhost: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
!
关于html - 无法启动并运行 socket.io,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10856370/