关于websocket:httpServer来代理WebSocket通信

1、简介
1.1、通信形式

单工：数据只反对在一个方向传输，即单向，在同一时间内只有一方可能承受&发送信息；
半双工：容许数据可能双向传输，然而，在某一时刻只容许数据在一个方向传输。相似切换方向的单工通信。http就是半双工通信，先有申请，再有响应；
全双工：容许数据同时都能双向传输，相似两个单工通信的联合，要求client & server都有独立接管和发送的能力，在任意时刻都能接管&发送信息，socket就是全双工通信；

1.2、websocket
websocket实质是一种网络应用层协定，建设在单个TCP连贯上的全双工模式，用来补救了http协定在继续双向通信能力上的有余，容许服务端与客户端之间能够双向被动推送数据。
特点：

与http协定有着良好的兼容性，默认端口80（协定标识为ws）或者443（加密传输，协定标识为wss）；
建设连贯的握手阶段采纳的是http协定，依据这个个性，能够在链路两头引入http代理服务器；
数据格式轻量，性能开销小，通信效率高（只有建设连贯后，就能够有限收发报文）；
报文内容能够是文本，也能够是二进制数据；
没有同源的束缚，不存在跨域一说，客户端能够与任意服务器通信（前提是服务器能应答）；
对外裸露的URL为：ws://${domain}:80/${path}，或者wss://${domain}:443/${path}

2、搭建demo
2.1、server
采纳ws库疾速构建一个websocket server，监听connection事件，收到音讯并且打印后，立马发送给客户端
const ws = require('ws');

let wsServer = new ws.Server({

port: 3000,host:'127.0.0.1',path:'/websocket'

});

wsServer.on('connection', function (server) {

console.log('client connected');server.on('message', function (message) {    console.dir(message)    console.log(message.toString());    server.send(`hello:${message}`)});

});
复制代码
2.2、client
疾速搭建一个websocket client，利用http-server在目录下启动，并且拜访该页面
<!DOCTYPE html>

<html><head>    <title>websocket demo</title></head><body>    <h1></h1>    <br>    <input type='text' id='sendText'>    <button onclick='send()'>send</button></body>

</html>
<script>

const ws = new WebSocket('ws://127.0.0.1:3000/websocket');ws.onopen = function () {    console.log('服务器连贯')}ws.onmessage = (msg) => {    console.log('来自服务器发来的数据：', msg)    alert('服务器返回内容：' + msg.data)}ws.onclose = () => {    console.log('服务器敞开')}function send() {    if (ws) {        let msg = document.getElementById('sendText').value;        ws.send(msg)    } else {        alert('websocket server error')    }}

</script>
复制代码
2.3、建设连贯
先启动websocket server，而后浏览器申请websocket client页面，抓包申请如下：

2.3.1、tcp的三次握手
前三条为tcp的三次握手信息，既然谈到了，为了文章的完整性，还是简略形容一下；

client发送连贯申请，设置SYN=1，随机一个初始序列号Seq（数据包SYN = 1，seq = x），而后本人进入SYN_SEND状态（同步已发送），期待server确认；
server收到SYN包后，也随机一个Seq为y，并且让ack = x + 1，示意收到了client的连贯申请，而后设置SYN = 1,ACK = 1，返回给client（数据包SYN = 1, ACK = 1, seq = y, ack = x + 1），示意SYN握手通过，期待ACK应答，而后本人进入SYN_RCVD状态（同步已接管）；
client收到[SYN, ACK]包后，将ACK置1，让ack = y +1, 示意收到了server的确认申请，最初发送确认给server（数据包ACK = 1, ack = y + 1），而后本人进入ESTABLISHED状态（连贯已建设），server收到client的确认后也进入ESTABLISHED状态；

三次握手必要性：

同步单方的初始序列号，防止反复连贯，必须三次，四次也行，然而开销太大影响效率；
序列号是牢靠传输的关键性，能够去除反复数据，依据数据包的序号来接管；

SYN（连贯申请）的攻打危害：

攻打方发送海量伪造源IP的第一次握手SYN包，将服务器的半连贯队列给打满（超过最大值），失常的客户发送SYN数据包申请连贯就会被服务器抛弃，导致失常的连贯申请无奈胜利，重大引起网络梗塞甚至零碎瘫痪

躲避形式：

限度ip连贯次数（限度同一IP一分钟内新建设的连接数仅为10）；增大半连贯状态的连接数容量（会增大内存资源占用，/etc/sysctl.d/sysctl.conf ，字段tcp_max_syn_backlog）

2.3.2、TCP window update
server的接管窗口大小产生了变动，能够失常接收数据了，就会呈现这一条记录
2.3.3、正式连贯
抓包剖析看出，websocket通信在单方TCP三次握手胜利后，还须要发送一次额定的http申请，能力正式建设连贯。http申请报文如下：
GET /websocket HTTP/1.1
Host: 127.0.0.1:3000
Connection: Upgrade
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
Upgrade: websocket
Origin: http://127.0.0.1:8080
Sec-WebSocket-Version: 13
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7
Sec-WebSocket-Key: Ap4ZCLgwbnDQ2ump+7ea3g==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: Ih1TB0gxAY3zGzvQCYrIeM5bEdw=
复制代码
申请headers的限定：

申请形式必须是GET，且http版本必须为1.1（keep-alive。因为1.0开启长连贯须要Connection字段设置，然而websocket握手时，Connection曾经被占用了）；
Host，Origin字段必填：决定拜访哪个虚拟主机，申请起源站点（仅仅协定域名端口，没有任何path）（默认会带上它俩）；
Connection字段必填，且字段为Upgrade（触发http协定降级）；
Upgrade字段必填，表明协定降级为web socket；
Sec-WebSocket-Key字段必填，内容为客户端标识的base64编码格局；
Sec-WebSocket-Version字段必填，表明websocket协定版本， RFC 6455 的协定版本为 13；
Sec-WebSocket-Extensions字段可选，做客户端握手时的拓展项应用；

响应header剖析：

只有状态码为101，才示意服务端批准了协定降级，对于其余状态码，client会依据语义相应解决；

client会检测响应headers中是否蕴含Upgrade字段，且检测值是否为websokcet（不辨别大小写），若缺失或不匹配，会主动终止连贯；

client会检测响应headers中是否蕴含Sec-WebSocket-Protocol字段，并校验它的合理性，若缺失或校验失败，会在主动终止连贯；

Sec-WebSocket-Protocol校验算法（client & server的约定）：server收到Sec-WebSocket-Key后，会将其与websocket魔数258EAFA5-E914-47DA- 95CA-C5AB0DC85B11进行字符串拼接，即${Sec-WebSocket-Key}258EAFA5-E914-47DA- 95CA-C5AB0DC85B11，而后对它做SHA1哈希运算后再做一次base64编码，就为Sec-WebSocket-Protocol。

握手通过后，单方就是长连贯了，能够随时进行双向数据的传输。
3、http代理
由上文可知，除去tcp三次握手外，websocket实在的建设连贯是那次要害的http申请，那其实能够针对它来做一层http网关来代理后续的数据传输了。
3.1、创立http Server
先形容config.json文件：
json格局，websocketTestOne key代表一个webSocket，根下文协定降级申请的path相响应，即一个该配置对应的代理申请地址应该为：http://{domain}/websocketTestOne，增加多个配置，顺次类推
{
"websocketTestOne": {

"host": "127.0.0.1","port": "3000"

}
}
复制代码
httpServer.js，如下所示，代码量不多，简略介绍一下流程：

加载配置文件，开启一个http server，并监听upgrade事件；
如果有协定降级的申请过去后，会触发upgrade，而不是request，upgrade事件中，针对clientSocket一系列监听的预处理；
如果config.json没有值，完结clientSocket，如果request.url解析进去的path在config中找不到，完结clientSocket；
找到对应的config，建设socket连贯（连贯实在的webSocket服务），创立出serverSocket，并进行一系列预处理设置；
clientSocket监听data事件，将报文写入serverSocket，serverSocket监听data事件，将报文写入clientSocket，交替进行；
组装握手连贯的http报文，serverSocket开始正式向webSocket服务握手连贯，并触发后面的双向data监听事件；
握手胜利，传递的clientSocket，示意也握手胜利，连贯建设，能够双向收发报文了……

/**

create by ikejcwang on 2022.07.25.
注：这只是一个测试的demo
*/

'use strict';
const http = require('http');
const nodeUtil = require('util');
const URL = require('url');
const net = require('net');
const settings = require('./settings').settings;
const configs = require('./settings').configs;
const connectTimeout = settings['connectTimeout'] ? settings['connectTimeout'] : 5000; // 建设连贯的超时设定
const connectKeepalive = settings['connectKeepalive'] ? settings['connectKeepalive'] : 60000; // 连贯后的keepalive超时设定
const socketTimeout = settings['socketTimeout'] ? settings['socketTimeout'] : 60000; // socket的timeout，

httpServer();

/**

启动入口
*/

function httpServer() {

console.dir(settings)startHttpServer();

}

function startHttpServer() {

let server = http.createServer();server.on('upgrade', listenUpgradeEvent);server.on('request', listenRequestEvent);server.on('close', () => {    console.log('http Server has Stopped At:' + settings['bindPort'])});server.on('error', err => {    console.log('http Server error:' + err.toString());    setTimeout(() => {        process.exit(1);    }, 3000);});server.listen(settings['bindPort'], settings['bindIP'], settings['backlog'] || 8191, () => {    console.log('Started Http Server At: ' + settings['bindIP'] + ':' + settings['bindPort']);});

}

/**

监听upgrade事件
@param request
@param cliSocket
@param header
@returns {Promise<void>}
*/

async function listenUpgradeEvent(request, cliSocket, header) {

let serverSocket = null;cliSocket.on('error', e => {    if (serverSocket) {        serverSocket.destroy();    }    logInfo('cliSocket has error', nodeUtil.inspect(e))});cliSocket.on('end', () => {    logInfo('cliSocket has ended');});cliSocket.on('close', function () {    logInfo('cliSocket has closed');});cliSocket.setTimeout(socketTimeout, () => {    cliSocket.destroy(new Error('timeout'));    if (serverSocket) {        serverSocket.destroy();    }})try {    if (!configs || Object.keys(configs).length < 1) {        cliSocket.end();        return;    }    let sourceUrl = URL.parse(request.url, true);    let pathArr = sourceUrl.pathname.split('/');    if (pathArr.length === 1) {        cliSocket.end();        return;    }    let websocketName = pathArr[1];    if (!websocketName || !configs[websocketName]) {        cliSocket.end();        return;    }    serverSocket = await connectSocket(configs[websocketName]);    serverSocket.on('error', err => {        cliSocket.end();        logInfo('server socket error', nodeUtil.inspect(err));    });    cliSocket.on('data', chunk => {        cliSocket.pause();  // 收到数据后，暂停以后cliSocket        if (serverSocket.write(chunk)) {            cliSocket.resume(); // server socket写胜利后，在激活以后cliSocket        }    }).on('end', () => {        console.log('end')        serverSocket.end(); // 双写完解决    });    serverSocket.on('data', chunk => {        serverSocket.pause();        if (cliSocket.write(chunk)) {            serverSocket.resume();        } else {            cliSocket.once('drain', () => serverSocket.resume());   // 如果调用 stream.write(chunk) 返回 false，则当能够持续写入数据到流时会触发 drain 事件        }    }).on('end', () => {        cliSocket.end()    });    let connectHeaders = request.headers;    connectHeaders['host'] = `${configs[websocketName].host}:${configs[websocketName].port}`;    let headersTemp = '';    for (let key in connectHeaders) {        headersTemp += `${key}: ${connectHeaders[key]}\r\n`    }    serverSocket.write(`${request.method} ${request.url} HTTP/1.1\r\n${headersTemp}\r\n`); // 向实在的webSocket服务开始握手连贯    if (header && header.length > 0) {        serverSocket.write(header)    }} catch (e) {    if (cliSocket.writable) {        cliSocket.write(`HTTP/1.1 502 Server UnReachable\r\n\r\n`);    }    cliSocket.end();    console.log(`request_error: ${nodeUtil.inspect(e)}`);}

}

/**

监听request事件
@param request
@param response
@returns {Promise<void>}
*/

async function listenRequestEvent(request, response) {

// 再次证实websocket握手时到不了这里，因为headers信息的connection字段为Upgrade，触发的是Upgrade事件console.log('listenRequestEvent')

}

/**

连贯socket
@param websocketConfig
@returns {Promise<unknown>}
*/

function connectSocket(websocketConfig) {

return new Promise((resolve, reject) => {    let socket = net.connect(websocketConfig);    let timer = setTimeout(() => {        socket.removeListener('error', onError)        socket.destroy();        reject(Object.assign(new Error('connect timeout'), websocketConfig))    }, connectTimeout);    let onConnect = () => {        socket.setKeepAlive(true, connectKeepalive);        socket.removeListener('error', onError)        clearInterval(timer);        // TODO 创立tcp连贯时，默认都会启用Nagle算法，此处禁用它，(Nagle试图以提早为代价来优化吞吐量，然而咱们并不需要)，传参true或不传即禁用，        socket.setNoDelay();        socket.setTimeout(socketTimeout + 60000, () => {            socket.destroy(new Error('socket server timeout'));        })        resolve(socket);    }    let onError = e => {        clearInterval(timer);        reject(e);    }    socket.once('connect', onConnect);    socket.once('error', onError);});

}

function logInfo(...args) {

console.dir(args)

}
复制代码
3.2、创立webSocket Server
webSocketServer.js，比较简单，应用ws模块疾速构建；
连贯建设，输入信息，收到报文，输入报文，并增加前缀原路收回去；
const ws = require('ws');

let wsServer = new ws.Server({

port: 3000,host:'127.0.0.1',

});

wsServer.on('connection', function (server) {

console.log('client connected');server.on('message', function (message) {    console.dir(message)    console.log(message.toString());    server.send(`hello:${message}`)});

});