当前位置：首页 > article >正文

uniapp 使用 websocket

article 2024/11/2 22:14:14

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

传送门：WebScoket 使用教程

直接看代码：

（1）先创建一个ws的连接。

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

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列表。

connectSocketInit(mid) {
    ...
    var prmsg = `更具自己项目需要绑定发送的数据`;
    this.socketTask.onOpen((res) => { //发送消息
        this.socketTask.send({
            data: prmsg,
		});
    })
}

（3）接收并处理消息

使用 onMessage 监听器来接收从服务器发来的消息。

connectSocketInit(mid) {
    this.socketTask.onOpen((res) => { //发送消息
        ...
        this.socketTask.onMessage((res) => {
		    let evtObj = JSON.parse(res.data);
			console.log('ws推送', evtObj)
        })
    }}
        
}

（4）关闭连接处理

使用 onClose 监听器来处理连接关闭的情况，当连接关闭时会在控制台输出 "ws已经被关闭"。

connectSocketInit(mid) {
    ...
    // socket关闭执行
	this.socketTask.onClose(() => {
		console.log("ws已经被关闭")
	})
},
closeSocket() { //关闭链接
    this.socketTask.close({
		success(res) {
			console.log("关闭成功", res)
		},
		fail(err) {
			console.log("关闭失败", err)
		}
	})
},

注意：