0

0

JavaScriptWebSocket如何建立双向通信【教程】

夢幻星辰

夢幻星辰

发布时间:2026-01-21 19:19:21

|

807人浏览过

|

来源于php中文网

原创

WebSocket连接失败常见原因包括服务端未启动、协议/端口错误、连接被拒绝;定位需检查URL协议、服务状态、防火墙、反向代理配置,并利用Chrome Network→WS调试帧收发。

javascriptwebsocket如何建立双向通信【教程】

WebSocket连接失败的常见报错和定位方法

直接 new WebSocket() 却得不到 open 事件?大概率是服务端没启动,或 URL 协议/端口不匹配。浏览器控制台里看到 Failed to construct 'WebSocket': The URL's scheme must be either 'ws' or 'wss',说明你用了 http:// 或漏写了协议前缀。

真实开发中更常遇到的是 WebSocket connection to 'ws://localhost:8080' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED——这代表客户端连得上域名,但目标端口没监听,检查后端是否已运行、防火墙是否放行、反向代理(如 Nginx)是否把 Upgrade 头透传了。

  • ws:// 用于开发环境,wss:// 是生产必需,HTTP/2 环境下不能混用
  • Chrome 控制台的 Network → WS 标签页可查看帧收发详情,右键某条连接选 “Inspect” 能看到原始消息
  • 服务端若返回非 101 状态码(比如 400),浏览器不会触发 onerror,而是直接关闭并触发 onclose,错误码为 1006

发送消息前必须确认 readyState 是 OPEN

WebSocket.readyState 有四个值:0(CONNECTING)、1(OPEN)、2(CLOSING)、3(CLOSED)。很多人在 onopen 回调外就调用 send(),结果抛出 InvalidStateError: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state

安全做法不是靠延时,而是封装一个带状态检查的发送函数:

立即学习Java免费学习笔记(深入)”;

function safeSend(ws, data) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(data);
  } else if (ws.readyState === WebSocket.CONNECTING) {
    ws.addEventListener('open', () => ws.send(data), { once: true });
  }
}
  • 不要在 onmessage 里反复调用 send() 而不检查状态,重连逻辑未就绪时容易堆积失败
  • JSON.stringify() 后再 send() 是常规操作,但注意有些服务端要求二进制帧(ArrayBuffer),此时需设 ws.binaryType = 'arraybuffer'

如何正确处理断线与自动重连

网络抖动、服务重启、Nginx 默认 60s 超时都会导致连接中断。仅监听 onclose 不够——它不区分是主动关闭还是异常断开。关键看 event.codeevent.reason

j2me3D游戏开发简单教程 中文WORD版
j2me3D游戏开发简单教程 中文WORD版

本文档主要讲述的是j2me3D游戏开发简单教程; 如今,3D图形几乎是任何一部游戏的关键部分,甚至一些应用程序也通过用3D形式来描述信息而获得了成功。如前文中所述,以立即模式和手工编码建立所有的3D对象的方式进行开发速度很慢且很复杂。应用程序中多边形的所有角点必须在数组中独立编码。在JSR 184中,这称为立即模式。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看

下载
  • code 1000 表示正常关闭;1006 是异常关闭(如服务宕机);1011 通常是服务端内部错误
  • 不要在 onclose 里立即重连,先加个退避延迟(如 1s → 2s → 4s),避免雪崩式重连请求压垮服务
  • 重连前务必 ws.close() 并置空引用,否则旧实例可能还在触发 onmessage 导致内存泄漏

简单重连逻辑示例:

let ws;
let reconnectDelay = 1000;

function connect() { ws = new WebSocket('wss://api.example.com/ws'); ws.onopen = () => { reconnectDelay = 1000; }; ws.onclose = () => { if (ws.readyState !== WebSocket.CLOSED) return; setTimeout(connect, reconnectDelay); reconnectDelay = Math.min(reconnectDelay * 2, 30000); }; }

接收消息时怎么避免 JSON 解析崩溃

onmessageevent.data 可能是 stringArrayBufferBlob,取决于服务端发什么类型。如果服务端发的是纯文本但偶尔夹杂乱码,或前端误当 JSON 解析,就会触发 SyntaxError: Unexpected token

  • 始终用 try/catch 包裹 JSON.parse(),不要假设每次都是合法 JSON
  • 服务端应统一约定消息结构,例如外层用 { type: 'chat', payload: {...} },前端先判 type 再分发处理,而不是每个地方都硬解析
  • 如果服务端支持,可在握手阶段协商子协议(new WebSocket(url, ['json-v1'])),但这只是语义标记,不改变实际传输格式

解析防护示例:

ws.onmessage = (event) => {
  if (typeof event.data !== 'string') return;
  try {
    const msg = JSON.parse(event.data);
    handleMessage(msg);
  } catch (e) {
    console.warn('Invalid JSON received:', event.data);
  }
};

复杂业务里,WebSocket 往往要和认证、心跳、消息去重、离线缓存这些环节咬合,光连上只是起点。最容易被忽略的是服务端对并发连接数的限制和客户端未清理的事件监听器——它们不会立刻报错,但会在长时间运行后突然暴露。

相关专题

更多
nginx 重启
nginx 重启

nginx重启对于网站的运维来说是非常重要的,根据不同的需求,可以选择简单重启、平滑重启或定时重启等方式。本专题为大家提供nginx重启的相关的文章、下载、课程内容,供大家免费下载体验。

230

2023.07.27

nginx 配置详解
nginx 配置详解

Nginx的配置是指设置和调整Nginx服务器的行为和功能的过程。通过配置文件,可以定义虚拟主机、HTTP请求处理、反向代理、缓存和负载均衡等功能。Nginx的配置语法简洁而强大,允许管理员根据自己的需要进行灵活的调整。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

499

2023.08.04

nginx配置详解
nginx配置详解

NGINX与其他服务类似,因为它具有以特定格式编写的基于文本的配置文件。本专题为大家提供nginx配置相关的文章,大家可以免费学习。

498

2023.08.04

tomcat和nginx有哪些区别
tomcat和nginx有哪些区别

tomcat和nginx的区别:1、应用领域;2、性能;3、功能;4、配置;5、安全性;6、扩展性;7、部署复杂性;8、社区支持;9、成本;10、日志管理。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

227

2024.02.23

nginx报404怎么解决
nginx报404怎么解决

当访问 nginx 网页服务器时遇到 404 错误,表明服务器无法找到请求资源,可以通过以下步骤解决:1. 检查文件是否存在且路径正确;2. 检查文件权限并更改为 644 或 755;3. 检查 nginx 配置,确保根目录设置正确、没有冲突配置等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

334

2024.07.09

Nginx报404错误解决方法
Nginx报404错误解决方法

解决方法:只需要加上这段配置:try_files $uri $uri/ /index.html;即可。想了解更多Nginx的相关内容,可以阅读本专题下面的文章。

3510

2024.08.07

nginx部署php项目教程汇总
nginx部署php项目教程汇总

本专题整合了nginx部署php项目教程汇总,阅读专题下面的文章了解更多详细内容。

21

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

23

2026.01.13

Java编译相关教程合集
Java编译相关教程合集

本专题整合了Java编译相关教程,阅读专题下面的文章了解更多详细内容。

9

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号