uniapp 使用 websocket

原理和vue使用是一样的,这里就不多说了,可以去看我之前发的 websocket 的使用

传送门:WebScoket 使用教程

直接看代码:

(1)先创建一个ws的连接。

在各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。

javascript 复制代码
data() {
    return {
        socketTask: '',
        ...
    }
},
methods: {
    connectSocketInit(mid){
        // 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
        this.socketTask = uni.connectSocket({
            url: `wss://ws的地址`,
		    success(data) {
		        console.log("websocket连接成功lolo ");
		    },
        });
    }
(2)发送初始订阅消息
  • 当WebSocket连接打开时 (onOpen 事件),将发送一条JSON格式的消息给服务器。
  • 消息内容包括客户端信息、意图、客户端ID、组织ID和频道ID列表。
javascript 复制代码
connectSocketInit(mid) {
    ...
    var prmsg = `更具自己项目需要绑定发送的数据`;
    this.socketTask.onOpen((res) => { //发送消息
        this.socketTask.send({
            data: prmsg,
		});
    })
}
(3)接收并处理消息
  • 使用 onMessage 监听器来接收从服务器发来的消息。
javascript 复制代码
connectSocketInit(mid) {
    this.socketTask.onOpen((res) => { //发送消息
        ...
        this.socketTask.onMessage((res) => {
		    let evtObj = JSON.parse(res.data);
			console.log('ws推送', evtObj)
        })
    }}
        
}
(4)关闭连接处理
  • 使用 onClose 监听器来处理连接关闭的情况,当连接关闭时会在控制台输出 "ws已经被关闭"。
javascript 复制代码
connectSocketInit(mid) {
    ...
    // socket关闭执行
	this.socketTask.onClose(() => {
		console.log("ws已经被关闭")
	})
},
closeSocket() { //关闭链接
    this.socketTask.close({
		success(res) {
			console.log("关闭成功", res)
		},
		fail(err) {
			console.log("关闭失败", err)
		}
	})
},

注意:

  • 确保在适当的地方调用 closeSocket() 来释放资源。
  • 处理好错误和异常情况,保证用户体验。
  • 安全性考虑:确保所有传输的数据都是加密的,并且只向授权的用户展示敏感信息

这样 uniapp 中 webSocket 就能使用了,其他可参照官网进行开发

相关推荐
weixin_638303111 小时前
uniapp组合式和选项式
javascript·vue.js·uni-app
木子啊4 小时前
UniApp Base64上传终极解决方案
uni-app·base64·base64转图片·base64上传
2501_915918415 小时前
Wireshark、Fiddler、Charles抓包工具详细使用指南
android·ios·小程序·https·uni-app·iphone·webview
阿宇爱吃鱼5 小时前
uniapp input输入框,限制金额输入格式
前端·javascript·uni-app
一只程序熊5 小时前
uniapp x 新手入门指南
uni-app
攻城狮7号14 小时前
不懂代码也能造?TRAE+GLM-4.6 手把手教你搭心理咨询智能客服小程序
python·小程序·uni-app·vue·trae·glm我的编程搭子·glm-4.6
QQ5885019816 小时前
Python_uniapp-心理健康测评服务微信小程序的设计与实现
python·微信小程序·uni-app
三天两行代码16 小时前
uniapp 微信小程序实现ai问答功能流式输出makdown解析实现打字机效果(附源码)
微信小程序·小程序·uni-app
三天不学习16 小时前
从开发到上架:手把手教你将uni-app微信小程序打包发布(全网最全指南)
微信小程序·uni-app·notepad++
木子啊18 小时前
UniApp原生Office预览组件上线
uni-app·在线预览·预览文件·office预览文件