深入探究node搭建socket服务器

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

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

搭建一个http服务

首先看一下ws依赖的调用

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

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

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 方法来触发你定义的事件，并传递任何你想要传递给监听器的数据。

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）时触发。


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依赖

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源码中的

然后就是升级协议的写入

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关闭

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 方法，传入操作码和解密后的实际数据，进行进一步的处理。

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

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}的长度。

服务端发消息给客户端

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


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 协议，只有客户端发送给服务器的帧需要掩码。服务器发送给客户端的帧通常不需要掩码。

function encodeMessage(opcode, payload) {let bufferData = Buffer.alloc(payload.length + 2 + 0);let byte1 = parseInt('10000000', 2) | opcode; // parseInt(130, 2)=1 ; 设置 FIN 为 1let 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位及之后的位置。

const MyWebSocket = require('./ws.js');const ws = new MyWebSocket({ port: 8000 });
// websocket需要一个服务器，如果两个客户端需要通讯，需要用服务器转发\ws.on('data', (data) => {console.log('receive data:' + data); // 接受消息ws.send(data); // 自己给自己发送消息
});

客户端接收到的数据

// 创建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 的数据。
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; // 设置FINtarget[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掉，这样就能清楚有几个客户端了。

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

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)}// debuggerconsole.log(this.clients.size, 'clients.size')});}
}

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

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

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端发送消息出现了问题，仔细看一下下面的代码

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事件

class SingleData extends EventEmitter  {constructor(socket) {super();this.socket = socketthis.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对象，简化成下面这样

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类，实现双向通讯，而且数据处理上，也更加谨慎。

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/263078.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java面试笔记

Java面试笔记

Java面试笔记 Java面试笔记-网络模块 TCP的三次握手 TCP的简介&#xff1a; 面向连接的、可靠的、基于字节流的传输层通信协议 将应用层的数据流分割成报文段并发送给目标节点的TCP层 数据包都有序号&#xff0c;对方收到则发送ACK确认&#xff0c;未收到则重传 使用校验和来…
阅读更多...
OpenCV 4基础篇| OpenCV图像基本操作

OpenCV 4基础篇| OpenCV图像基本操作

目录 1. 图像读取1.1 cv2.imread() 不能读取中文路径和中文名称1.2 cv2.imdecode() 可以读取中文路径和中文名称 2. 图像的显示2.1 openCV显示图像 cv2.imshow()2.2 matplotlib显示图像 plt.imshow() 3. 图像的保存 cv2.imwrite()4. 图像的复制4.1 img.copy()4.2 np.copy()4.3 …
阅读更多...
模板（类模板）---C++

模板（类模板）---C++

模板目录 2.类模板2.1 类模板语法2.2 类模板与函数模板区别2.3 类模板中成员函数创建时机2.4 类模板对象做函数参数2.5 类模板与继承2.6 类模板成员函数类外实现2.7 类模板分文件编写2.8 类模板与友元2.9 类模板案例 2.类模板 2.1 类模板语法 类模板作用&#xff1a; 建立一个…
阅读更多...
Stable Diffusion——文生图界面参数讲解与提示词使用技巧

Stable Diffusion——文生图界面参数讲解与提示词使用技巧

Clip终止层数 什么是Clip CLIP&#xff08;Contrastive Language-Image Pretraining&#xff09;是由OpenAI于2021年开发的一种语言图像对比预训练模型。其独特之处在于&#xff0c;CLIP模型中的图像和文本嵌入共享相同的潜在特征空间&#xff0c;这使得模型能够直接在图像和文…
阅读更多...
C语言：指针（一）

C语言：指针（一）

目录 1.内存和地址2. 指针变量和地址2.1 取地址操作符&#xff08;&&#xff09;2.2 指针变量和解引用操作符&#xff08;*&#xff09;2.2.1 指针变量2.2.2 解引用操作符&#xff08;*&#xff09; 2.3 指针变量的大小 3.指针变量的类型和意义3.1 指针的解引用3.2 指针 -指…
阅读更多...
二手货wordpress企业网站主题模板

二手货wordpress企业网站主题模板

二手车wordpress主题模板 简洁的二手车wordpress主题模板&#xff0c;适合做二手车业务的公司官方网站使用。 https://www.jianzhanpress.com/?p3473 wordpress二手物资回收主题 绿色wordpress二手物资回收主题&#xff0c;用于二手物资回收公司WP建站使用。 https://www.…
阅读更多...
pikachu靶场-XSS

pikachu靶场-XSS

XSS&#xff1a; XSS&#xff08;跨站脚本&#xff09;概述 Cross-Site Scripting 简称为“CSS”&#xff0c;为避免与前端叠成样式表的缩写"CSS"冲突&#xff0c;故又称XSS。一般XSS可以分为如下几种常见类型&#xff1a; 1.反射性XSS; 2.存储型XSS; 3.DOM型XSS; …
阅读更多...
[Angular 基础] - 自定义指令，深入学习 directive

[Angular 基础] - 自定义指令，深入学习 directive

[Angular 基础] - 自定义指令&#xff0c;深入学习 directive 这篇笔记的前置笔记为 [Angular 基础] - 指令(directives)&#xff0c;对 Angular 的 directives 不是很了解的可以先过一下这篇笔记 后面也会拓展一下项目&#xff0c;所以感兴趣的也可以补一下文后对应的项目&a…
阅读更多...
VSCODE include错误 找不到 stdio.h

VSCODE include错误 找不到 stdio.h

解决办法&#xff1a; Ctrl Shift P 打开命令面板&#xff0c; 键入 “Select Intellisense Configuration”&#xff08;下图是因为我在写文章之前已经用过这个命令&#xff0c;所以这个历史记录出现在了第一行&#xff09; 再选择“Use gcc.exe ”&#xff08;后面的Foun…
阅读更多...
【Java程序设计】【C00277】基于Springboot的招生管理系统（有论文）

【Java程序设计】【C00277】基于Springboot的招生管理系统（有论文）

基于Springboot的招生管理系统&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的招生管理系统 本系统分为系统功能模块、管理员功能模块以及学生功能模块。 系统功能模块&#xff1a;在系统首页可以查看首页、专业…
阅读更多...
C语言——实用调试技巧——第2篇——（第23篇）

C语言——实用调试技巧——第2篇——（第23篇）

坚持就是胜利 文章目录 一、实例二、如何写出好&#xff08;易于调试&#xff09;的代码1、优秀的代码2、示范&#xff08;1&#xff09;模拟 strcpy 函数方法一&#xff1a;方法二&#xff1a;方法三&#xff1a;有弊端方法四&#xff1a;对方法三进行优化assert 的使用 方法五…
阅读更多...
Hive【内部表、外部表、临时表、分区表、分桶表】【总结】

Hive【内部表、外部表、临时表、分区表、分桶表】【总结】

目录 Hive的物种表结构特性 一、内部表 建表 使用场景 二、外部表 建表:关键词【EXTERNAL】 场景&#xff1a; 外部表与内部表可互相转换 三、临时表 建表 临时表横向对比​编辑 四、分区表 建表&#xff1a;关键字【PARTITIONED BY】 场景&#xff1a; 五、分桶表 …
阅读更多...
万界星空科技MES系统，实现数字化智能工厂

万界星空科技MES系统，实现数字化智能工厂

万界星空科技帮助制造型企业解决生产过程中遇到的生产过程不透明&#xff0c;防错成本高&#xff0c;追溯困难&#xff0c;品质不可控&#xff0c;人工效率低下&#xff0c;库存积压&#xff0c;交期延误等问题&#xff0c;从而达到“降本增效”的目标。打通各个信息孤岛&#…
阅读更多...
【算法与数据结构】回溯算法、贪心算法、动态规划、图论（笔记三）

【算法与数据结构】回溯算法、贪心算法、动态规划、图论（笔记三）

文章目录 七、回溯算法八、贪心算法九、动态规划9.1 背包问题9.2 01背包9.3 完全背包9.4 多重背包 十、图论10.1 深度优先搜索10.2 广度优先搜索10.3 并查集 最近博主学习了算法与数据结构的一些视频&#xff0c;在这个文章做一些笔记和心得&#xff0c;本篇文章就写了一些基础…
阅读更多...
2023全新UI千月影视APP源码 | 前后端完美匹配、后端基于ThinkPHP框架

2023全新UI千月影视APP源码 | 前后端完美匹配、后端基于ThinkPHP框架

应用介绍 本文来自&#xff1a;2023全新UI千月影视APP源码 | 前后端完美匹配、后端基于ThinkPHP框架 - 源码1688 简介&#xff1a; 2023全新UI千月影视APP源码 | 前后端完美匹配、后端基于thinkphp框架 图片&#xff1a;
阅读更多...
.NET Core MongoDB数据仓储和工作单元模式实操

.NET Core MongoDB数据仓储和工作单元模式实操

前言 上一章节我们主要讲解了MongoDB数据仓储和工作单元模式的封装&#xff0c;这一章节主要讲的是MongoDB用户管理相关操作实操。如&#xff1a;获取所有用户信息、获取用户分页数据、通过用户ID获取对应用户信息、添加用户信息、事务添加用户信息、用户信息修改、用户信息删除…
阅读更多...
kafka为什么性能这么高？

kafka为什么性能这么高？

Kafka系统架构 Kafka是一个分布式流处理平台&#xff0c;具有高性能和可伸缩性的特点。它使用了一些关键的设计原则和技术&#xff0c;以实现其高性能。 上图是Kafka的架构图&#xff0c;Producer生产消息&#xff0c;以Partition的维度&#xff0c;按照一定的路由策略&#x…
阅读更多...
Java知识点一

Java知识点一

hello&#xff0c;大家好&#xff01;我们今天开启Java语言的学习之路&#xff0c;与C语言的学习内容有些许异同&#xff0c;今天我们来简单了解一下Java的基础知识。 一、数据类型 分两种&#xff1a;基本数据类型 引用数据类型 &#xff08;1&#xff09;整型 八种基本数…
阅读更多...
Unity 2021.3发布WebGL设置以及nginx的配置

Unity 2021.3发布WebGL设置以及nginx的配置

使用unity2021.3发布webgl 使用Unity制作好项目之后建议进行代码清理&#xff0c;这样会即将不用的命名空间去除&#xff0c;不然一会在发布的时候有些命名空间webgl会报错。 平台转换 将平台设置为webgl 设置色彩空间压缩方式 Compression Format 设置为DisabledDecompre…
阅读更多...
【kubernetes】二进制部署k8s集群之，多master节点负载均衡以及高可用（下）

【kubernetes】二进制部署k8s集群之，多master节点负载均衡以及高可用（下）

↑↑↑↑接上一篇继续部署↑↑↑↑ 之前已经完成了单master节点的部署&#xff0c;现在需要完成多master节点以及实现k8s集群的高可用 一、完成master02节点的初始化操作 二、在master01节点基础上&#xff0c;完成master02节点部署 步骤一&#xff1a;准备好master节点所需…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023