Nodejs 服务端使用socket.io编写，客户端也必须使用socket.io吗，可以直接使用浏览器提供的websocket对象吗？

Nodejs 服务端使用socket.io编写，客户端也必须使用socket.io吗，可以直接使用浏览器提供的websocket对象吗？

求解答，非常紧急。

8 回复

当然可以！当使用 Node.js 和 socket.io 在服务端进行 WebSocket 通信时，客户端并不一定非得使用 socket.io。客户端可以直接使用浏览器内置的 WebSocket 对象来与服务端进行通信。

示例代码

服务端代码（使用 socket.io）

首先，我们需要在服务端安装并配置 socket.io：

npm install socket.io

然后，在服务端创建一个简单的 WebSocket 服务器：

const io = require('socket.io')(3000, {
    cors: {
        origin: "*",
        methods: ["GET", "POST"]
    }
});

io.on('connection', (socket) => {
    console.log('A user connected');

    socket.on('message', (data) => {
        console.log(`Message received: ${data}`);
        // 广播消息给所有连接的客户端
        socket.broadcast.emit('message', data);
    });

    socket.on('disconnect', () => {
        console.log('User disconnected');
    });
});

客户端代码（直接使用 WebSocket 对象）

客户端可以直接使用浏览器的 WebSocket 对象来连接到服务端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Client</title>
</head>
<body>
    <h1>WebSocket Client</h1>
    <input type="text" id="messageInput" placeholder="Enter message here...">
    <button onclick="sendMessage()">Send Message</button>

    <script>
        const socket = new WebSocket('ws://localhost:3000');

        socket.onopen = function() {
            console.log("Connected to server");
        };

        socket.onmessage = function(event) {
            console.log(`Received from server: ${event.data}`);
        };

        function sendMessage() {
            const input = document.getElementById('messageInput');
            const message = input.value;
            socket.send(message);
            console.log(`Sent to server: ${message}`);
        }

        socket.onclose = function() {
            console.log("Disconnected from server");
        };
    </script>
</body>
</html>

解释

  • 服务端：使用 socket.io 创建了一个 WebSocket 服务器，并监听连接事件、消息事件和断开事件。
  • 客户端：直接使用浏览器的 WebSocket API 连接到服务端，并处理打开、关闭和接收到的消息。

这样，即使客户端不使用 socket.io，也可以通过 WebSocket 实现双向通信。


接口一样就行。

https://github.com/LearnBoost/socket.io-spec https://github.com/LearnBoost/socket.io-protocol

看看这两篇东西吧。

http://socket.io/ 这个官网。

看了这两篇东西，但还是不明白接口一样指什么？

ws 可以解决你的问题。 https://github.com/websockets/ws

浏览器 发送 GET /socket.io/?EIO=3&transport=polling&t=LZugHyU&b64=1 HTTP/1.1 然后服务器 返回 97:0{“sid”:“iQnJvIk_g0ra2-PuAAAD”,“upgrades”:[“websocket”],“pingInterval”:25000,“pingTimeout”:60000}

这些字段值是根据什么生成的？

不能，必须是服务端和客户端都是使用socket.io实现的才能。证据：https://socket.io/docs/#What-Socket-IO-is 有一句话： What Socket.IO is not Socket.IO is NOT a WebSocket implementation. Although Socket.IO indeed uses WebSocket as a transport when possible, it adds some metadata to each packet: the packet type, the namespace and the ack id when a message acknowledgement is needed. That is why a WebSocket client will not be able to successfully connect to a Socket.IO server, and a Socket.IO client will not be able to connect to a WebSocket server either. Please see the protocol specification here.

在 Node.js 中使用 socket.io 编写服务端时，客户端并不一定必须使用 socket.io。客户端可以直接使用浏览器内置的 WebSocket 对象来与服务端进行通信。然而，这需要手动处理一些 socket.io 的协议细节。

示例代码

首先，我们来看一个简单的 socket.io 服务端实现：

// server.js
const io = require('socket.io')(3000);

io.on('connection', (socket) => {
    console.log('A user connected');

    socket.on('message', (msg) => {
        console.log('Message received:', msg);
        socket.emit('response', 'Hello from server');
    });

    socket.on('disconnect', () => {
        console.log('User disconnected');
    });
});

接下来是客户端使用 WebSocket 对象的示例：

<!-- client.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket Client</title>
</head>
<body>
<script>
    const socket = new WebSocket('ws://localhost:3000/');

    socket.addEventListener('open', function (event) {
        console.log('Connected to server');
        socket.send(JSON.stringify({ type: 'message', data: 'Hello, Server!' }));
    });

    socket.addEventListener('message', function (event) {
        console.log('Message from server:', event.data);
        const response = JSON.parse(event.data);
        if (response.type === 'response') {
            console.log(response.data); // "Hello from server"
        }
    });

    socket.addEventListener('close', function (event) {
        console.log('Disconnected from server');
    });
</script>
</body>
</html>

解释

  1. 服务端使用 socket.io 监听连接，并定义了接收消息、断开连接的事件处理函数。
  2. 客户端使用 WebSocket 创建连接，并发送 JSON 格式的消息给服务器。当收到消息时，它解析并处理响应。
  3. 注意，为了兼容 socket.io 消息格式，我们需要自己处理 JSON 编码和解码。

虽然直接使用 WebSocket 可以避免 socket.io 客户端库的依赖，但这样做会失去 socket.io 提供的一些便利特性，例如自动重连、包序列化等。

回到顶部