使用Socket.io将客户端连接到服务器

Question

我对node.js和它的插件比较陌生，所以这可能是一个开始的问题。

我正在尝试在一个Web服务器上获得一个简单的HTML页面，该页面连接到另一个使用websocket.io.运行node.js的服务器

我的代码如下：

客户端

<script src="socket.io/socket.io.js"></script>
<script>
    // Create SocketIO instance, connect
    var socket = new io.Socket();
    socket.connect('http://127.0.0.1:8080'); 
    // Add a connect listener
    socket.on('connect',function() {
      console.log('Client has connected to the server!');
    });
    // Add a connect listener
    socket.on('message',function(data) {
      console.log('Received a message from the server!',data);
    });
    // Add a disconnect listener
    socket.on('disconnect',function() {
      console.log('The client has disconnected!');
    });
    // Sends a message to the server via sockets
    function sendMessageToServer(message) {
      socket.send(message);
    };
</script>

服务器端

// Require HTTP module (to start server) and Socket.IO
var http = require('http');
var io = require('socket.io');
var port = 8080;
// 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(port);
// Create a Socket.IO instance, passing it our server
var socket = io.listen(server);
// Add a connect listener
socket.on('connection', function(client){ 
    console.log('Connection to client established');
    // 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');
    });
});
console.log('Server running at http://127.0.0.1:' + port + '/');

启动服务器运行良好http://localhost:8080在我的浏览器中也工作，如预期的那样返回"Hello Socket Lover"。但我想让一个不同的页面与套接字对话，而不是从node.js.运行一个

但当我运行它时，什么也没发生，Chrome控制台返回：

Failed to load resource            http://undefined/socket.io/1/?t=1333119551736
Failed to load resource            http://undefined/socket.io/1/?t=1333119551735

我已经做了一整天了。有什么帮助吗？

Answer 1

您是否尝试过不是从相对URL加载socket.io脚本？

您正在使用：

<script src="socket.io/socket.io.js"></script>

和：

socket.connect('http://127.0.0.1:8080');

你应该试试：

<script src="http://localhost:8080/socket.io/socket.io.js"></script>

和：

socket.connect('http://localhost:8080');

使用任何适合您当前设置的开关切换localhost:8080。

此外，根据您的设置，从不同域加载客户端页面时，与服务器的通信可能会遇到一些问题（同源策略）。这可以通过不同的方式来克服（在这个答案的范围之外，谷歌/SO it）。

Answer 2

您需要确保在链接到socket.io:之前添加正斜杠

<script src="/socket.io/socket.io.js"></script>

然后在视图/控制器中只需执行：

var socket = io.connect()

这应该能解决你的问题。

Answer 3

代替：

var socket = new io.Socket();

尝试：

const socket = io();

另外添加一个服务器文件：

const http = require('http');
const express = require('express');
const app = express();
const server = http.createServer(app);
app.use(express.static(__dirname + '/public'));
const io = require('socket.io')(server);
const PORT = 5000;
server.listen(PORT, () => {
console.log(`Server is Listening On Port ${PORT}`);
});