如何实现HTML按钮点击经Node.js TCP发送不同指定整数值

当前实现存在两个核心断层，直接导致了固定值单次发送的问题：

• 浏览器端没有直接操作TCP socket的原生权限，你现有独立运行的Node.js TCP代码和HTML页面没有任何通信通道，按钮点击事件根本无法触达TCP发送逻辑
• TCP客户端逻辑硬编码了“连接建立即发送固定值32”的流程，没有预留动态传入数值、重复触发发送的可调用入口

1. 搭建前后端通信链路 #

让Node.js同时承担两个角色：一是作为TCP客户端和远程设备维持长连接，二是作为轻量Web服务托管你的HTML菜单页面，接收前端按钮点击传递的数值，再转成符合要求的二进制包通过已有的TCP连接发给远程设备。
核心原则：全程复用已经建立好的TCP长连接，不要每次点击按钮都新建TCP连接，既减少连接开销，也能避免远程设备触发连接频率限制

2. 前端页面改造 #

给A/B/C三个菜单选项绑定点击事件，给每个按钮映射对应要发送的整数值，点击时把数值通过本地HTTP请求传给Node服务，同时阻止a标签的默认跳转行为，避免页面刷新。
对应的参考代码：

// 配置每个按钮对应的发送值，可按需调整
const valueMap = {
  'A': 131,
  'B': 1118,
  'C': 12819
}

// 为所有子菜单的a标签绑定点击逻辑
document.querySelectorAll('#menu .child a').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault() // 阻止a标签默认跳转
    const btnKey = link.innerText.trim()
    const sendValue = valueMap[btnKey]
    // 将目标值发送给本地Node服务
    fetch('/api/send-tcp', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({targetValue: sendValue})
    })
  })
})

3. Node.js服务逻辑改造 #

替换原有单次发送的TCP代码，加上连接管理、接口接收、动态转包的逻辑，参考实现：

const net = require('net')
const http = require('http')

// 替换为你实际的远程设备IP和端口
const REMOTE_CONFIG = {
  ip: '你的远程设备IP',
  port: 你的远程设备端口号
}

// 全局存储已建立的TCP连接，方便复用
let activeTcpClient = null

// 初始化TCP长连接，加上断连自动重连逻辑
function initRemoteTcp() {
  activeTcpClient = new net.Socket()
  activeTcpClient.connect(REMOTE_CONFIG.port, REMOTE_CONFIG.ip, () => {
    console.log('成功连接远程TCP设备')
    // 移除原有的连接即发送固定值的逻辑，等待前端指令再发送
  })

  // 连接异常/断开处理
  activeTcpClient.on('error', (err) => {
    console.log('TCP连接异常：', err.message)
    activeTcpClient.destroy()
    setTimeout(initRemoteTcp, 5000) // 5秒后自动重连
  })
  activeTcpClient.on('close', () => {
    console.log('TCP连接已断开，准备重连')
    setTimeout(initRemoteTcp, 5000)
  })
}

// 初始化本地Web服务
const webServer = http.createServer((req, res) => {
  // 处理前端发送的TCP发送指令
  if (req.url === '/api/send-tcp' && req.method === 'POST') {
    let reqBody = ''
    req.on('data', chunk => reqBody += chunk)
    req.on('end', () => {
      const {targetValue} = JSON.parse(reqBody)
      // 数值合法性校验，匹配32位整数范围
      if (!Number.isInteger(targetValue) || targetValue < -2147483648 || targetValue > 2147483647) {
        res.writeHead(400)
        res.end('发送数值不合法')
        return
      }
      // 检查TCP连接可用性
      if (!activeTcpClient || activeTcpClient.destroyed) {
        res.writeHead(503)
        res.end('远程TCP连接暂不可用')
        return
      }
      // 动态生成发送的二进制包：32位小端序整数，仅申请4字节缓冲区
      const sendBuffer = Buffer.alloc(4)
      sendBuffer.writeInt32LE(targetValue, 0)
      activeTcpClient.write(sendBuffer)
      res.writeHead(200)
      res.end('数值发送成功')
    })
    return
  }

  // 其他请求直接返回你的HTML菜单页面
  res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'})
  res.end(`
    <ul id="menu">
        <li class="parent"><a href="#">Encode Mode<span class="expand">&raquo;</span></a>
            <ul class="child">
            <li><a href="#" nowrap>A</a></li>
            <li><a href="#" nowrap>B</a></li>
            <li><a href="#" nowrap>C</a></li>
            </ul>
        </li>
    </ul>
    <!-- 把前面写的前端绑定逻辑放在这里就行 -->
  `)
})

// 启动所有服务
initRemoteTcp()
webServer.listen(3000, () => {
  console.log('Web服务已启动，访问http://localhost:3000即可打开操作菜单')
})

4. 优化注意点 #

• 原来代码里每次申请1024字节缓冲区的逻辑可以替换：32位整数仅占4字节，无需申请大缓冲区，减少无效流量
• 必须加上TCP断连自动重连逻辑，避免网络波动后整个操作链路失效
• 前端触发请求时可以加个简单的反馈提示，让用户知道点击已经生效，避免重复点击

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