无需搭建服务器，实现HTML/JS网页应用接收本地TCP数据的方案调研

Great question! Let’s walk through practical, browser-friendly solutions for your scenario—where a local static HTML/JS app (opened directly via file:// protocol, no web server needed) needs to pull data from your serial-to-TCP proxy running on localhost.

Option 1: Use Chrome’s Experimental TCP Socket API (No Middleware) #

If you’re targeting Chrome/Edge browsers, you can leverage the experimental TCP socket API to connect directly to your proxy’s TCP port without any extra tools. Note this requires enabling a browser flag first.

Steps: #

1. Open Chrome/Edge and navigate to chrome://flags/#enable-experimental-web-platform-features, then enable the flag and restart your browser.
2. Add this code to your HTML/JS app to connect and receive data:

   // 替换为你的代理TCP端口
   const TCP_PORT = 1234;
   
   chrome.sockets.tcp.create({}, (createInfo) => {
     const socketId = createInfo.socketId;
     // 连接到本地TCP代理
     chrome.sockets.tcp.connect(socketId, '127.0.0.1', TCP_PORT, (result) => {
       if (result === 0) {
         console.log('Connected to TCP proxy successfully');
         // 监听数据接收
         chrome.sockets.tcp.onReceive.addListener((info) => {
           if (info.socketId === socketId) {
             // 转换二进制数据为可读字符串
             const receivedData = new TextDecoder().decode(info.data);
             console.log('Received data:', receivedData);
             // 更新页面内容（示例：显示在DOM元素中）
             document.getElementById('data-output').textContent = receivedData;
           }
         });
       } else {
         console.error('Failed to connect to TCP proxy:', result);
       }
     });
   });
   

Pros & Cons: #

• ✅ No extra middleware needed
• ❌ Limited to Chrome/Edge, requires experimental flag
• ❌ May have permission restrictions for file:// protocol

Option 2: TCP-to-WebSocket Proxy (Most Compatible & Practical) #

Since browsers natively support WebSockets (and have great compatibility), a lightweight TCP-to-WebSocket bridge is the most reliable approach. This "proxy" is a tiny Node.js script—hardly a "full server"—and uses minimal resources.

Steps: #

1. If you don’t have Node.js installed, grab it from the official distribution.
2. Create a file named tcp-ws-bridge.js with this code:

   const net = require('net');
   const WebSocket = require('ws');
   
   // 替换为你的代理TCP端口和想要的WebSocket端口
   const TCP_PROXY_PORT = 1234;
   const WS_PORT = 8080;
   
   // Initialize WebSocket server
   const wss = new WebSocket.Server({ port: WS_PORT });
   // Connect to your existing TCP proxy
   const tcpClient = new net.Socket();
   
   tcpClient.connect(TCP_PROXY_PORT, '127.0.0.1', () => {
     console.log('Connected to serial-to-TCP proxy');
   });
   
   // Forward TCP data to all connected WebSocket clients
   tcpClient.on('data', (data) => {
     wss.clients.forEach((client) => {
       if (client.readyState === WebSocket.OPEN) {
         client.send(data.toString());
       }
     });
   });
   
   // Handle WebSocket client connections
   wss.on('connection', (ws) => {
     console.log('WebSocket client connected');
     ws.on('close', () => console.log('WebSocket client disconnected'));
   });
   
   console.log(`TCP-to-WebSocket bridge running at ws://localhost:${WS_PORT}`);
   

3. Install the WebSocket package: run npm install ws in your terminal.
4. Start the bridge: node tcp-ws-bridge.js.
5. Add this WebSocket code to your HTML/JS app:

   const ws = new WebSocket('ws://localhost:8080');
   
   ws.onmessage = (event) => {
     const receivedData = event.data;
     console.log('Received data via WebSocket:', receivedData);
     // Update your UI with the data
     document.getElementById('data-output').textContent = receivedData;
   };
   
   ws.onopen = () => console.log('WebSocket connection established');
   ws.onerror = (error) => console.error('WebSocket error:', error);
   

Pros & Cons: #

• ✅ Works on all modern browsers (Chrome, Firefox, Safari, Edge)
• ✅ Minimal resource usage (the bridge uses ~10MB RAM or less)
• ✅ No browser flags required
• ❌ Requires a tiny Node.js script (but it’s trivial to set up)

Option 3: Skip the Proxy—Use Web Serial API Directly #

If your use case allows, you can cut out the serial-to-TCP proxy entirely and let the browser read the serial port directly via the Web Serial API.

Code Example: #

async function connectSerialPort() {
  try {
    // Request user to select a serial port
    const port = await navigator.serial.requestPort();
    // Open the port with your serial device's baud rate
    await port.open({ baudRate: 9600 });

    // Read data continuously
    const reader = port.readable.getReader();
    while (true) {
      const { value, done } = await reader.read();
      if (done) break;
      const receivedData = new TextDecoder().decode(value);
      console.log('Received serial data:', receivedData);
      document.getElementById('data-output').textContent = receivedData;
    }
  } catch (error) {
    console.error('Serial port error:', error);
  }
}

// Trigger connection with a button click
document.getElementById('connect-serial-btn').addEventListener('click', connectSerialPort);

Pros & Cons: #

• ✅ Eliminates the need for your serial-to-TCP proxy
• ✅ No extra tools needed
• ❌ Requires browser support (Chrome/Edge/Opera; Safari has partial support)
• ❌ User must manually select the serial port each time
• ❌ Needs a secure context (works for file:// in Chrome, but other browsers may require HTTPS/localhost)

Final Recommendation #

For maximum compatibility and ease of use, Option 2 (TCP-to-WebSocket bridge) is the way to go. It’s simple to set up, works across all modern browsers, and avoids the limitations of experimental APIs or direct serial access.

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