如何在HTML中通过WebSocket的new WebSocket()建立连接指定服务端地址-html教程-PHP中文网

websocket构造函数的url必须为ws://或wss://协议前缀，如new websocket("ws://localhost:8080")；省略协议会抛domexception错误，且https页面禁止使用ws://。

如何在html中通过websocket的new websocket()建立连接指定服务端地址

WebSocket 构造函数的 URL 格式必须带协议前缀

直接写 new WebSocket("localhost:8080") 会报错 DOMException: The URL's scheme must be either 'ws' or 'wss'。浏览器强制要求显式声明协议，不能省略。

正确写法必须是：

new WebSocket("ws://localhost:8080")（开发环境未启用 TLS）
new WebSocket("wss://api.example.com/ws")（生产环境，走 HTTPS 对应的 WSS）

注意：wss 不是 “WebSocket over SSL” 的缩写，而是强制要求服务端证书有效、且与域名匹配；用 IP 地址 + wss（如 wss://192.168.1.100:8080）在现代浏览器中大概率失败，因证书无法验证。

URL 中的路径和查询参数会被服务端收到

WebSocket 连接 URL 的路径部分（如 /chat）和查询参数（如 ?token=abc123&user_id=42）会原样传给服务端，常用于鉴权或路由分发。

示例：

const ws = new WebSocket("ws://localhost:3000/api/v1/realtime?auth_token=7f8a&session=xyz");

服务端（如 Node.js 的 ws 库）可通过 req.url 解析出完整路径和 query，但注意：& 在 HTML 字符串中要写成 &，否则解析出错；在 JS 字符串里直接写 & 即可。

常见陷阱：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

中文或特殊字符未 encodeURIComponent()，导致服务端解析失败
把 token 放在 URL 里却没设有效期，造成泄露风险
路径层级过深（如 /a/b/c/d/ws），某些反向代理（如 Nginx）默认不转发，需额外配置 location 规则

连接失败时不会抛异常，而是触发 `onerror` 和 `onclose`

new WebSocket(url) 本身同步返回一个实例，无论服务端是否可达。错误发生在后续握手阶段，因此不能用 try/catch 捕获连接失败。

必须监听事件判断状态：

const ws = new WebSocket("ws://localhost:8080");<br>ws.onerror = () => console.error("WebSocket connection failed");<br>ws.onclose = (e) => console.log("Closed with code:", e.code, "reason:", e.reason);<br>ws.onopen = () => console.log("Connected successfully");

典型失败原因：

服务端未运行或端口被防火墙拦截 → onerror 后快速触发 onclose，e.code === 1006
跨域但服务端未设置 Access-Control-Allow-Origin → 控制台报 CORS 错误，onerror 触发，但 onclose 可能不触发
URL 协议或域名拼写错误 → 表现同第一条，但控制台可能有更明确的 DNS 或连接拒绝提示