Direct Sockets API 用法介绍

Direct Sockets API 是一项实验性 Web API，旨在允许网页应用在浏览器中直接与 TCP/UDP 套接字进行通信，从而绕过传统的 HTTP/HTTPS 协议栈。该 API 由 Chromium 团队提出并推进，目标是支持需要低延迟、高吞吐或自定义协议的 Web 应用（如 IoT 控制、游戏、远程桌面、P2P 等）。

⚠️ 注意：截至 2025 年 12 月，Direct Sockets API 仍处于 Origin Trial 阶段，仅在部分 Chromium 浏览器（如 Chrome 116+）中可用，并且需要显式启用实验性功能或注册 Origin Trial Token 才能使用。

一、背景与动机

传统 Web 应用只能通过以下方式与网络通信：

• HTTP/HTTPS（基于 TCP）
• WebSocket（全双工，但仍是基于 HTTP 升级）
• WebRTC（用于 P2P，但复杂度高）

这些方式无法满足某些场景需求，例如：

• 直接连接设备（如打印机、传感器）使用私有 TCP/UDP 协议
• 实现自定义二进制协议
• 降低协议开销（避免 HTTP 头等）

因此，Web 社区提出了 Direct Sockets API，让 Web 应用具备类似原生应用的底层网络能力。

二、核心功能

1. 支持的协议

• TCP 客户端（TCPSocket）
• UDP 客户端（UDPSocket）
• （未来可能支持服务器模式，但目前仅客户端）

2. 主要接口

navigator.sockets.tcp.open()

打开一个 TCP 连接：

const socket = await navigator.sockets.tcp.open({
  hostname: '192.168.1.100',
  port: 8080,
  // 可选：secure: true（启用 TLS）
});

返回一个 TCPSocket 对象，包含：

• readable：ReadableStream（用于接收数据）
• writable：WritableStream（用于发送数据）
• close()：关闭连接

navigator.sockets.udp.open()

打开一个 UDP 套接字：

const socket = await navigator.sockets.udp.open({
  remoteAddress: '192.168.1.100',
  remotePort: 5000,
  // localAddress / localPort 可选
});

返回 UDPSocket，包含：

• readable：接收 { data: ArrayBuffer, remoteAddress, remotePort }
• writable：写入 { data: ArrayBuffer, remoteAddress, remotePort }
• close()

三、安全模型

为防止滥用，Direct Sockets API 设计了严格的安全限制：

1. 仅限 HTTPS 上下文（localhost 除外）
2. 用户必须明确授权（通过权限提示）
3. 仅支持私有网络地址（如 192.168.x.x、10.x.x.x、127.0.0.1）——这是当前 Origin Trial 的主要限制
   • 无法连接公网 IP（如 8.8.8.8）或域名（除非解析为私有 IP）
4. 需要注册 Origin Trial Token（开发者需在 Google Origin Trials 申请）

🔒 未来正式发布时，可能会引入更细粒度的权限控制（如按 IP 范围授权）。

四、使用示例（TCP）

// 请求权限（可选，open() 会自动触发）
const permission = await navigator.permissions.query({
  name: 'direct-sockets'
});

if (permission.state === 'granted') {
  try {
    const tcpSocket = await navigator.sockets.tcp.open({
      hostname: '192.168.1.50',
      port: 9100 // 常见打印机端口
    });

    const reader = tcpSocket.readable.getReader();
    const writer = tcpSocket.writable.getWriter();

    // 发送数据
    await writer.write(new TextEncoder().encode('Hello Device\n'));

    // 接收响应
    const { value, done } = await reader.read();
    if (!done) {
      console.log('Received:', new TextDecoder().decode(value));
    }

    writer.close();
    reader.releaseLock();
    tcpSocket.close();
  } catch (err) {
    console.error('Socket error:', err);
  }
}

五、浏览器兼容性（截至 2025 年 12 月）

六、替代方案（若无法使用 Direct Sockets）

1. Web Serial API / WebUSB API：适用于连接本地串口或 USB 设备。
2. WebSocket + 代理服务器：通过后端中转 TCP/UDP 流量（增加延迟）。
3. Electron / Tauri / PWA + Native Plugin：打包为桌面应用以获得完整 socket 权限。

七、未来发展

• 支持监听（server 模式）
• 支持公网连接（需更强安全模型）
• 与 WebTransport 整合（基于 QUIC）
• 标准化（W3C 或 WHATWG）

参考资料

• Chrome Platform Status - Direct Sockets
• Explainer on GitHub
• Origin Trials Guide