🎉 太棒了！你已经完成了从原始串口数据解析到摇杆事件识别的完整闭环。
现在你想把之前成功解析的 **二进制帧协议（9 字节 + 校验和）** 改造成一个 WebSocket 服务器，将 `X/Y/按钮` 实时推送到网页端 —— 这是一个非常实用的方向！
---
## ✅ 当前目标
你的原始 `server.js` 假设串口输出是文本格式如：
```
512,512,0x20
```
但实际情况是：设备发送的是 **二进制帧（
Buffer）**，例如：
```js
<
Buffer ff 02 00 02 00 02 00 20 7f>
```
所以我们需要：
1. 正确读取 `
Buffer` 数据
2. 解析出 X、Y 和 按钮状态（`
buffer[7] & 0x20`）
3. 转换为 JSON 并通过 WebSocket 发送给前端
---
## ✅ 最终成果：完全兼容你现有硬件的 `server.js`
```js
// server.js
- 专为你的二进制摇杆协议定制 | 支持 serialport@12.x
console.log("🔧 步骤1：server.js 开始执行");
let ws;
let SerialPort;
let ReadlineParser; // 注意：不是 Readline，而是 ReadlineParser
// 加载依赖模块
try {
ws = require('ws');
console.log("✅ 成功加载 'ws'");
} catch (e) {
console.
error("❌ 缺失 'ws' 模块，请运行：
npm install ws");
process.exit(1);
}
try {
({ SerialPort } = require('serialport'));
ReadlineParser = require('@serialport/parser
-readline'); // 可选，这里我们不用它
console.log("✅ 成功加载 'serialport'");
} catch (e) {
console.
error("❌ 加载失败
:", e.message);
console.
error("💡 请运行：
npm install serialport @serialport/parser
-readline");
process.exit(1);
}
// 配置项
const PORT_NAME = 'COM5';
const BAUD_RATE = 9600;
const WEBSOCKET_PORT = 8080;
// 校验和验证函数
function verifyChecksum(frame) {
let sum = 0;
for (let i = 0; i < 8; i++) sum += frame[i];
return (sum + 1) % 256 === frame[8];
}
// 解析帧并提取 x, y, btn
function parseFrame(
buffer) {
if (
buffer.length
!== 9 ||
buffer[0]
!== 0xFF) return null;
if (
!verifyChecksum(
buffer)) {
console.warn("⚠️ 校验失败
:", Array.from(
buffer).map(b => b.toString(16).padStart(2, '0')).join(' '));
return null;
}
const xRaw = (
buffer[1] << 8) |
buffer[2];
const yRaw = (
buffer[3] << 8) |
buffer[4];
const isPressed = Boolean(
buffer[7] & 0x20); // ⭐ 关键标志位
return { x
: xRaw, y
: yRaw, btn
: isPressed };
}
// 主函数
async function startServer() {
let port;
try {
// 打开串口（监听 raw data）
port = await SerialPort.open(PORT_NAME, {
baudRate
: BAUD_RATE,
dataBits
: 8,
stopBits
: 1,
parity
: 'none'
});
console.log(`🟢 串口 ${PORT_NAME} 已打开 @ ${BAUD_RATE}bps`);
} catch (
err) {
console.
error(`🔴 无法打开串口 ${PORT_NAME}
:`,
err.message);
console.
error("💡 可能原因：");
console.
error("
- 设备未插入或被拔出");
console.
error("
- 被其他程序占用（如 Arduino IDE、串口助手）");
console.
error("
- COM5 名称错误（可用 listPorts.js 自动检测）");
return;
}
// ========== WebSocket 服务 ==========
const wss = new ws.Server({ port
: WEBSOCKET_PORT }, () => {
console.log(`🌐 WebSocket 服务已启动
: ws
://localhost
:${WEBSOCKET_PORT}`);
console.log("🎉 现在可以打开你的网页客户端了！");
});
wss.on('connection', (socket) => {
const clientIp = socket._socket.remoteAddress;
console.log(`🎮 客户端已连接
: ${clientIp}`);
// 发送连接确认
socket.send(JSON.stringify({ type
: 'status', msg
: 'connected' }));
// 监听串口原始数据流
let
bufferPool =
Buffer.alloc(0);
port.on('data', (chunk) => {
bufferPool =
Buffer.concat([
bufferPool, chunk]);
// 查找所有可能的帧
while (
bufferPool.length >= 9) {
const startIndex =
bufferPool.indexOf(0xFF);
if (startIndex ===
-1 || startIndex + 9 >
bufferPool.length) break;
const frame =
bufferPool.slice(startIndex, startIndex + 9);
bufferPool =
bufferPool.slice(startIndex + 9); // 移除已处理部分
const data = parseFrame(frame);
if (
!data) continue; // 校验失败跳过
const message = {
type
: 'joystick',
x
: data.x,
y
: data.y,
btn
: data.btn,
timestamp
: Date.now()
};
try {
socket.send(JSON.stringify(message));
console.log('📤 已发送给前端
:', message);
} catch (e) {
if (e.readyState && e.readyState
!== 'OPEN') {
console.warn('⚠️ 客户端已断开，停止发送');
} else {
console.
error('⚠️ 发送失败
:', e.message);
}
}
}
});
});
wss.on('
error', (
err) => {
console.
error('🔥 WebSocket 服务器错误
:',
err.message);
});
// 清理资源
process.on('SIGINT', () => {
console.log("\n🛑 正在关闭串口和服务器...");
port.close(() => console.log("🔌 串口已关闭"));
wss.close(() => console.log("⏹️ WebSocket 已关闭"));
process.exit(0);
});
}
// 启动主程序
startServer().catch(
err => {
console.
error('🚨 启动失败
:',
err);
});
```
---
## 🧠 代码解释
| 功能 | 说明 |
|
------|
------|
| `
Buffer.concat` + `indexOf(0xFF)` | 在流式数据中查找完整的 `0xFF ...` 帧 |
| `parseFrame()` | 提取 X/Y 并判断 `btn =
!!(
buf[7] & 0x20)` |
| `verifyChecksum()` | 使用 `(sum+1)%256 ==
buf[8]` 验证完整性 |
| `socket.send(JSON.stringify(...))` | 推送标准结构化消息给浏览器 |
---
## 🖥️ 示例前端接收（简单测试用）
创建 `index.html` 测试是否收到数据：
```html
<
!DOCTYPE html>
<html>
<head><title>摇杆监控</title></head>
<body>
<h1>🎮 摇杆实时数据</h1>
<pre id="output">等待连接...</pre>
<script>
const ws = new WebSocket("ws
://localhost
:8080");
ws.onmessage = (e) => {
const data = JSON.parse(e.data);
document.getElementById("output").textContent =
`${new Date().toLocaleTimeString()}
:\n` +
`X = ${data.x}\nY = ${data.y}\n按钮 = ${data.btn ? "DOWN"
: "UP"}\n`;
};
ws.onopen = () => console.log("已连接到服务器");
</script>
</body>
</html>
```
---
## ✅ 如何运行？
```bash
# 1. 安装依赖
npm install serialport ws
# 2. 启动服务
node server.js
# 3. 打开浏览器访问
http
://localhost
:8080
```
---
## ✅ 输出示例（控制台）
```
🟢 串口 COM5 已打开 @ 9600bps
🌐 WebSocket 服务已启动
: ws
://localhost
:8080
🎮 客户端已连接
: ::1
📤 已发送给前端
: {"type"
:"joystick","x"
:512,"y"
:512,"btn"
:false,"timestamp"
:1740000000000}
📤 已发送给前端
: {"type"
:"joystick","x"
:992,"y"
:512,"btn"
:true,"timestamp"
:1740000000500}
```
---
## 🚀 下一步建议
你可以继续扩展：
- 添加多客户端支持
- 加入 `/api/status` 返回当前连接状态
- 用 Express 提供静态页面
- 绘制实时轨迹图（Canvas 或 Chart.js）
---
当使用npminstall命令安装依赖遇到错误，如zlib:unexpectedendoffile时，可通过安装淘宝镜像并清除缓存解决。具体步骤包括使用npm命令安装淘宝镜像，若仍失败，再使用npmcache命令清除缓存。
扫一扫
3433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
