惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

S
SegmentFault 最新的问题
J
Java Code Geeks
V
V2EX
Blog — PlanetScale
Blog — PlanetScale
博客园 - 司徒正美
Hugging Face - Blog
Hugging Face - Blog
F
Fortinet All Blogs
aimingoo的专栏
aimingoo的专栏
B
Blog
A
About on SuperTechFans
有赞技术团队
有赞技术团队
月光博客
月光博客
Microsoft Azure Blog
Microsoft Azure Blog
阮一峰的网络日志
阮一峰的网络日志
腾讯CDC
美团技术团队
大猫的无限游戏
大猫的无限游戏
爱范儿
爱范儿
N
Netflix TechBlog - Medium
C
Check Point Blog
Recent Announcements
Recent Announcements
博客园 - Franky
博客园 - 叶小钗
T
Tailwind CSS Blog

博客园 - 温柔的风

宝塔面板定时任务目录清理日志-定时检测阈值清理 Mysql8 允许远程登录 【uni-app】申请高德地图key,封装map.js,实现H5、iOS、Android通过getlocation获取地图定位信息(摘) centos安装atop工具,检测服务器情况 mysql 8.0查看正在执行的事务锁 webman 安装gateway实现socket https站点websocket连接失败问题 layui table 表格过滤tableFilter 谷歌浏览器无法播放音频mp3怎么办? uniapp下实现心跳检测服务端并且结合生命周期自动再次连接绑定客户端 git push Git远端意外挂断 php对接阿里通义AI模型,简单实现浏览器端以sse方式输出 Layer.js最大化最小化监听 Linux磁盘阈值及内存阈值检测脚本 fastadmin控制列显示与隐藏 fastadmin自定义主题并随切换变更iframe颜色 fastadmin-PHP-导出少量数据PhpOffice以及百万级别数据csv压缩 Macbook M1下安装Kibana Macbook M1下安装elasticsearch Fastadmin表格的列头对齐以及内容对齐设定方式
基于uniapp的全局监听websocket连接及接收服务端消息
温柔的风 · 2024-11-24 · via 博客园 - 温柔的风

定义一个全局的socket类,放在util目录下

//定义一个socket类

class WebSocket {
    constructor(url) {
        this.url = url
        this.time=null;
    }
    //建立连接
    connet() {
        let _this = this;
        uni.connectSocket({
            url: _this.url,
            complete: (res) => {
                console.log(res)
                if (res.errMsg == 'connectSocket:ok') {
                    //连接成功
                    _this.IsConnect();
                } else {
                    //连接失败
                    uni.showToast({
                        icon: 'none',
                        title: '连接失败'
                    })
                }
            }
        });
    }
    //判断是否连接
    IsConnect() {
        let that = this;
        uni.onSocketOpen(function(res) {
            if (res) {
                //说明已经连接成功了
                that.SetInterval(2, '心跳检测');
                that.setConnect();
            }
        });

    }
    //与后台信息建立连接
    setConnect() {
        let that = this;
        uni.onSocketMessage(function(res) {
            let data = res.data;

            console.log("WebSocket 收到消息:" + data);

            try {
                JSON.parse(data);
                data = JSON.parse(data) ? JSON.parse(data) : data;
            } catch {
                console.log('ws接收到非对象数据', data);
                return true;
            }

            var type = data.type || '';

            switch(type){
                case 'get_client_id':
                    that.bindUid(data.data.client_id);
                    break;
                case "call_mobile":
                    var mobile     = data.mobile;
                    that.callphone(mobile)
                    break;
            }

        });
    }
    //心跳检测
    SetInterval(delay, msg) {
        clearInterval(this.time) //先清除计时器
        this.time = setInterval(function() {
            console.log('心跳检测')
            uni.sendSocketMessage({
                data: msg
            });
        }, delay*5000)
    }
    //打电话
    callphone(mobile) {
        // #ifdef APP-PLUS
        plus.device.dial(mobile, false)
        // #endif
    }
    //判断是否断开连接
    onError() {
        let that=this;
        uni.onSocketError(function(res) {
            console.log('连接断开')
            that.connet()
        });
    }

    //绑定客户端
    bindUid(client_id) {
        console.log('WebSocket 绑定客户端id' + client_id);
        let organise_id     = uni.getStorageSync('organise_id');
        let admin_id        = uni.getStorageSync('admin_id');

        bindSocketClient({client_id: client_id,organise_id:organise_id,admin_id:admin_id}).then(res=>{
            console.log('~~~')
            console.log(res)
        })
    }
}

export default {
    socket: WebSocket
}

import { bindSocketClient } from '@/api/login.js' socket

mian.js代码

import socket from '@/utils.js/socket';
let IO = new socket.socket('websocket连接地址');
Vue.prototype.$IO=IO;

页面内调用方法

        onLoad() {
            this.$IO.connet()
        },

在app.vue中监听是否断开,断开就重连

        onShow: function() {
            this.$IO.onError();
        },