Direct Sockets API目前仅在Chrome 112+等新版Chromium浏览器中通过实验性flag启用，需HTTPS/localhost环境、用户手动授权，且不支持服务端监听、UDP多播及DNS控制。
目前无法在标准浏览器环境中直接用 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 中，避免多个页面重复建连：
- 在 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 });
}
关键限制与注意事项
这不是一个开箱即用的通用能力，使用中需特别注意：
- 不支持服务端监听：
TCPServerSocket仅限本地开发调试，生产环境不可用于暴露公网服务 - 无 DNS 解析控制：hostname 必须是合法域名或 IP，不能绕过浏览器 DNS 缓存机制
- UDP 不支持多播/广播，仅支持单播通信；bind 端口范围受限（通常为 8000–65535）
- 连接失败不会抛异常，而是触发
error事件，需显式监听并处理
