讲师中心 微信公众号
AI工具推荐 视频效率加速

javascript如何使用WebSocket_如何实现实时通信【教程】

夜萱姑娘_1247

夜萱姑娘_1247

发布时间:2026-01-23 10:03:51

|

430人浏览过

|

来源于php中文网

原创

WebSocket连接失败主因是服务端未启动、协议不匹配或浏览器拦截;需核对ws/wss协议、检查Network中101状态码、确保后端正确响应升级请求,并避免file://协议下使用。

javascript如何使用websocket_如何实现实时通信【教程】

WebSocket 连接失败的常见原因和检查点

直接 new WebSocket() 报错或连接立刻关闭,大概率不是代码写错了,而是服务端没起来、URL 协议不匹配,或者浏览器被拦截。先确认 ws:// 或 wss:// 和后端实际暴露的协议一致;本地开发时如果后端用 http://localhost:3000,前端却连 ws://127.0.0.1:8080,跨域+协议+端口全错,必然失败。

  • 检查浏览器控制台 Network 标签页里 WebSocket 请求的状态码:101 Switching Protocols 才算成功握手,否则看 Response Headers 有没有 Sec-WebSocket-Accept
  • 确保后端已正确响应 WebSocket 升级请求(比如 Node.js 的 ws 库需显式 server.handleUpgrade())
  • Chrome 浏览器在非 http:// 或 https:// 页面(如 file://)下会静默拒绝 ws:// 连接,必须走本地服务器

onmessage 回调里如何安全解析 JSON 数据

WebSocket.onmessage 接收到的 event.data 是 string 或 Blob,不是自动 JSON 解析后的对象。直接 JSON.parse(event.data) 可能抛错,尤其当服务端发来非 JSON 字符串(比如心跳 ping/pong、二进制帧、调试日志)时。

  • 始终用 try...catch 包裹 JSON.parse(),避免整个回调崩溃
  • 提前判断 typeof event.data === 'string',跳过 Blob 或 ArrayBuffer 类型(除非你明确要处理二进制)
  • 服务端最好统一加个 type 字段,比如 { "type": "message", "payload": {...} },前端按 type 分发逻辑,而不是硬解析所有 data

如何避免重复连接和自动重连失控

页面刷新、网络抖动、服务端重启都会导致连接断开。但 onclose 里直接 new WebSocket() 会引发无限重连风暴,尤其配合未加延迟的递归调用。

java-api-doc-generator
java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载
  • 用布尔标志位(如 let isConnecting = false)防止 onclose 多次触发新建实例
  • 重连前加指数退避:第一次等 1s,第二次 2s,第三次 4s……上限建议 30s,避免压垮服务端
  • 限制最大重连次数(比如 5 次),之后应提示用户“连接异常”,并提供手动重试按钮(reconnectBtn.addEventListener('click', initWS))
  • 在 onopen 中清除之前的重连定时器,避免旧定时器在新连接建立后仍执行

发送消息前必须检查 readyState

WebSocket.readyState 不是永远等于 WebSocket.OPEN。页面刚加载时是 0(CONNECTING),断连瞬间变成 0 或 3(CLOSED),此时调用 send() 会直接报错 InvalidStateError,且不会进入 onerror。

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

  • 每次 send() 前必须判断:if (ws.readyState === WebSocket.OPEN) { ws.send(...) }
  • 如果处于 CONNECTING(0)状态,可把消息暂存到队列(pendingMessages.push(msg)),并在 onopen 中批量发送
  • 不要依赖 onerror 捕获 send 失败——它只对底层传输错误有效,readyState 不对时根本不会触发
WebSocket 的核心复杂点不在 API 本身,而在于状态管理:连接中、重连中、已关闭、正在发送……这些状态之间切换频繁,稍不留神就会出现“明明连上了却收不到消息”或“疯狂创建新连接却不销毁旧实例”。真实项目里,建议封装一个带状态机的 WebSocketClient 类,而不是裸用原生 API。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2195

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3442

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1156

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3939

2025.09.10

chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2806

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

5579

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

3987

2026.03.24

string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

6719

2023.08.02

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

100

2026.10.22

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn