HTML中使用WebSocket实现实时双向通信的前端代码-html教程-PHP中文网

securityerror主因是https页面中使用ws://协议或ie下localhost域名不被信任，networkerror多因后端未启动、端口未监听或代理未透传upgrade头；须统一用wss://、检查readystate、监听onerror与onclose并加try-catch解析消息。

html中使用websocket实现实时双向通信的前端代码

WebSocket连接建立时常见的`SecurityError`和`NetworkError`

浏览器只允许在安全上下文中使用ws://（非加密）协议——但现代浏览器实际已普遍禁用非加密ws://，尤其当页面通过https://加载时。直接写new WebSocket("ws://localhost:8080")会立刻抛出SecurityError。

正确做法是：后端必须提供wss://端点（即WebSocket over TLS），前端统一用wss://初始化。开发阶段若没配证书，可临时用http://页面配ws://（仅限localhost），但上线前必须切换。

检查当前页面协议：window.location.protocol 是 "https:"？那WebSocket构造函数必须用 "wss://"
Chrome 控制台报 net::ERR_CONNECTION_REFUSED？先确认后端服务已启动且监听了对应端口（如 0.0.0.0:8080，而非仅 127.0.0.1）
Firefox 报 NS_ERROR_UNKNOWN_PROTOCOL？说明 URL 字符串拼错了，比如多写了空格或漏了冒号

`onmessage`回调里解析JSON数据的必要防护

WebSocket 传来的 event.data 可能是string、Blob 或 ArrayBuffer，取决于服务端发送方式。多数场景下服务端发的是 JSON 字符串，但前端不能假设它一定合法。

常见错误是直接写 JSON.parse(event.data)，一旦后端发来非JSON（如心跳包"ping"、二进制帧、或格式错误字符串），就会触发SyntaxError并中断后续逻辑。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

始终用 try...catch 包裹 JSON.parse()
检查 typeof event.data === "string" 再解析，避免对 Blob 直接解析

简单示例：

socket.onmessage = function(event) {
  if (typeof event.data !== "string") return;
  try {
    const data = JSON.parse(event.data);
    console.log("收到消息:", data);
  } catch (e) {
    console.warn("无法解析消息:", event.data);
  }
};