node实现TCPUDP测速网页

这几天组长让我一个前端写个手机应用来测试TCP/UDP的速率、丢包率等，由于实在不会，商量下来就改为用网页测试了。但此处有一个问题，TCP/UDP都不被H5支持，于是就想到本地服务起TCP/UDP和WS，TCP/UDP服务用于和远程服务器测试，WS推送数据给网页页面。下面是具体实现。

1. 远程服务器

1. 实现

服务器端的实现还是比较简单的，用node自带的net和dgram模块创建TCP/UDP服务器，然后把客户端发送的数据返还给客户端就可以了。

TCP服务器创建如下：

const net = require('net');// 创建TCP server
const tcpServer = net.createServer((client /*net.Socket*/) => {console.log('tcp client connected');client.setEncoding('utf-8');client.pipe(client); // pipe会将收到的消息复制一份发送出去client.on('end', () => {console.log('tcp client disconnected');});
});
// 错误处理
tcpServer.on('error', (err) => {console.log(err.message);tcpServer.close();
});
// 监听5002端口，可改
tcpServer.listen(5002, () => {const serverInfo = tcpServer.address();console.log(`tcp server listening ${serverInfo.address}:${serverInfo.port} `);
});

UDP服务器创建如下：

const dgram = require('dgram');
//创建 udp server
const udpServer = dgram.createSocket('udp4');
udpServer.on('listening', function () {const serverInfo = udpServer.address();console.log(`udp server linstening ${serverInfo.address}:${serverInfo.port}`);
})
//接收消息
udpServer.on('message', function (msg, rinfo) {udpServer.send(msg, 0, msg.length, rinfo.port, rinfo.address); //将接收到的消息返回给客户端
})
//错误处理
udpServer.on('error', function (err) {console.log('some error on udp server.')udpServer.close();
})
udpServer.bind(5001); // 绑定端口5001，可改

2. 部署

服务器部署环境需要node版本＞0.6，具体如何安装node环境网上有很多教程，不再赘述。

安装完node环境之后还需要使用pm2管理node服务，使用npm install -g pm2来安装pm2。

之后就是正常的部署过程，用frtp（或其他）上传项目到服务器，pm2 start xxx.js启动服务。启动完成后大概是这样：

也可以使用pm2 log xxx来查看服务的打印信息。如下：

确保服务运行之后，配置防火墙打开5001/udp，5002/tcp端口，需要确保端口协议正确，否则收不到消息。具体如何配置网上有教程，请选择自己的linux发行版的教程查看。阿里云服务器的配置有所不同，需要在阿里云控制台手动开放（阿里云服务器里压根没有防火墙）。

2. 本地客户端

客户端主要做的是反复向服务器发送信息，在每条信息中包含发送时间戳信息。在收到服务器返回消息时，通过将发送时间戳与本地时间戳比对，计算出链路时延等信息。

1. TCP客户端实现

const net = require('net');
let tcpStart = false; // 连接状态
let tcpFreq = 0; // 发包速率
let tcpSize = 0; // 每包大小
let tcpNum = 0; // 每轮数据包数量
let tcpSend = 0; // 已发包数
let tcpRecv = 0; // 已收包数
let tcpDelay = Infinity; // 链路时延
let tcpInterval; // tcp发包定时器
// 创建客户端
const tcpClient = new net.Socket();
tcpClient.setEncoding('utf8');
// 连接服务器，第一个参数为端口号，第二个参数为服务器ip，第三个参数为连接的回调
tcpClient.connect(5002,'xxx.xxx.xxx.xxx',function () {console.log('tcp client connected');
});
// 接收数据事件
tcpClient.on('data',function (data) {const recvMsg = data.toString();// 因为tcp协议需要粘包拆包，所以有以下这段。粘包拆包有很多解决方案，由于本人不是研究这个的，就选择了最简单的占位符处理方案。const msg = recvMsg.replace(/s/g, ""); // 清除占位符for(let i = 0; i < msg.length; i += 6) { // 拆包const startTime = Number.parseInt(msg.slice(i, i+6));const endTime = Number.parseInt(new Date().getTime().toString().slice(-6));tcpDelay = endTime - startTime;tcpRecv++;}
});
//监听与服务端连接的错误事件
tcpClient.on('error',function (err) {console.log('tcp client error, error code: ', err.code);// 修改连接状态，重置收发数量tcpStart = false;tcpSend = 0;tcpRecv = 0;tcpClient.destroy();
})

TCP协议本身是流传输协议，为了保证连接速率和质量，TCP会在缓冲有剩余时将小包粘连，大包拆分以此加快传输速率，因此需要对此做出处理。具体产生原因和解决方案请参考：https://www.jianshu.com/p/9e3cefc21ca9。

2. udp客户端实现

const dgram = require('dgram');
//创建 udp server
const udpClient = dgram.createSocket('udp4');
udpClient.bind(5678); // 绑定端口
let udpStart = false; // 连接状态
let udpFreq = 0; // 发包速率
let udpSize = 0; // 每包大小
let udpNum = 0; // 每轮数据包数量
let udpSend = 0; // 已发包数
let udpRecv = 0; // 已收包数
let udpDelay = Infinity; // 链路时延
let udpInterval; // udp发包定时器
//接收消息
udpClient.on('message', function (msg, rinfo) {// 截取时间戳，计算链路时延const startTime = Number.parseInt(msg.toString("utf8", 0, 6));const endTime = Number.parseInt(new Date().getTime().toString().slice(-6));udpDelay = endTime - startTime;udpRecv++;
})
//错误处理
udpClient.on('error', function (err) {console.log('some error on udp client.')// 修改链路状态，重置收发数量udpStart = false;udpSend = 0;udpRecv = 0;udpClient.close();
})

3. 发送数据包

setInterval(() => {// tcp定时器if (tcpStart && !tcpInterval) {tcpInterval = setInterval(() => {const buffer = Buffer.alloc(tcpSize, "s");const startTime = new Date().getTime().toString().slice(-6);buffer.write(startTime);tcpClient.write(buffer);tcpSend++;}, 1000 / tcpNum);} else if (tcpInterval) {clearInterval(tcpInterval);tcpInterval = undefined;}// udp定时器if (udpStart && !udpInterval) {udpInterval = setInterval(() => {const buffer = Buffer.alloc(udpSize);const startTime = new Date().getTime().toString().slice(-6);buffer.write(startTime);udpClient.send(buffer, 0, buffer.length, 5001, "xxx.xxx.xxx.xxx");udpSend++;}, 1000 / udpNum);} else if (udpInterval) {clearInterval(udpInterval);udpInterval = undefined;}
}, 1000)

4. 前端数据推送

由于需要实现的功能比较简单，就选择了最小的ws库，如果有其他需要也可以选择socket.io。

const WebSocketServer = require('ws').Server;
wsServer = new WebSocketServer({ port: 8081 });//服务端口8181
wsServer.on('connection', function (ws) {console.log('WS connected');ws.on('message', function (message) {const cmd = JSON.parse(message.toString());// 若收到tcp开始发送的消息，开始发包并计算包大小、每轮数量等if (cmd.topic === "tcpStart") {tcpStart = true;tcpFreq = cmd.freq;tcpSize = Math.min(tcpFreq, 1024);tcpNum = Math.ceil(tcpFreq / tcpSize);console.log(tcpStart, tcpSize, tcpNum);} else if (cmd.topic === "tcpEnd") {// 结束发包并在5秒后重置收发数量（避免链路时延导致的收数据包统计不到的问题）tcpStart = false;setTimeout(() => {tcpSend = 0;tcpRecv = 0;}, 5000);}// udp同tcpif (cmd.topic === "udpStart") {udpStart = true;udpFreq = cmd.freq;udpSize = Math.min(udpFreq, 1024);udpNum = Math.ceil(udpFreq / udpSize);console.log(udpStart, udpSize, udpNum);} else if (cmd.topic === "udpEnd") {udpStart = false;setTimeout(() => {udpSend = 0;udpRecv = 0;}, 5000);}});// 每秒向前端推送实时数据setInterval(() => {const message = {};if (tcpStart || tcpSend) {message.tcp = { send: tcpSend, recv: tcpRecv, size: tcpSize, delay: tcpDelay + 'ms' };}if (udpStart || udpSend) {message.udp = { send: udpSend, recv: udpRecv, size: udpSize, delay: udpDelay + 'ms' };}ws.send(JSON.stringify(message));}, 1000)
});

3. 前端页面

由于前端页面功能比较简单，因此用的原生实现。具体实现如下（JS）：

window.onload = function() {// 状态初始化let tcpOnMessage = false;let udpOnMessage = false;// 获取展示元素DOM节点const tcpFreqDOM = document.getElementById("tcpFreq");const tcpSendDOM = document.getElementById("tcpSend");const tcpRecvDOM = document.getElementById("tcpRecv");const tcpSizeDOM = document.getElementById("tcpSize");const tcpDelayDOM = document.getElementById("tcpDelay");const udpFreqDOM = document.getElementById("udpFreq");const udpSendDOM = document.getElementById("udpSend");const udpRecvDOM = document.getElementById("udpRecv");const udpSizeDOM = document.getElementById("udpSize");const udpDelayDOM = document.getElementById("udpDelay");// 创建WS连接const ws = new WebSocket("ws://localhost:8081");ws.onopen = function (e) {console.log("ws client connected");}ws.onmessage = function (e) {const data = JSON.parse(e.data);// 接收数据时若仍处于收发状态，渲染至页面if (tcpOnMessage) {tcpSendDOM.innerText = data.tcp.send;tcpRecvDOM.innerText = data.tcp.recv;tcpSizeDOM.innerText = data.tcp.size;tcpDelayDOM.innerText = data.tcp.delay;}if (udpOnMessage) {udpSendDOM.innerText = data.udp.send;udpRecvDOM.innerText = data.udp.recv;udpSizeDOM.innerText = data.udp.size;udpDelayDOM.innerText = data.udp.delay;}}// 获取用户输入的测试速率let tcpFreq = 0;tcpFreqDOM.addEventListener("input", (event) => {tcpFreq = event.target.value;})let udpFreq = 0;udpFreqDOM.addEventListener("input", (event) => {udpFreq = event.target.value;})// 获取button DOMconst tcpStartDOM = document.getElementById("tcpStart");const tcpEndDOM = document.getElementById("tcpEnd");const udpStartDOM = document.getElementById("udpStart");const udpEndDOM = document.getElementById("udpEnd");// 开始测试时发送开始事件和测试速率tcpStartDOM.addEventListener("click", () => {if (tcpFreq) {tcpOnMessage = true;ws.send(JSON.stringify({topic: "tcpStart",freq: tcpFreq}));} else {window.alert("请输入tcp测试速率")}})tcpEndDOM.addEventListener("click", () => {ws.send(JSON.stringify({topic: "tcpEnd"}));tcpStartDOM.disabled = true;tcpEndDOM.disabled = true;tcpEndDOM.innerText = "正在统计...";// 5s后真正更改传输状态，避免链路时延导致的不统计setTimeout(() => {tcpStartDOM.disabled = false;tcpEndDOM.disabled = false;tcpEndDOM.innerText = "结束测试";tcpOnMessage = false;window.alert("tcp测试已停止");}, 5000);})udpStartDOM.addEventListener("click", () => {if (udpFreq) {udpOnMessage = true;ws.send(JSON.stringify({topic: "udpStart",freq: udpFreq}));} else {window.alert("请输入udp测试速率");}})udpEndDOM.addEventListener("click", () => {ws.send(JSON.stringify({topic: "udpEnd"}));udpStartDOM.disabled = true;udpEndDOM.disabled = true;udpEndDOM.innerText = "正在统计...";setTimeout(() => {udpStartDOM.disabled = false;udpEndDOM.disabled = false;udpEndDOM.innerText = "结束测试";udpOnMessage = false;window.alert("udp测试已停止");}, 5000);})
}

至此整个TCP/UDP测速系统就完成了，运行结果如下：

收发过程中：

收发结束：