如何在HTML浏览器中使用Node.js net模块实现TCP客户端？已尝试Browserify未果

为什么直接用Node.js net模块 + Browserify行不通 #

浏览器的安全沙箱机制禁止直接发起TCP连接，net是Node.js专属核心模块，依赖操作系统底层的TCP网络接口，浏览器环境没有对应的实现，所以Browserify无法将其转换为浏览器可执行代码。

可行的替代方案 #

方案1：通过WebSocket代理服务器中转 #

浏览器原生支持WebSocket协议，你可以搭建一个Node.js中间服务器，作为WebSocket与TCP设备之间的中转桥梁：

1. 代理服务器代码（Node.js）

const net = require('net');
const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  // 连接目标TCP设备
  const tcpClient = new net.Socket();
  tcpClient.connect(设备端口, '设备IP', () => {
    console.log('代理服务器已连接到TCP设备');
  });

  // 转发WebSocket消息到TCP设备
  ws.on('message', (data) => {
    tcpClient.write(data.toString());
  });

  // 转发TCP设备消息到WebSocket客户端
  tcpClient.on('data', (data) => {
    ws.send(data.toString());
  });

  // 处理连接关闭
  ws.on('close', () => {
    tcpClient.destroy();
  });

  tcpClient.on('close', () => {
    ws.close();
  });
});

2. 浏览器端代码

const ws = new WebSocket('ws://你的代理服务器IP:8080');

ws.onopen = () => {
  console.log('已连接到代理服务器');
  ws.send('message'); // 发送消息到TCP设备
};

ws.onmessage = (event) => {
  console.log('收到设备响应:', event.data);
  ws.close();
};

ws.onclose = () => {
  console.log('连接关闭');
};

方案2：使用Web Serial API（仅适用于本地USB/串口设备） #

如果你的设备是通过串口或USB连接到本地电脑，可以用浏览器的Web Serial API直接通信（需HTTPS环境或localhost）：

// 请求访问串口设备
async function connectToDevice() {
  const port = await navigator.serial.requestPort();
  await port.open({ baudRate: 9600 }); // 根据设备实际参数调整

  const writer = port.writable.getWriter();
  // 发送消息
  await writer.write(new TextEncoder().encode('message'));

  const reader = port.readable.getReader();
  // 读取设备响应
  const { value, done } = await reader.read();
  if (!done) {
    console.log('收到设备响应:', new TextDecoder().decode(value));
    reader.releaseLock();
    writer.releaseLock();
    await port.close();
    console.log('连接关闭');
  }
}

// 触发设备连接
connectToDevice();

注意事项 #

• WebSocket代理方案适用于远程或本地设备，需要额外维护代理服务器；
• Web Serial API仅支持Chrome、Edge等现代浏览器，且只能连接本地串口设备；
• 浏览器端网络通信受同源策略限制，代理服务器需按需配置跨域支持。

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