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

uni-app WebSocket使用 uni-app如何实现长连接

酷雪小哥_3982

酷雪小哥_3982

发布时间:2026-03-21 18:47:33

|

269人浏览过

|

来源于php中文网

原创

uni-app中应使用uni.connectSocket创建WebSocket连接,因其跨端兼容;需传wss://协议URL、onReady后调用、encodeURIComponent查询参数、onSocketOpen后发送消息、手动实现心跳与重连,并全局管理单实例。

uni-app websocket使用 uni-app如何实现长连接

uni-app里怎么创建WebSocket连接

直接用uni.connectSocket,不是new WebSocket()——后者在App端和小程序端根本不可用,H5端虽然能跑但会破坏跨端一致性。

关键点在于:uni-app的WebSocket是封装过的统一API,所有平台走同一套逻辑,但行为细节有差异。

  • uni.connectSocket必须传url,且协议必须是wss://(小程序强制要求),ws://只在H5调试时可能临时通,上线必炸
  • 不能在onLoad里立刻调,建议等onReady之后再连,尤其App端对页面生命周期敏感
  • URL里别带查询参数?错。可以带,但得encodeURIComponent处理,比如?token=abc+def不编码会断连

连接成功后收发消息要注意什么

别直接在uni.connectSocket回调里写send——连接刚建立,底层通道未必就绪,大概率报fail websocket not connected。

正确做法是等uni.onSocketOpen触发后再发第一条消息。收消息用uni.onSocketMessage,注意它只传event.data,类型可能是String或ArrayBuffer,取决于服务端发的是文本还是二进制。

  • 发送文本用uni.sendSocketMessage({ data: 'xxx' }),data必须是字符串或ArrayBuffer,传对象会静默失败
  • 想发JSON?自己JSON.stringify(),服务端也得对应解析
  • H5端支持binaryType: 'arraybuffer',但App和小程序不认这个配置,统一按服务端返回类型处理

断网、切后台、小程序被回收时怎么保活

uni-app没自动重连。掉线不会自动恢复,得自己监听并手动重试。

核心监听点就三个:uni.onSocketError(连接失败)、uni.onSocketClose(主动或被动断开)、App/小程序的生命周期事件(如onHide)。

  • 小程序切后台时,微信会主动关闭WebSocket,onSocketClose会触发,但event.code是1001,不是错误,别当成异常打日志
  • App端切到后台,iOS会很快断连,Android稍长,但都不可靠,onHide里建议uni.closeSocket()再清状态,避免残留
  • 重连别用setTimeout硬等,加个指数退避:第一次1s,第二次3s,第三次9s……最多试5次,否则用户切回来卡在“重连中”

多个页面都要用WebSocket怎么办

别每个页面都新建连接。一个App同一时刻只需要一个WebSocket实例,多连会冲垮服务端,也浪费资源。

推荐用全局管理:在main.js或单独的socket.js里初始化并暴露send/onMessage方法,各页面通过import或uni.$emit通信。

  • 不要把socketTask存在Vue.prototype上,App端容易内存泄漏;存到getApp().globalData更稳妥
  • 页面卸载前(onUnload)别closeSocket,除非是登出场景;否则其他页面还等着收消息
  • 如果某页面需要独占连接(比如独立IM模块),至少加个命名空间字段在每条消息里,服务端做路由,别真开第二个连接

最麻烦的其实是服务端心跳——uni-app没有内置心跳机制,ping/pong得自己定时sendSocketMessage,而且得等对方回ack才算有效。很多问题表面是“断连”,实际是服务端单方面踢了没心跳的客户端。

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

热门AI工具

更多
蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

豆包大模型

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

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

DeepSeek

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

WorkBuddy

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

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2563

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5523

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6550

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

6178

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

883

2024.05.22

C语言变量命名
C语言变量命名

c语言变量名规则是:1、变量名以英文字母开头;2、变量名中的字母是区分大小写的;3、变量名不能是关键字;4、变量名中不能包含空格、标点符号和类型说明符。php中文网还提供c语言变量的相关下载、相关课程等内容,供大家免费下载使用。

3269

2023.06.20

c语言入门自学零基础
c语言入门自学零基础

C语言是当代人学习及生活中的必备基础知识,应用十分广泛,本专题为大家c语言入门自学零基础的相关文章,以及相关课程,感兴趣的朋友千万不要错过了。

2348

2023.07.25

c语言运算符的优先级顺序
c语言运算符的优先级顺序

c语言运算符的优先级顺序是括号运算符 > 一元运算符 > 算术运算符 > 移位运算符 > 关系运算符 > 位运算符 > 逻辑运算符 > 赋值运算符 > 逗号运算符。本专题为大家提供c语言运算符相关的各种文章、以及下载和课程。

1280

2023.08.02

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

80

2026.10.16

热门下载

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

精品课程

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

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