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

Posted 2023-02-22

【中文标题】使用 Socket.io 将客户端连接到服务器

【英文标题】：Connecting client to server using Socket.io

【发布时间】：2012-04-14 07:10:42

【问题描述】：

我对 node.js 比较陌生，它是插件，所以这可能是一个初学者问题。

我正在尝试在网络服务器上获取一个简单的 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

我整天都在这。有什么帮助吗？

【参考方案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 切换为适合您当前设置的任何设置。

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

【讨论】：

为了简化您可能需要对其他几个脚本的引用，可以使用<base href="http://localhost:8080/">。

【参考方案2】：

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

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

然后在视图/控制器中做：

var socket = io.connect()

这应该可以解决您的问题。

【讨论】：

我使用过 io.connect() 并且工作正常，但为什么我不需要指定地址？如果没有指定任何地址，它会自动连接到本地主机吗？

@MattiaSurricchio：如果您不提供地址，则假定它是窗口的位置（即提供 html 文件的位置），因此如果您连接到为您的页面提供服务的同一服务器你可以省略地址。文档：socket.io/docs/client-api#io-protocol