uni-app使用websocket（封装、心跳检测）

黑森林里的金刚

已于 2023-03-14 10:08:08 修改

阅读量201

点赞数

分类专栏：前端VUE 文章标签：前端 Powered by 金山文档

于 2023-03-03 10:21:43 首次发布

本文链接：https://blog.csdn.net/m0_56561432/article/details/129314675

版权

前端VUE 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章介绍了一个用于创建和管理WebSocket连接的js类，包括初始化连接、心跳检测、错误处理、消息发送和重连功能。适用于uni-app框架，支持单页面和全局调用。在不同环境（测试或生产）下需注意使用ws或wss协议。

摘要由CSDN通过智能技术生成

封装websocket

创建一个websocket.js文件

class websocketUtil {
    constructor(url, time) {
        this.is_open_socket = false //避免重复连接
        this.url = url //地址
        this.data = null
        //心跳检测
        this.timeout= time //多少秒执行检测
        this.heartbeatInterval= null //检测服务器端是否还活着
        this.reconnectTimeOut= null //重连之后多久再次重连

        try {
            return this.connectSocketInit()
        } catch (e) {
            console.log('catch');
            this.is_open_socket = false
            this.reconnect();
        }
    }

    // 进入这个页面的时候创建websocket连接【整个页面随时使用】
    connectSocketInit() {
        this.socketTask = uni.connectSocket({
            url: this.url,
            success:()=>{
                console.log("正准备建立websocket中...");
                // 返回实例
                return this.socketTask
            },
        });
        this.socketTask.onOpen((res) => {
            console.log("WebSocket连接正常！");
            clearTimeout(this.reconnectTimeOut)
            clearTimeout(this.heartbeatInterval)
            this.is_open_socket = true;
            this.start();
            // 注：只有连接正常打开中 ，才能正常收到消息
            this.socketTask.onMessage((res) => {
                console.log(res.data)
            });
        })
        // 监听连接失败，这里代码我注释掉的原因是因为如果服务器关闭后，和下面的onclose方法一起发起重连操作，这样会导致重复连接
        // uni.onSocketError((res) => {
        //     console.log('WebSocket连接打开失败，请检查！');
        //     this.is_open_socket = false;
        //     this.reconnect();
        // });
        // 这里仅是事件监听【如果socket关闭了会执行】
        this.socketTask.onClose(() => {
            console.log("已经被关闭了")
            this.is_open_socket = false;
            this.reconnect();
        })
    }
    
    //发送消息
    send(value){
        // 注：只有连接正常打开中 ，才能正常成功发送消息
        this.socketTask.send({
            data: value,
            async success() {
                console.log("消息发送成功");
            },
        });
    }
    //开启心跳检测
    start(){
        this.heartbeatInterval = setTimeout(()=>{
            this.data={value:"传输内容",method:"方法名称"}
            console.log(this.data)
            this.send(JSON.stringify(this.data));
        },this.timeout)
    }
    //重新连接
    reconnect(){
        //停止发送心跳
        clearInterval(this.heartbeatInterval)
        //如果不是人为关闭的话，进行重连
        if(!this.is_open_socket){
            this.reconnectTimeOut = setTimeout(()=>{
                this.connectSocketInit();
            },3000)
        }
    }
}

module.exports = websocketUtil

调用方式

单页面调用

//引入
import wsRequest from './static/js/websocket.js'
//使用
new wsRequest("ws://xxx:3100/connect/websocket",5000)

全局调用

在main.js里边

//引入websocket文件
import wsRequest from './static/js/websocket.js'
//开启websocket
let websocket = new wsRequest("ws://xxx:3100/connect/websocket",5000)
//挂载到全局
Vue.prototype.$socket = websocket

页面中调用

let data={value:"传输内容",method:"方法名称"}
this.$socket.send(JSON.stringify(data));

注意，正式上线时候需要在微信公众号平台添加合法域名

//在测试环境时url可以写成  ws://xxx:3100/connect/websocket
new wsRequest("ws://xxx:3100/connect/websocket",5000)

//发布体验版或正式版，url一定要写成  wss://xxx:3100/connect/websocket
new wsRequest("wss://xxx:3100/connect/websocket",5000)