Build a No‑Install, Cloud‑Synced Web Serial Assistant with Spring Boot 3 and the Web Serial API

Introduction

In embedded development and IoT, serial‑debug tools are essential, but developers often encounter three pain points:

Switching computers requires reinstalling serial‑debug software.

Driver installation is cumbersome and OS compatibility is poor.

Debug logs remain on the local machine, making remote diagnosis impossible.

Core technology: Web Serial API

For security reasons browsers historically could not access local hardware. With the Web Serial specification implemented in Chrome and Edge, a web page can now communicate directly with serial devices such as Arduino, STM32, or industrial sensors.

Architecture: Browser as cloud bridge

Because a cloud server cannot reach a COM port on a developer’s desk, the solution adopts a three‑layer architecture:

Local layer : serial device connects to the computer via USB.

Bridge layer (browser) : Web Serial API reads the serial stream and pushes it to the cloud through a WebSocket.

Cloud layer (Spring Boot 3) : backend receives, stores, and can send control commands back to the device.

Implementation

Frontend: one‑click connection

// Request user permission to access a serial port
const port = await navigator.serial.requestPort();
// Configure baud rate and open the port
await port.open({ baudRate: 115200 });

// Continuously read from the serial stream
const reader = port.readable.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  // Forward the Uint8Array to the cloud via WebSocket
  ws.send(value);
}

Backend: Spring Boot 3 real‑time relay

@Component
public class SerialWebSocketHandler extends TextWebSocketHandler {
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) {
        // Received serial data from the frontend
        String data = message.getPayload();
        System.out.println("云端收到设备日志: " + data);
        // Here you could store the data, analyze anomalies, or forward it to a monitoring dashboard
    }
}

Gotchas: “button disabled” after deployment

The Web Serial API requires a secure context. Access works on http://localhost during local development, but when the application is packaged as a JAR and deployed to a cloud server accessed via an IP address such as http://1.2.3.4, the browser treats the connection as insecure and disables the API.

Local development: http://localhost is allowed.

Deployed JAR accessed via plain HTTP: the API is blocked.

Solutions

Use HTTPS : configure an SSL certificate for the cloud address.

Temporary debugging : enable the Chrome flag unsafely-treat-insecure-origin-as-secure and whitelist the IP address.

Conclusion

The web‑based serial assistant demonstrates that browsers are gradually breaking sandbox limits and can be applied to industrial control and IoT scenarios. By combining Spring Boot 3 with WebSocket, you can easily achieve:

Remote diagnosis : support staff can view real‑time logs from remote devices.

Data to cloud : debugging data is stored in a cloud database for later AI analysis.

Zero deployment : new team members only need to open the web page to start debugging.

If you are interested in the source code or encounter HTTPS certificate configuration issues, feel free to leave a comment for further discussion.