uni-app 封装 websocket 并且监听心跳机制

这篇具有很好参考价值的文章主要介绍了uni-app 封装 websocket 并且监听心跳机制。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

代码

  1. 新建 socket.js , 将以下代码复制进去 ,向外暴露。

import api from '@/common/js/config.js' // 接口Api,图片地址等等配置,可根据自身情况引入,也可以直接在下面url填入你的 webSocket连接地址
class socketIO {
    constructor(data, time, url) {
        this.socketTask = null
        this.is_open_socket = false //避免重复连接
        this.url = url ? url : api.websocketUrl  //连接地址
        this.data = data ? data : null
        this.connectNum = 1 // 重连次数
        this.traderDetailIndex = 100 // traderDetailIndex ==2 重连
        this.accountStateIndex = 100 // traderDetailIndex ==1 重连
        this.followFlake = false // traderDetailIndex == true 重连
        //心跳检测
        this.timeout = time ? time : 15000 //多少秒执行检测
        this.heartbeatInterval = null //检测服务器端是否还活着
        this.reconnectTimeOut = null //重连之后多久再次重连
    }
 
    // 进入这个页面的时候创建websocket连接【整个页面随时使用】
    connectSocketInit(data) {
        this.data = data
        this.socketTask = uni.connectSocket({
            url: this.url,
            success: () => {
                console.log("正准备建立websocket中...");
                // 返回实例
                return this.socketTask
            },
        });
        this.socketTask.onOpen((res) => {
            this.connectNum = 1
            console.log("WebSocket连接正常!");
            this.send(data)
            clearInterval(this.reconnectTimeOut)
            clearInterval(this.heartbeatInterval)
            this.is_open_socket = true;
            this.start();
            // 注:只有连接正常打开中 ,才能正常收到消息
            this.socketTask.onMessage((e) => {
                // 字符串转json
                let res = JSON.parse(e.data);
                console.log("res---------->", res) // 这里 查看 推送过来的消息
                if (res.data) {
                    uni.$emit('getPositonsOrder', res); 
                }
            });
        })
        // 监听连接失败,这里代码我注释掉的原因是因为如果服务器关闭后,和下面的onclose方法一起发起重连操作,这样会导致重复连接
        uni.onSocketError((res) => {
            console.log('WebSocket连接打开失败,请检查!');
            this.socketTask = null
            this.is_open_socket = false;
            clearInterval(this.heartbeatInterval)
            clearInterval(this.reconnectTimeOut)
            uni.$off('getPositonsOrder')
            if (this.connectNum < 6) {
                uni.showToast({
                    title: `WebSocket连接失败,正尝试第${this.connectNum}次连接`,
                    icon: "none"
                })
                this.reconnect();
                this.connectNum += 1
            } else {
                uni.$emit('connectError');
                this.connectNum = 1
            }
 
        });
        // 这里仅是事件监听【如果socket关闭了会执行】
        this.socketTask.onClose(() => {
            console.log("已经被关闭了-------")
            clearInterval(this.heartbeatInterval)
            clearInterval(this.reconnectTimeOut)
            this.is_open_socket = false;
            this.socketTask = null
            uni.$off('getPositonsOrder')
            if (this.connectNum < 6) {
                this.reconnect();
            } else {
                uni.$emit('connectError');
                this.connectNum = 1
            }
 
        })
    }
    // 主动关闭socket连接
    Close() {
        if (!this.is_open_socket) {
            return
        }
        this.socketTask.close({
            success() {
                uni.showToast({
                    title: 'SocketTask 关闭成功',
                    icon: "none"
                });
            }
        });
    }
    //发送消息
    send(data) {
        console.log("data---------->", data);
        // 注:只有连接正常打开中 ,才能正常成功发送消息
        if (this.socketTask) {
            this.socketTask.send({
                data: JSON.stringify(data),
                async success() {
                    console.log("消息发送成功");
                },
            });
        }
    }
    //开启心跳检测
    start() {
        this.heartbeatInterval = setInterval(() => {
            this.send({
                "traderid": 10260,
                "type": "Ping"
            });
        }, this.timeout)
    }
    //重新连接
    reconnect() {
        //停止发送心跳
        clearInterval(this.heartbeatInterval)
        //如果不是人为关闭的话,进行重连
        if (!this.is_open_socket && (this.traderDetailIndex == 2 || this.accountStateIndex == 0 || this
            .followFlake)) {
            this.reconnectTimeOut = setInterval(() => {
                this.connectSocketInit(this.data);
            }, 5000)
        }
    }
}
module.exports = socketIO
  1. 在入口文件中 将 socketIO 挂载在 Vue 原型上 , 也可以按需引入置顶页面 。

import socketIO from '@/common/js/scoket.js'
Vue.prototype.$socketIo = new socketIO()
  1. 在需要用到webSocket的页面中使用如下方法(可根据自身业务需求进行整改)

scoketClose() {
    this.$socketIo.connectNum = 1
    const data = {
        "value1": "demo1"
        "value2": "demo2"
    }
    this.$socketIo.send(data) // 这是给后端发送特定数据 关闭推送
    this.$socketIo.Close() // 主动 关闭连接 , 不会重连
},
 
getWebsocketData() {
    // 要发送的数据包
    const data = {
        "value": "value1",
        "type": "type1"
    }
    // 打开连接
    this.$socketIo.connectSocketInit(data)
    // 接收数据
    uni.$on("getPositonsOrder", (res) => {
        this.connect = true
        const {
            Code,
            data
        } = res
        if (Code == xxxx) {
            // 根据后端传过来的数据进行 业务编写。。。
        } else {
           
        }
    })
    // 错误时做些什么
    uni.$on("connectError", () => {
        this.connect = false
        this.scoketError = true
    })
}
  1. 离开页面,记得断开连接。文章来源地址https://www.toymoban.com/news/detail-507953.html

onUnload() {
    this.scoketClose()
    this.$socketIo.traderDetailIndex = 100 // 初始化 tabIndex 
}

到了这里,关于uni-app 封装 websocket 并且监听心跳机制的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app:监听数据变化(watch监听、@input事件)

    方法一:文本框监听,使用 @input 事件 方法二:使用watch监听属性(很好解决了文本框中数据非手输时监听不到数据变化)

    2024年02月10日
    浏览(41)
  • uni-app: onBackPress() 监听页面返回 - 更新数据

    生命周期 - onBackPress() 监听页面返回 函数名 说明 平台差异说明 onBackPress 监听页面返回 ,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:onBackPress 详解。支付宝小程序只有真机

    2024年02月11日
    浏览(58)
  • uni-app - 实现监听路由跳转,每次跳转的时候都能触发的事件(当页面路由发生变化时,触发一个封装好的请求接口或普通功能函数)全端兼容,高效简洁无 BUG 详细教程

    当用户点击任意页面时(路由发生变化),自动执行一个函数,调用接口请求数据、做任何事情。 由于涉及到全部页面,必须采用统一的入口和统一的执行函数,不可能一个页面写一次!! 基于这个需求,本文实现了 全局统一监听路由跳转,当页面发生变化时自动触发某个

    2024年02月11日
    浏览(85)
  • uni-app使用websocket

    原文链接:https://blog.csdn.net/weixin_43343144/article/details/92998467

    2024年02月07日
    浏览(42)
  • websocket和uni-app里使用websocket

    特点: 1、浏览器发送请求时,浏览器和服务器会建立一个连接。完成请求和响应。在http1.0之前,每次请求响应完毕后,会立即断开连接。在http1.1之后,当前网页的所有请求响应完毕后,才断开连接。 2、这样就意味着,服务器并不清楚,某次连接和以前的哪个连接来自于同

    2024年02月11日
    浏览(36)
  • uni-app组件封装基本知识

            小写字母,单词用“ - ”链接例如(bj-item ) , 目录名称和文件名保持一致,官方默认把“ uni- ”开头的 组件全局挂载,不是这种格式的组件需要局部挂载。 1 、“ uni- ”开头的组件官方默认全局挂载  2、组件使用 随着Hbuilder的升级,现在组件统一放到uni_module

    2023年04月08日
    浏览(43)
  • uni-app封装的request请求

    config.js    main.js 页面使用:

    2024年02月12日
    浏览(36)
  • uni-app/vue封装车牌选择器

    先看下效果如下: 代码如下: 父组件: 子组件:(代码较长,css部分没有提供)

    2024年01月18日
    浏览(51)
  • uni-app项目封装http请求和不封装请求

    在页面文件中 该请求的封装方式适用于_gt、_mt类型的请求,应该也可以做到其他类型; 注意看代码中的注释 在uilt/api.js中 在uilt/http.js中 在页面文件中 注意看代码中的注释;不封装需要使用 uni.request这个API来进行请求

    2024年02月13日
    浏览(51)
  • uni-app + SpringBoot +stomp 支持websocket 打包app

    websocket 协议是在http 协议的基础上的升级,通过一次http 请求建立长连接,转而变为TCP 的全双工通信;而http 协议是一问一答的请求方式方式。 websocket-uni.js

    2024年02月11日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包