解决 Socket.io 建立 ws 连接失败，ws.onclose 事件不触发-JavaScript中文网-JavaScript教程资源分享门户

在进行前端开发时，我们可能会遇到通过 Socket.io 建立 WebSocket 连接失败的问题，而且在建立连接之后，ws.onclose 事件也没有被触发。这个问题可能是由于多种原因引起的，但我们可以通过以下步骤来解决。

步骤 1：检查服务器端配置

首先要检查的是服务器端的配置，因为 WebSocket 是一个基于协议的通信方式，在服务器端必须正确配置相关参数，否则将无法建立连接。在配置时，需要注意以下几个重要参数：

transports: 这个参数要设为 ['websocket']，这样 WebSocket 连接才能正常工作；
pingInterval: 这个参数定义了服务器发出 ping 消息的间隔时间，默认是 25000，如果间隔时间过长，可能会导致连接失效；
pingTimeout: 这个参数定义了多久之后服务器认为连接已经失效，需要重新建立连接，默认是 5000。

如果以上参数配置正确，那么服务器就应该可以正常响应 WebSocket 请求了。

步骤 2：检查客户端代码

如果服务器端配置正常，那么问题可能出在客户端代码上。在客户端中，我们需要注意以下几个方面：

在使用 Socket.io 进行 WebSocket 通信时，首先要引入相关的库文件，例如：

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

确保文件路径是正确的，否则可能会导致连接失败。

在建立连接时，我们还需要指定连接的地址：

var socket = io.connect('http://localhost:3000');

确保连接的地址正确，端口号和主机名称也要配置正确。

如果仍然无法建立连接，我们还可以在客户端代码中设置一些参数，例如：

var socket = io.connect('http://localhost:3000', {
    reconnect: true,
    reconnectionDelay: 100,
    reconnectionAttempts: 10
});

这些参数可以让客户端在连接中断后重新尝试建立连接，直到成功为止。

步骤 3：查看网络连接

如果以上操作都不能解决问题，那么最后就需要检查网络连接了。如果网络中存在代理服务器，那么可能会阻止 WebSocket 的正常工作。此外，防火墙和安全软件等程序可能会阻止 WebSocket 连接，需要进行相应的配置。

实例代码

最后，我们给出一个完整的代码示例，包含了服务器端和客户端的代码片段。这个示例使用了 Express 和 Socket.io 提供的 API，可以帮助大家更好地理解 WebSocket 的工作原理：

服务器端代码

// www.javascriptcn.com code example
var express = require('express');
var app = express();

var server = require('http').Server(app);
var io = require('socket.io')(server, {
    pingInterval: 25000,
    pingTimeout: 5000,
    transports: ['websocket']
});

io.on('connection', function(socket) {
    console.log('a user connected');

    socket.on('disconnect', function() {
        console.log('user disconnected');
    });
});

server.listen(3000, function() {
    console.log('listening on *:3000');
});

客户端代码

// www.javascriptcn.com code example
<script src="/socket.io/socket.io.js"></script>
<script>
    var socket = io.connect('http://localhost:3000', {
        reconnect: true,
        reconnectionDelay: 100,
        reconnectionAttempts: 10
    });

    socket.on('connect', function() {
        console.log('connected to server');
    });

    socket.on('disconnect', function() {
        console.log('disconnected from server');
    });
</script>

通过以上步骤，我们可以解决 WebSocket 连接失败以及 ws.onclose 事件不触发的问题。希望大家可以根据自己的实际需求进行相应的代码调整，构建出更加稳定和高效的 WebSocket 通信应用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7db72a941bf7134e0e7e0

解决 Socket.io 建立 ws 连接失败，ws.onclose 事件不触发