Node.js使用ws包接收WebSocket的ArrayBuffer数据解码出现乱码如何解决

乱码原因 #

• 收到的二进制数据不是UTF-8编码的纯文本：如果服务端发送的是protobuf、MessagePack等序列化后的二进制数据，或是经过gzip/deflate压缩的内容，直接用TextDecoder解码必然出现乱码
• 编码格式不匹配：如果文本内容用了GBK/GB2312等非UTF-8编码，默认用UTF-8解码的TextDecoder会输出乱码
• ws包数据类型默认配置问题：Node.js环境下ws库默认接收的二进制数据是Buffer类型，而非ArrayBuffer，直接传入TextDecoder虽然兼容但如果数据本身有特殊格式也可能出现异常

解决步骤 #

1. 先放开注释的日志，确认接收数据的类型和原始格式：

client.onmessage = (event) => {
  console.log("数据类型：", typeof event.data, Buffer.isBuffer(event.data))
  console.log("原始数据：", event.data)
}

2. 如果确认是文本但编码非UTF-8，Node.js环境可使用iconv-lite库解码：

const iconv = require('iconv-lite')
// 示例为GBK编码解码，可根据实际编码替换
const ab2str = (buf) => {
  return iconv.decode(Buffer.from(buf), 'gbk')
}

3. 如果确认数据是经过序列化/压缩的二进制内容，先对应做反序列化、解压操作，再处理文本内容
4. 如果需要明确接收ArrayBuffer类型，可提前配置ws实例的binaryType：

client.binaryType = 'arraybuffer'

内容的提问来源于stack exchange，提问作者pubir