Nodejs服务端写websocket是用的Buffer,在客户端怎么转成string

Nodejs服务端写websocket是用的Buffer,在客户端怎么转成string

console.里面打出来是 [object Blob] 是不是需要自己写一个类似 data.toString(‘ascii’) 这样的方法？

2 回复

当然可以！当使用 WebSocket 时，服务端通常会发送二进制数据（例如 Buffer 对象），而客户端需要将这些二进制数据转换为字符串。以下是如何在客户端进行这种转换的详细步骤和示例代码。

示例代码

首先，假设你已经建立了一个 WebSocket 连接，并且服务端发送了一些二进制数据。

// 创建 WebSocket 连接
const socket = new WebSocket('ws://yourserver.com');

// 监听消息事件
socket.addEventListener('message', function(event) {
    // 检查是否为二进制数据
    if (event.data instanceof Blob) {
        const reader = new FileReader();
        
        // 使用 FileReader 读取 Blob 数据
        reader.onload = function(e) {
            // 将读取到的 ArrayBuffer 转换为字符串
            const text = new TextDecoder().decode(e.target.result);
            console.log(text); // 输出转换后的字符串
        };
        
        // 读取 Blob 数据并将其转换为 ArrayBuffer
        reader.readAsArrayBuffer(event.data);
    } else if (event.data instanceof ArrayBuffer) {
        // 如果已经是 ArrayBuffer，则直接解码
        const text = new TextDecoder().decode(event.data);
        console.log(text); // 输出转换后的字符串
    }
});

解释

  1. 创建 WebSocket 连接：

    const socket = new WebSocket('ws://yourserver.com');

  2. 监听消息事件：

    socket.addEventListener('message', function(event) {
    ...
});

  3. 检查数据类型：

    • 如果服务端发送的是 Blob 类型的数据，我们需要使用 FileReader 来读取它。
    • 如果服务端发送的是 ArrayBuffer 类型的数据，则可以直接解码。

  4. 使用 FileReader 读取 Blob 数据：

    const reader = new FileReader();
reader.onload = function(e) {
    const text = new TextDecoder().decode(e.target.result);
    console.log(text);
};
reader.readAsArrayBuffer(event.data);

  5. 直接解码 ArrayBuffer 数据：

    const text = new TextDecoder().decode(event.data);
console.log(text);

通过这种方式，你可以将服务端发送的二进制数据正确地转换为字符串，并在客户端进行处理。希望这对你有所帮助！


当您在Node.js服务器端使用WebSocket发送数据时，通常会使用Buffer对象来处理二进制数据。当这些数据到达客户端（例如浏览器）时，它们需要被转换为字符串。

在浏览器端，您可以使用TextDecoder API将ArrayBuffer或Blob对象转换为字符串。以下是如何实现这一过程的示例代码：

示例代码

  1. 服务器端：发送Buffer

    const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
    const bufferData = Buffer.from('Hello, WebSocket!');
    ws.send(bufferData);
});

  2. 客户端：接收并转换数据

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

        socket.binaryType = 'arraybuffer'; // 设置socket的binaryType为arraybuffer以便于处理二进制数据

        socket.onmessage = function(event) {
            if (event.data instanceof ArrayBuffer) {
                const decoder = new TextDecoder('utf-8'); // 创建TextDecoder实例，指定编码格式为utf-8
                const message = decoder.decode(event.data); // 将ArrayBuffer转换为字符串
                console.log(message); // 输出：Hello, WebSocket!
            }
        };
    </script>
</body>
</html>

解释

  • 服务器端：使用Buffer.from()创建一个包含字符串的Buffer对象，并通过WebSocket发送。
  • 客户端：设置socket.binaryType为'arraybuffer'，以确保接收到的数据类型为ArrayBuffer。然后使用TextDecoder将ArrayBuffer解码为字符串。

这样，即使在浏览器控制台中看到的是[object Blob]，通过上述步骤，您可以正确地将数据转换为字符串。

回到顶部