这几天组长让我一个前端写个手机应用来测试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同tcp
if (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 DOM
const 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测速系统就完成了，运行结果如下：
收发过程中：
收发结束：
