uniapp开发小程序，WebSocket实现链接后端服务器发送接收消息

本文主要是介绍uniapp开发小程序，WebSocket实现链接后端服务器发送接收消息，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

 类似上图点击送礼显示弹幕，只要进入同一页面的人都可以看到弹幕，

主要实现用WebSocket链接后端服务器发送推送接收服务器消息实现，下面主要实现逻辑及部分代码，有不对之处请多多指点

1，拿到后端写的WebSocket链接地址，然后进行链接

data{

return {

//存储websoket（便以在其他地方使用）
socketTask: null,

//用于标识是否已经链接

isOpenSocket ：false,

}

}，

onLoad（）{

//进入页面执行链接方法

this.connectSocketInit()

}，

methods：{

// 进入这个页面的时候创建websocket连接【整个页面随时使用】
connectSocketInit() {
// 1连接地址
this.socketTask = uni.connectSocket({
     url: 'wss://192.168.110.189:9000/setque',//链接地址，仅参考
success: () => {//成功函数
}
})

//连接成功后向服务器发送消息
this.socketTask.onOpen((res) => {

　　//修改为true已连接
　　this.isOpenSocket = true;
　　console.log("WebSocket连接正常打开中...！");

       //进入页面链接成功向后段发送进入的通知其他在里面的接收服务器消息既可以看到有人进入
let messge = {

　　//0标识进入，1表示留言，2标识送礼等
　　code: 0,

　　//当前页面编号
　　museumNo: this.identifier,

　　//微信名称
　　realName: this.join.nickname,

　　//头像
　　avatar: this.join.avatar,

　　//类型
　　mournType: 2,
　　platformType: 0,
　　type: 0,
　　retry:this.isRetryConnect,

　　//弹幕内容
　　content: '进入页面!',
}
// 保存访客记录（记录保存到后端的方法）
　　this.saveOnleUserInfo(messge)

// 启动心跳任务（写好的一个方法）
　　this.handerHeartBeatTask()
//监听socket断开
　　uni.onSocketClose((res) => {
　　　　console.log('WebSocket 已关闭！', res);
　　　　this.progressBar=false

　　//判断心跳测试方法定时存在关闭定时器（当链接断开时不需要一直执行定时任务会影响性能）
　　if (this.heartBeatTask) {

　　　　//关闭心跳测试方法this.heartBeatTask
　　　　clearInterval(this.heartBeatTask)
　　}

　　if (!this.isCloseSocket) {
　　//断线重连（写好的一个方法）
　　this.retryConnect()
　　}

});

})

// 监听服务器消息
this.socketTask.onMessage((res) => {

　　console.log("收到服务器", res.data);

　　下面下就是将接收到的内容以弹幕的形式发出去......需求逻辑自己定

}）

// 监听服务器连接失败
this.socketTask.onError(() => {
　　//断线重连
　　this.retryConnect()
})

},

/*心跳测试(方法)*/
handerHeartBeatTask() {
　　if(this.heartBeatTask){
　　clearInterval(this.heartBeatTask)
}
this.heartBeatTask = setInterval(() => {
　　this.send(this.codes)
　　this.loading = false
　　console.log(this.loading,"发送心跳包", this.isOpenSocket);
}, 10000)

},

//断线重连(方法)
retryConnect() {
　　this.isOpenSocket = false;
　　this.isRetryConnect = true;
//断线5秒后自动重连
　　setTimeout(() => {
　　　　this.connectSocketInit()
　　}, 5000)

},

/*给websocket发送信息（方法）*/    messages：要向后端发送的消息，如发送留言，在点击发送按钮时将留言内容如->this.send(‘留言内容’) 这样传入send方法接收
send(messages) {
　　if (this.isOpenSocket) {
　　messages.platformType = "0"
　　this.socketTask.send({
　　　　data: JSON.stringify(messages),//内容转为json格式
　　})
　　}
},

/*离开页面关闭socket连接（方法）*/
closeSocket() {
　　if (this.isOpenSocket) {
　　　　this.socketTask.close({
　　　　success: () => {
　　　　　　this.isOpenSocket = false
　　　　　　this.isRetryConnect = false
　　　　　　this.isCloseSocket = true
　　　　}
　　})
　　}
},

}，

这个是本人在上线项目使用的，项目已经上线一切运行正常，如有不足之处请多多指教

这篇关于uniapp开发小程序，WebSocket实现链接后端服务器发送接收消息的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！