如何在摇杆未移动时持续向WebSocket发送数据？

当用nipple.js做摇杆控制服务器角色时，默认的move事件只在摇杆位置变化时触发——一旦摇杆被拉到边界或按住不动，事件就会停止，没法持续向WebSocket发方向指令。要解决这个问题，用定时器+状态记录的方式就能实现持续发送：

核心思路 #

1. 摇杆触发start事件时，记录当前方向/角度数据，启动定时器每隔固定时间发最新状态
2. move事件里实时更新摇杆状态
3. end事件触发时，清除定时器停止发送

完整实现代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/nipplejs/0.10.0/nipplejs.min.js"></script>
<div id="container"></div>

#container {
  height: 200px;
  width: 200px;
  background-color: rgb(203 213 225);
}

// 初始化WebSocket连接（替换成你的服务器地址）
const ws = new WebSocket('ws://your-server-address');

const container = document.getElementById("container");
const manager = nipplejs.create({
  zone: container,
  color: "rgb(14 116 144)"
});

// 存储当前摇杆状态
let joystickState = {
  angle: null,
  direction: null
};
let sendInterval = null;

// 摇杆开始拖动时启动定时发送
manager.on("start", (evt, data) => {
  joystickState.angle = data.angle;
  joystickState.direction = data.direction;
  
  // 每隔100ms发送一次状态（可根据需求调整间隔）
  sendInterval = setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify(joystickState));
      console.log("发送摇杆状态:", joystickState);
    }
  }, 100);
});

// 摇杆移动时更新状态
manager.on("move", (evt, data) => {
  joystickState.angle = data.angle;
  joystickState.direction = data.direction;
});

// 摇杆结束拖动时停止发送
manager.on("end", () => {
  clearInterval(sendInterval);
  sendInterval = null;
  
  // 可选：发送停止指令让服务器角色停止移动
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify({action: "stop"}));
  }
});

关键说明 #

• 定时器间隔可按需调整：50ms更灵敏，200ms更省带宽
• 就算摇杆拉到边界不动，定时器也会持续发最后记录的方向数据，保证服务器能收到持续控制指令
• end事件里的停止指令可让服务器及时处理角色停止逻辑

内容的提问来源于stack exchange，提问作者CoolSteve