深入探究node搭建socket服务器

0522Skylar2024-02-20 21:14

自从上篇中sokect实现了视频通话，但是是使用ws依赖库实现的服务端，所以最近再看ws源码，不看不知道，一看很惊讶。

接下来一点点记录一下，如何搭建一个简易的服务端socket，来实现上次的视频通讯。

搭建一个http服务

首先看一下ws依赖的调用

所以首选我们要创建一个服务器，然后监听端口号

这个不难，直接使用node自带的http依赖

js 复制代码 
const http = require('http');

class MyWebsocket extends EventEmitter {
  constructor(options) {
    super(options);

    const server = http.createServer();
    server.listen(options.port || 8080);
    
  }
}

module.exports = MyWebsocket;

这样就启动了一个端口号为8080的http服务了，然后这个端口可以自定义，所以初始化的时候，就传参进来就行。

然后我们继续发现，需要用on来监听事件，这要如何在node中实现呢？

on方法在这里遵循了Node.js EventEmitter模式，它允许我们绑定函数到特定的事件上，当该事件发生时，对应的函数会被执行。

什么意思呢？通熟易懂就是继承这个node自带的类EventEmitter

然后你要监听一个connection函数，在MyWebsocket中要怎么触发呢？

使用 emit 方法来触发你定义的事件，并传递任何你想要传递给监听器的数据。

js 复制代码 
const http = require('http');

class MyWebsocket extends EventEmitter {
  constructor(options) {
    super(options);

    const server = http.createServer();
    server.listen(options.port || 8080);
    this.emit('connection', 参数);
  }
}

module.exports = MyWebsocket;

如何监听客户端socket？

然后到了最重要的一步，我们最主要的功能就是监听socket，那怎么监听客户端来的socket连接？

看一下ws的websocket-server.js源码

我们刚刚不是建立了一个http服务吗？

监听 upgrade 事件

在 Node.js 中，HTTP 服务器可以监听 upgrade 事件来处理 WebSocket 连接或其他需要升级传输层协议的请求。upgrade 事件在客户端发起一个 HTTP 请求并要求升级到其他协议（如 WebSocket）时触发。

js 复制代码 
class MyWebsocket extends EventEmitter {
  constructor(options) {
    super();
    options = {
      ...options,
    }

    const server = http.createServer();
    server.listen(options.port || 8080);
    this.clients = new Set()
  

    server.on('upgrade', (req, socket) => {
      this.socket = socket; // 存储当前的socket，方便后端调用

      ...

    });
  }

}

socket升级协议

然后需要有socket升级协议，为什么要有升级协议呢？

WebSocket 升级协议（WebSocket Upgrade Protocol）在 Node.js 中是必要的，因为它允许现有的 HTTP 或 HTTPS 服务器与客户端建立持久的、双向的通信连接，而这种连接在技术上被称为 WebSocket 连接。

那什么是socket升级协议呢？

  1. 客户端请求：客户端发起一个 HTTP 请求，请求头部包含 Upgrade: websocket 和 Connection: Upgrade，以及可能的 Sec-WebSocket-Key 和其他 WebSocket 相关的头部信息。
  2. 服务器响应：服务器接收到请求后，如果同意升级，会在响应中包含 Upgrade: websocket 和 Connection: Upgrade 头部，以及一个 Sec-WebSocket-Accept 头部，这个头部是服务器对客户端 Sec-WebSocket-Key 的回应。
  3. 连接升级：一旦客户端和服务器都确认了升级，它们就会关闭 HTTP 连接，同时建立一个新的 WebSocket 连接。这个连接允许双方进行二进制或文本数据的双向通信。

其实就是根据客户端socket连接发过来的请求头，返回一个请求头给客户端来建立连接

看一下ws源码的处理

其实就说读取请求头中的sec-websocket-key字段，然后加上一个固定的字符串，经过 sha1 加密之后，转成 base64 的结果，就是digest

加密使用node中自带的crypto依赖

js 复制代码 
const crypto = require('crypto');

// 也就是用客户端传过来的 key，加上一个固定的字符串，经过 sha1 加密之后，转成 base64 的结果
function hashKey(key) {
  const sha1 = crypto.createHash('sha1');
  sha1.update(key + '258EAFA5-E914-47DA-95CA-C5AB0DC85B11');
  return sha1.digest('base64');
}

这个固定的字符串直接拿ws源码中的

然后就是升级协议的写入

js 复制代码 
const {
  EventEmitter
} = require('events');
const http = require('http');
const crypto = require('crypto');

const GUID = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'
// 也就是用客户端传过来的 key，加上一个固定的字符串，经过 sha1 加密之后，转成 base64 的结果
function hashKey(key) {
  const sha1 = crypto.createHash('sha1');
  sha1.update(key + GUID);
  return sha1.digest('base64');
}

class MyWebsocket extends EventEmitter {
  constructor(options) {
    super(options);

    const server = http.createServer();
    server.listen(options.port || 8080);

    server.on('upgrade', (req, socket) => {
      this.socket = socket;
      // socket.setKeepAlive(true);

      // websocket 升级协议
      const resHeaders = [
        'HTTP/1.1 101 Switching Protocols',
        'Upgrade: websocket',
        'Connection: Upgrade',
        'Sec-WebSocket-Accept: ' + hashKey(req.headers['sec-websocket-key']),
        '',
        ''
      ].join('\r\n');
      socket.write(resHeaders);

    });
  }

}

module.exports = MyWebsocket;

socket监听传输数据

接下来就说socket监听传输数据和socket关闭

js 复制代码 
socket.on('data', (data) => {
  console.log(data);
});
socket.on('close', (error) => {
  console.error('close', error)
});

然后我们一起看看效果吧

客户端发送的socket数据是

然后看请求头Sec-WebSocket-Accept也对应的上

处理socket传输数据

可以在node中拿到的数据是Buffer的二进制数据，首先需要处理的是WebSocket 协议中的数据帧。这里逻辑就有点复杂了。

协议中的数据帧结构是什么样子的？

数据帧的结构包括头部（Header）和负载（Payload）两部分。以下是数据帧的基本结构：

  1. 控制位（Control Bits）：
    • FIN（1 bit）：表示这是消息的最后一个片段。如果为1，表示这是消息的结束；如果为0，表示还有后续片段。
    • RSV1、RSV2、RSV3（各1 bit）：保留位，用于未来的扩展，目前必须设置为0。
    • Opcode（4 bits）：操作码，定义了帧的类型。例如，0x1 表示文本帧，0x2 表示二进制帧，0x8 表示关闭连接，0x9 表示 Ping 帧，0xA 表示 Pong 帧等。
    • Mask（1 bit）：掩码位，指示负载数据是否被掩码。客户端发送给服务器的帧必须设置为1，表示数据被掩码；服务器发送给客户端的帧通常设置为0，表示数据未被掩码。
  1. Payload Length（7、7+16、7+64 bits）：
    • 7位长度：如果值为0-125，表示负载数据的长度（以字节为单位）。
    • 7+16位长度：如果值为126，接下来的2个字节（16位）表示负载数据的长度。
    • 7+64位长度：如果值为127，接下来的8个字节（64位）表示负载数据的长度。
  1. Masking-Key（0或4 bytes）：
    • 当掩码位（Mask）为1时，存在4字节的掩码密钥（Masking-Key）。这个密钥用于对负载数据进行掩码处理，以防止中间代理服务器缓存污染。
  1. Payload Data（负载数据）：
    • 包含实际要传输的数据。对于文本帧，这是UTF-8编码的字符串；对于二进制帧，这是任意二进制数据。

从上面我们知道，需要的数据是负载数据，但是数据如果带有掩码，是需要解密的

  1. 解析帧头：
    • 从 bufferData 的第一个字节（byte1）中读取操作码（opcode），这是一个4位的值，用于指示帧的类型（如文本、二进制等）。
    • 从第二个字节（byte2）中读取掩码位（MASK），这是一个1位的值，指示是否使用了掩码。
  1. 计算有效载荷长度：
    • 如果 byte2 的最高位（第7位）是1，表示有效载荷长度为126，需要从 bufferData 的第3个字节和第4个字节（bufferData.readUInt16BE(2)）读取有效载荷的实际长度。
    • 如果 byte2 的最高位是0，但有效载荷长度为127，表示有效载荷长度为64位，需要从 bufferData 的第3个字节到第10个字节（bufferData.readBigUInt64BE(2)）读取有效载荷的实际长度。
  1. 处理掩码：
    • 如果使用了掩码（MASK 为真），则从 bufferData 中提取掩码密钥（mask key），这是一个4字节的值。
    • 使用掩码密钥对有效载荷数据进行解密（通过 handleMask 函数），以获取实际的数据（realData）。
  1. 处理有效载荷：
    • 最后，函数调用 handleRealData 方法，传入操作码和解密后的实际数据，进行进一步的处理。
js 复制代码 
function handleMask(maskBytes, data) {
  const payload = Buffer.alloc(data.length);
  for (let i = 0; i < data.length; i++) {
    payload[i] = maskBytes[i % 4] ^ data[i];
  }
  return payload;
}
const OPCODES = {
  CONTINUE: 0,
  TEXT: 1,
  BINARY: 2,
  CLOSE: 8,
  PING: 9,
  PONG: 10,
};


class MyWebsocket extends EventEmitter {
  constructor(options) {
    ...
  }
// 处理 WebSocket 协议中的数据帧
  processData(bufferData) {
    const byte1 = bufferData.readUInt8(0); // 第一个字节（byte1）中读取操作码（opcode），这是一个4位的值，用于指示帧的类型（如文本、二进制等）。
    let opcode = byte1 & 0x0f; 
    
    const byte2 = bufferData.readUInt8(1); // 从第二个字节（byte2）中读取掩码位（MASK），这是一个1位的值，指示是否使用了掩码。
    const str2 = byte2.toString(2);
    const MASK = str2[0];
    console.log(opcode, 'opcode')
    console.log(MASK, 'mask')

    let curByteIndex = 2;
    
    let payloadLength = parseInt(str2.substring(1), 2);
    if (payloadLength === 126) {
      payloadLength = bufferData.readUInt16BE(2);
      curByteIndex += 2;
    } else if (payloadLength === 127) {
      payloadLength = bufferData.readBigUInt64BE(2);
      curByteIndex += 8;
    }
    console.log(payloadLength, 'payloadLength')
    let realData = null;
    
    if (MASK) {
      const maskKey = bufferData.slice(curByteIndex, curByteIndex + 4); // 掩码密钥
      curByteIndex += 4;
      const payloadData = bufferData.slice(curByteIndex, curByteIndex + payloadLength);
      realData = handleMask(maskKey, payloadData); // 使用掩码密钥对有效载荷数据进行解密，以获取实际的数据（realData）。
    } 
    console.log(realData, 'realData')
    this.handleRealData(opcode, realData); // 处理有效载荷
  }
handleRealData(opcode, realDataBuffer) {
    switch (opcode) {
      case OPCODES.TEXT: // 文本
        this.emit('data', realDataBuffer);
        break;
      case OPCODES.BINARY: // 二进制
        this.emit('data', realDataBuffer);
        break;
      default:
        this.emit('close');
        break;
    }
  }

  handleRealData(opcode, realDataBuffer) {
    switch (opcode) {
      case OPCODES.TEXT: // 文本
        this.emit('data', realDataBuffer);
        break;
      case OPCODES.BINARY: // 二进制
        this.emit('data', realDataBuffer);
        break;
      default:
        this.emit('close');
        break;
    }
  }
}

然后调用main.js

js 复制代码 
const MyWebSocket = require('./ws.js');

const ws = new MyWebSocket({ port: 8000 });
// websocket需要一个服务器，如果两个客户端需要通讯，需要用服务器转发\


ws.on('data', (data) => {
  console.log('receive data:' + data); // 接受消息
});

可以看到，存在掩码，解密之前数据是bufferData，解密之后的数据是realData

这样就成功拿到了客户端传过来的数据了，可以看到客户端传过来的是文本，使用了掩码，效载荷长度为9位，这里的9其实就说字符串{"A":111}的长度。

服务端发消息给客户端

服务端能接收到消息了，然后就是将消息再给客户端了，所以需要定义一个函数，来发送数据

js 复制代码 
class MyWebsocket extends EventEmitter {
  constructor(options) {
    ...
  }
  ...
  send(data) {
    let opcode;
    let buffer;
    if (Buffer.isBuffer(data)) {
      opcode = OPCODES.BINARY;
      buffer = data;
    } else if (typeof data === 'string') {
      opcode = OPCODES.TEXT;
      buffer = Buffer.from(data, 'utf8');
    } else {
      console.error('暂不支持发送的数据类型')
    }
    this.doSend(opcode, buffer);
  }

  doSend(opcode, bufferDatafer) {
    this.socket.write(encodeMessage(opcode, bufferDatafer));
  }
}

由于我们上面获取传输数据的时候，知道socket数据需要支持WebSocket 协议中的数据帧的帧结构

因为根据 WebSocket 协议，只有客户端发送给服务器的帧需要掩码。服务器发送给客户端的帧通常不需要掩码。

js 复制代码 
function encodeMessage(opcode, payload) {
  let bufferData = Buffer.alloc(payload.length + 2 + 0);

  let byte1 = parseInt('10000000', 2) | opcode; // parseInt(130, 2)=1 ; 设置 FIN 为 1
  let byte2 = payload.length;

  bufferData.writeUInt8(byte1, 0); // 
  bufferData.writeUInt8(byte2, 1); // 负载的长度

  payload.copy(bufferData, 2);

  return bufferData;
}
  1. 创建缓冲区：
    • 使用 Buffer.alloc 方法创建一个足够大的 Buffer 对象，以容纳操作码、有效载荷长度和实际的有效载荷数据。这里假设 payload.length < 126，所以有效载荷长度只需要1个字节来表示。
  1. 设置操作码：
    • byte1 是第一个字节，它包含了操作码和 FIN（Finish）标志。这里假设 FIN 标志为 1（即消息结束），操作码通过 opcode 参数传入。操作码的值决定了消息的类型，例如文本（0x1）或二进制（0x2）。
  1. 设置有效载荷长度：
    • byte2 是第二个字节，它包含了有效载荷的长度。由于有效载荷长度小于126，所以只需要1个字节来表示。
  1. 写入操作码和有效载荷长度：
    • 使用 writeUInt8 方法将 byte1 和 byte2 分别写入 bufferData 的第0位和第1位。
  1. 复制有效载荷数据：
    • 使用 copy 方法将 payload 数据复制到 bufferData 的第2位及之后的位置。
js 复制代码 
const MyWebSocket = require('./ws.js');

const ws = new MyWebSocket({ port: 8000 });
// websocket需要一个服务器，如果两个客户端需要通讯，需要用服务器转发\


ws.on('data', (data) => {
  console.log('receive data:' + data); // 接受消息
  ws.send(data); // 自己给自己发送消息
});

客户端接收到的数据

js 复制代码 
// 创建WebSocket连接
const socketA = new WebSocket('ws://localhost:8000');

const handleBlobToText = (blob) => {
  let reader = new FileReader()
  reader.readAsText(blob, 'utf-8') // 接收到的是blob数据，先转成文本
  reader.onload = async function () {
    console.log(reader.result)
  }
}
// A接收B的消息
socketA.onmessage = function (event) {
  console.log('A received:', event.data);
  handleBlobToText(event.data)
};

socket传输大量数据

然后直接将视频的数据，传输给服务端，然后服务端就挂了😂

可以看到，node端是收到了客户端的数据

报错的原因是超出了范围，原因就是我们发送消息给客户端的处理这里出现了问题，也就是encodeMessage函数。

我们往前看看，到处理socket传输数据中，再仔细看看数据帧结构，这里有关于负载长度的问题

我们知道，我们需要处理的负载，就是我们需要传输的数据，然后数据量太大，是要区分来处理数据的。

很明显，上面的encodeMessage只适用于处理0-125的负载长度，而发送视频的数据，我们可以看看长度为多少

找到问题了，需要解决一下，接下来改写一下encodeMessage函数

你需要考虑 WebSocket 的最大帧大小限制。WebSocket 协议定义了三种帧类型来表示数据的长度：

  1. 单字节帧：用于长度小于 126 的数据。
  2. 双字节帧：用于长度在 126 到 65535 之间的数据。
  3. 八字节帧：用于长度大于 65535 的数据。
js 复制代码 
function encodeMessagePerf(options, data) {
  let offset = 2;
  let dataLength = data.length;

  let payloadLength = dataLength;
  // WebSocket 的最大帧大小限制
  // 1. 单字节帧：用于长度小于 126 的数据。
  // 2. 双字节帧：用于长度在 126 到 65535 之间的数据。
  // 3. 八字节帧：用于长度大于 65535 的数据。

  if (dataLength >= 65536) {
    offset += 8;
    payloadLength = 127;
  } else if (dataLength > 125) {
    offset += 2;
    payloadLength = 126;
  }

  const target = Buffer.allocUnsafe(offset);
  // 操作码 0x1表示文本帧；0x2表示二进制帧；0x8表示关闭连接；0x9表示ping帧；0xA表示pong帧。
  target[0] = options | 0x80; // 设置FIN

  target[1] = payloadLength; // 负载长度

  if (payloadLength === 126) {
    target.writeUInt16BE(dataLength, 2);
  } else if (payloadLength === 127) {
    target[2] = target[3] = 0;
    target.writeUIntBE(dataLength, 4, 6);
  }
  // 根据 WebSocket 协议，只有客户端发送给服务器的帧需要掩码。服务器发送给客户端的帧通常不需要掩码
  return [target, data];
}

writeUInt16BE、writeUIntBE 和 writeUInt8 是 Node.js 中 Buffer 类的三个方法，它们的主要区别在于它们写入的值的大小和字节序。

  1. writeUInt16BE：
    • 这个方法用于将一个无符号的16位整数（即0到65535之间的整数）以大端字节序（Big Endian）写入到 Buffer 对象中。大端字节序意味着高位字节在前，低位字节在后。
    • 例如，如果你要写入的值是 0xABCD，使用 writeUInt16BE 方法后，Buffer 中的数据将是 0xAB 后跟 0xCD。
    • 使用这个方法时，你需要指定一个 offset 参数，表示从 Buffer 的哪个位置开始写入。如果 offset 超出了 Buffer 的长度，或者提供的值不是有效的无符号16位整数，行为是未定义的。
  1. writeUInt8：
    • 这个方法用于将一个无符号的8位整数（即0到255之间的整数）写入到 Buffer 对象中。这个方法不涉及字节序，因为它只处理一个字节。
    • 使用 writeUInt8 方法时，你同样需要指定一个 offset 参数。如果 offset 超出了 Buffer 的长度，或者提供的值不是有效的无符号8位整数，行为同样是未定义的。
  1. writeUIntBE：

用于将无符号整数以大端序（Big Endian）格式写入到 Buffer 对象中，它可以处理的整数大小可以达到 48 位（6 个字节）。这个方法允许你指定要写入的字节长度（byteLength），这可以是 1、2、3、4、5 或 6 字节。如果 byteLength 大于 2，它将写入一个大于 16 位的整数。

总结来说，writeUInt16BE 用于写入16位的整数，并且遵循大端字节序，而 writeUInt8 用于写入8位的整数，不涉及字节序。两者都需要一个 offset 参数来指定写入位置。在实际应用中，选择哪个方法取决于你需要写入的数据类型和字节序要求。如果你需要写入更大或更小的整数，或者需要处理可变长度的整数，那么 writeUIntBE 是更合适的选择。

Buffer.allocUnsafe 和 Buffer.alloc 是 Node.js 中用于创建 Buffer 实例的两种方法，它们的主要区别在于内存的初始化方式和安全性。

  1. Buffer.allocUnsafe(size)：
    • Buffer.allocUnsafe 创建一个指定大小的 Buffer 实例，但它不会初始化分配的内存。这意味着，新创建的 Buffer 实例可能包含之前内存中的数据，这些数据可能是敏感的。因此，这个方法被称为"不安全"（unsafe）。
    • 使用 Buffer.allocUnsafe 创建的 Buffer 实例通常比 Buffer.alloc 创建的要快，因为它避免了初始化内存的步骤。
    • 如果你需要确保 Buffer 中的数据是干净的，你应该在使用 Buffer.allocUnsafe 创建实例后，使用 Buffer.fill() 方法来填充整个 Buffer，或者在写入数据之前完全覆盖它。
  1. Buffer.alloc(size[, fill[, encoding]])：
    • Buffer.alloc 创建一个指定大小的 Buffer 实例，并且会用指定的值（默认为0）初始化整个 Buffer。这确保了新创建的 Buffer 实例不会包含任何旧数据。
    • Buffer.alloc 方法比 Buffer.allocUnsafe 慢，因为它需要额外的时间来初始化内存。
    • 如果你不需要处理可能包含敏感数据的旧内存，或者你打算立即用新数据覆盖整个 Buffer，那么使用 Buffer.alloc 是一个更安全的选择。

在实际应用中，如果你需要处理敏感数据或者需要确保 Buffer 的内容是可预测的，建议使用 Buffer.alloc。如果你对性能有更高的要求，并且能够确保在读取或使用 Buffer 之前清除或覆盖其内容，那么可以考虑使用Buffer.allocUnsafe。

在ws源码中,使用的是Buffer.allocUnsafe,可能是为了性能优化和内存管理。在 Node.js 中，Buffer.allocUnsafe 可能会使用一个内部的内存池来分配 Buffer 实例。这意味着，如果创建的 Buffer 大小小于或等于 Buffer.poolSize 的一半，那么这些 Buffer 实例可能会共享内存池中的内存。这有助于减少内存分配和垃圾回收的开销。

当然在ws源码中，处理数据帧的函数是frame

能看到，除了负载数据之外，ws中还有很多其他参数，比如说处理掩码，比如是否设置FIN，指定是否可以修改' data '等等。但是正常使用就是上面的encodeMessagePerf流程了。

接下来就完美解决了数据大量的问题。

如何区分不同客户端？

能看到目前只是一个客户端，那客户端一多，想要控制A客户端，发消息给B客户端，B客户端发消息给A客户端，那这样就要区分不同的客户端了。

那如何区分不同的客户端呢？

JavaScript中有一个数据结构，能够将不同的数据集区分开来，就是Set啦，看一下ws的源码

客户端存储在一个Set对象中，连接的时候，就添加到clients中，断开连接了，就delete掉，这样就能清楚有几个客户端了。

看完之后，就动手撸一下试试

js 复制代码 
class MyWebsocket extends EventEmitter {
  constructor(options) {
    super();
    options = {
      ...options,
    }

    const server = http.createServer();
    server.listen(options.port || 8080);
    this.clients = new Set()
  
    server.on('upgrade', (req, socket) => {
      this.socket = socket;
      
      socket.setKeepAlive(true);
      // websocket 升级协议
      const resHeaders = [
        'HTTP/1.1 101 Switching Protocols',
        'Upgrade: websocket',
        'Connection: Upgrade',
        'Sec-WebSocket-Accept: ' + hashKey(req.headers['sec-websocket-key']),
        '',
        '',
      ].join('\r\n');
      socket.write(resHeaders);
      socket.on('data', (data) => {
        this.processData(data);
      });
      socket.on('close', () => {
        this.clients.delete(socket)
        console.log('close')
      })
      socket.on('end', () => {
        this.clients.delete(socket)
        console.log('end')
      })
      socket.on('error', (err) => {
        console.log('error', err)
      })
      

      if (this.clients) {
        this.clients.add(socket)
      }
      // debugger
      console.log(this.clients.size, 'clients.size')
    });
  }
}

这样子就搭建好了，看一下客户端的数量是否正确

能看到数量是正常的，然后就是将A客户端的数据发送给B客户端了

js 复制代码 
ws.on('data', function connection({realDataBuffer, clients}) {
  // 需要在data这个回调中拿到clients数据
  console.log('Client connected', realDataBuffer.toString('utf8'));
  // ws.send(data + ' ' + Date.now()); // 发送消息
  // 将消息发送给所有客户端
  if (clients) {
    clients.forEach(function each(client) {
      if (client !== ws.socket) {
        ws.send(realDataBuffer); // 客户端接受的是blob格式数据
      }
    });
  }
});

这里，需要在data的回调中拿到clients数据，所以需要传递数据出来。由于clients在constructor中定义的，所以可以直接在emit回调的时候，将clients传递出来。

这样，外面就能访问到clients了，然后我们直接这样传递数据，但是你以为这就完了吗？那你就太天真了🤣😂

找一下问题，我做了一个简单的demo，就是A页面发消息给B页面，B页面收到了，然后B页面发消息给A页面，A页面并没有收到，然后node端是都能看到AB各自发送的消息的。

其实就是node端发送消息出现了问题，仔细看一下下面的代码

js 复制代码 
ws.on('data', function connection({realDataBuffer, clients}) {
  console.log('Client connected', realDataBuffer.toString('utf8'));
  // ws.send(data + ' ' + Date.now()); // 发送消息
  // 将消息发送给所有客户端
  if (clients) {
    clients.forEach(function each(client) {
      if (client !== ws.socket) { // ws.socket是最后连接的客户端，不是当前要发消息的客户端
        ws.send(realDataBuffer); // 客户端接受的是blob格式数据
      }
    });
  }
});

原因就是ws.socket是最后连接的客户端，不是当前发生消息的客户端。

所以导致，我首先刷新的A页面，再刷新了B页面，ws.socket出现了覆盖，此时ws.socket就是B客户端了。

所以后面B页面发送消息给A页面，A页面没有收到，而是又再次将消息发送给了B页面。

如何将A的数据，广发给其他客户端？

如何解决呢？我们仔细看一下ws是如何将一个客户端的数据，发送给除了当前以外的其他客户端。

可以看到这里是先有connection，然后才能触发message回调

而且在connection回调中，拿到了ws对象，这个对象的message回调才会监听到客户端发送过来的消息

也就是说我们上面的data回调需要再包一层，然后判断是通过ws这个对象来判断是不是当前需要发送消息的客户端的。

这样就觉得ws其实就是一个客户端对象，是clients中的一个对象，然后ws的message回调，就是接收到当前客户端的消息，然后只要将不是当前ws的客户端发送消息，就可以了。

所以这里区分成服务端的socket管理和单个客户端的socket管理，需要在再新增一个ws对象，也需要继承自EventEmitter，因为它也有on事件

js 复制代码 
class SingleData extends EventEmitter  {
  constructor(socket) {
    super();
    this.socket = socket

    this.socket.on('data', (data) => { // 传输数据
      this.processData(data);
    });
    this.socket.on('close', () => {
      this.emit('close')
    })
    this.socket.on('end', () => {
      this.emit('end')
      console.log('end')
    })
    this.socket.on('error', (err) => {
      this.emit('error', err)
    })
    
  }
  handleRealData(opcode, realDataBuffer) {
    switch (opcode) {
      case OPCODES.TEXT: // 文本
        this.emit('message', realDataBuffer);
        break;
      case OPCODES.BINARY: // 二进制
        this.emit('message', realDataBuffer);
        break;
      default:
        this.emit('close');
        break;
    }
  }

  processData(bufferData) {
    const byte1 = bufferData.readUInt8(0);
    let opcode = byte1 & 0x0f; 
    
    const byte2 = bufferData.readUInt8(1);
    const str2 = byte2.toString(2);
    const MASK = str2[0];

    let curByteIndex = 2;
    
    let payloadLength = parseInt(str2.substring(1), 2);
    if (payloadLength === 126) {
      payloadLength = bufferData.readUInt16BE(2);
      curByteIndex += 2;
    } else if (payloadLength === 127) {
      payloadLength = bufferData.readBigUInt64BE(2);
      curByteIndex += 8;
    }

    let realData = null;
    
    if (MASK) {
      const maskKey = bufferData.slice(curByteIndex, curByteIndex + 4);  
      curByteIndex += 4;
      const payloadData = bufferData.slice(curByteIndex, curByteIndex + payloadLength);
      realData = handleMask(maskKey, payloadData);
    } 
    
    this.handleRealData(opcode, realData);
  }

  send(data) {
    let opcode;
    let buffer;
    if (Buffer.isBuffer(data)) {
      opcode = OPCODES.BINARY;
      buffer = data;
    } else if (typeof data === 'string') {
      opcode = OPCODES.TEXT;
      buffer = Buffer.from(data, 'utf8');
    } else {
      console.log(data)
      console.error('暂不支持发送的数据类型')
    }
    this.doSend(opcode, buffer);
  }

  doSend(opcode, bufferDatafer) {
    // 大量数据
    let list = frame(bufferDatafer)

    if (list.length === 2) {
      this.socket.cork();
      this.socket.write(list[0]);
      this.socket.write(list[1]);
      this.socket.uncork();
    } else {
      this.socket.write(list[0]);
    }
  }
}

module.exports = SingleData;

由于这是单个的客户端socket数据，所以将接受和发送socket数据帧的处理，放到这个对象来。

然后就可以将服务端的socket对象，简化成下面这样

js 复制代码 
const { EventEmitter } = require('events');
const http = require('http');
const crypto = require('crypto');
const SingleData = require('./clientSocket.js')

class MyWebsocket extends EventEmitter {
  constructor(options) {
    super();
    options = {
      ...options,
    }

    const server = http.createServer();
    server.listen(options.port || 8080);
    this.clients = new Set()
  

    server.on('upgrade', (req, socket) => {
      this.socket = socket;
      
      socket.setKeepAlive(true);
      // websocket 升级协议
      const resHeaders = [
        'HTTP/1.1 101 Switching Protocols',
        'Upgrade: websocket',
        'Connection: Upgrade',
        'Sec-WebSocket-Accept: ' + hashKey(req.headers['sec-websocket-key']),
        '',
        '',
      ].join('\r\n');
      socket.write(resHeaders);
      const ws = new SingleData(socket);
      
      ws.on('close', () => {
        this.clients.delete(ws)
        console.log('close')
      })
      ws.on('end', () => {
        this.clients.delete(ws)
        console.log('end')
      })
      ws.on('error', (err) => {
        console.log('error', err)
      })
      

      if (this.clients) {
        this.clients.add(ws)
      }
      this.emit('connection', ws);

    });
  }

}

module.exports = MyWebsocket;

再看看效果，这样就实现了一个简易版的ws源码啦~

当然ws源码中的处理，比上面这个简易版复杂很多，发送消息有Sender类，接受消息有Receiver类，实现双向通讯，而且数据处理上，也更加谨慎。

如果你想深入研究源码，可以看看这篇文章：juejin.cn/post/684490...

相关推荐
燃先生._.29 分钟前
Day-03 Vue（生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤）
前端·javascript·vue.js
超爱吃士力架1 小时前
邀请逻辑
java·linux·后端
高山我梦口香糖1 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235241 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240252 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar2 小时前
纯前端实现更新检测
开发语言·前端·javascript
AskHarries3 小时前
Spring Cloud OpenFeign快速入门demo
spring boot·后端
寻找沙漠的人3 小时前
前端知识补充—CSS
前端·css
GISer_Jing3 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程