如何利用 Direct Sockets API 实验性地建立浏览器端原始 TCP/UDP 异步连接-js教程-PHP中文网

Direct Sockets API目前仅在Chrome 112+等新版Chromium浏览器中通过实验性flag启用，需HTTPS/localhost环境、用户手动授权，且不支持服务端监听、UDP多播及DNS控制。

如何利用 direct sockets api 实验性地建立浏览器端原始 tcp/udp 异步连接

目前无法在标准浏览器环境中直接用 JavaScript 建立原始 TCP/UDP 连接——Direct Sockets API 尚未正式落地，仍处于实验性阶段，仅在部分 Chromium 版本（如 Chrome 112+）中通过 flag 启用，且必须满足严格前提。

启用前提与环境准备

想尝试该能力，需同时满足以下三点：

使用 Chrome 或 Edge 最新版（≥112），并在地址栏输入 chrome://flags/#enable-experimental-web-platform-features，将该 flag 设为 Enabled，重启浏览器
页面必须运行在 安全上下文 下：即 HTTPS 协议，或 localhost（含 127.0.0.1、[::1]）
首次调用前需用户主动授权：调用 TCPSocket.open() 或 UDPSocket.bind() 时，浏览器会弹出权限提示，用户点击“允许”后才可继续

Shared Worker 中的典型用法

Direct Sockets API 的设计初衷之一，就是支持跨标签页复用连接。推荐将 socket 管理逻辑放在 Shared Worker 中，避免多个页面重复建连：

仿UC浏览器官方网站全屏jQuery幻灯片

下载

在 worker 脚本中创建 TCPSocket 实例，监听 connect、data、close 等事件
通过 postMessage 将接收的数据广播给所有连接的页面；页面则用 port.postMessage({command: 'send', data: ...}) 发送指令
连接状态（如是否已连、远程地址）由 Worker 统一维护，各页面无需感知底层细节

基础 TCP 连接示例（主页面侧）

以下代码仅作概念演示，实际运行前请确认 flag 已开启且页面在 localhost：

// 检查 API 是否可用
if ('TCPSocket' in self) {
  const socket = new TCPSocket();
  
  socket.addEventListener('connect', () => {
    console.log('TCP 连接已建立');
    socket.send(new TextEncoder().encode('HELLO'));
  });

  socket.addEventListener('data', event => {
    const text = new TextDecoder().decode(event.data);
    console.log('收到:', text);
  });

  socket.addEventListener('close', () => console.log('连接关闭'));

  // 触发连接（会触发权限弹窗）
  socket.open({ hostname: 'echo.example.com', port: 7 });
}