vue2使用webSocket双向通讯

已于 2024-08-22 14:11:28 修改
阅读量1.4k 收藏 21
点赞数 13
文章标签： websocket vue web worker
于 2024-03-18 15:14:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32900003/article/details/136809386
版权

基于webSocket实现双向通信，使用webworker保持心跳。

由于浏览器的资源管理策略会暂停或限制某些资源的消耗，导致前端心跳包任务时效，后端接收不到webSocket心跳主动断开，因此需要使用webworker保持心跳

  1. 引入webworker

    npm install worker-loader -D
  2. vue.config配置webworker 
    module.exports = {
 chainWebpack: config => {
        // web worker配置
        config.module
            .rule('worker')
            .test(/\.worker\.js$/)
            .use('worker-loader')
            .loader('worker-loader')
            .options({
                inline: 'fallback',
                filename: 'workerName.[hash].worker.js'
            })
            .end();
        // 解决worker 热更新
        config.module.rule('js').exclude.add(/\.worker\.js$/);
    }
}
  3. 新增websocket.js创建websocket单例 
    const token = null;
const WsUrl = null;
import store from '@/store'
import { WS_CODE_ENUM, TASK_TYPE_ENUM } from 'config/enum';
import { startNetworkListener, stopNetworkListener, startHeartBeat, stopHeartBeat, openReconnect, clearRetry } from './wsUtils'

/**
 * WebSocket对象实例
 */
class WebSocketUtil {
     constructor () {
        /**
         * ws对象，全局共用同一个对象
         */
        this.socket = null
        /**
         * WS是否重连标识
         * 0：非重连，1：重连,
         * ws建立连接参数
         */
        this.reconnect = 0
        /**
         * 前后端心跳服务端响应次数
         * ws连接建立时重置
         * 第一次收到服务端响应，车辆未连接且非ws重连时，打开车辆连接弹窗
         * 接收到后端心跳响应累加
         */
        this.pongNum = 0
        /**
         * 前后端心跳后端未响应次数
         * 前端发送心跳时加1
         * 后端有响应时清空
         * 车辆连接成功后, 未响应次数≥2，说明后端两次未响应，自动开启前后端重连
         */
        this.heartBeatRsp = 0
        /**
         * 前后端ws重连尝试次数，最多三次,
         * 重连累加，重连结束重置为0
         * 三次均重连失败，断开ws连接，清空单车诊断业务缓存，跳转到车辆连接页面
         */
        this.retryTime = 0
        /**
         * 前后端重连任务，重试最多持续10秒，若超过10秒，则按照重试失败处理，
         * 第一次开启重连时，开启任务，
         * 重连成功、10秒未连接成功关闭任务，
         * 重连失败时，若用户处于车辆连接页面，toast提示； 若用户处于单车诊断页面则跳转回车辆连接页面；若用于处于非单车诊断toast提示
         */
        this.retryTimer = 0
        /**
         * 重连任务toast
         * 重连开始开启
         * 重连结束关闭、重置
         */
        this.reconnectMsg = null
        /**
         * 重连任务全局遮罩
         * 重连开始开启
         * 重连结束关闭、重置
         */
        this.reconnectLoading = null
        /**
         * 页面超时任务
         * 最后一次下发或最后一次上报开始时间点
         * 11分钟内无任务下发、任务上报判定页面超时
         * 浏览器刷新、车辆连接成功后开启
         * ws断开连接、重连过程中关闭
         * 页面超时关闭ws，跳转单车连接页面
         */
        this.pageTimer = null
        /**
         * token续期任务，每5分钟一次，
         * 浏览器刷新、车辆连接成功后开启
         * ws断开连接、重连过程中关闭
         */
        this.tokenPolling = null
        /**
         * 开启一个独立线程，处理心跳包任务
         * setInterval是基于当前页面的定时任务，如果浏览器切换窗口/隐藏时会停止任务，这时后端接收不到前端发送的心跳包，会触发断开ws
         * 使用webWorker线程,可以突破浏览器默认机制
         * 启动心跳后，开启独立线程，发送心跳包
         * 心跳关闭时关闭独立线程
         */
        this.worker = null
    }
    
        /**
     * 建立WS连接
     * @param {*} reconnect 是否重连，0：非重连，1：重连
     * @param {*} vin 车辆VIN码
     * @param {*} userName 用户信息
     * @param {*} needAuth 车机授权
     * @description 每次建立ws连接，重置服务端响应次数
     */
    connect (reconnect = 0, vin, userName, needAuth) {
        this.socket = new WebSocket(`${WsUrl}/${vin}/${userName}/${reconnect}/${needAuth}`, getToken());
        this.reconnect = reconnect
        this.pongNum = 0 // 服务端响应次数
        this.socket.onopen = this.onOpen.bind(this);
        this.socket.onmessage = this.onMessage.bind(this);
        this.socket.onerror = this.onError.bind(this);
        this.socket.onclose = this.onClose.bind(this);
    }
    
    /**
     * 开启WebSocket
     * 启动心跳任务
     * 启动网络监听
     */
    onOpen () {
        // 启动心跳
        startHeartBeat()
        // 启动网络监听
        startNetworkListener()
    }
    /**
     * WebSocket响应业务处理
     * 1：服务端响应次数累加
     * 2：第一次收到服务端响应,根据是否重连，响应不通的车辆连接业务
     * 3：服务端未响应次数重置
     * 4：车辆已连接且处于重连过程时，关闭重连业务，提示重连成功
     */
    onMessage ({ data }) {
        // 服务端响应次数累加
        this.pongNum++
        // 收到服务端第一次信息
        if (this.pongNum === 1) {
            // 非重连，第一次收到服务端信息，开启车辆连接弹窗
            if (this.reconnect === 0) // TODO 业务操作
            // 重连继续心跳计时
            else TODO 业务操作
        }
        // 心跳响应无需处理
        if (data === 'pong') {
            // 服务端未响应次数重置
            this.heartBeatRsp = 0
            // 车辆已连接，存在重连
            if (store.getters.connected && this.retryTime > 0) {
                clearRetry()
                Message.success('重连成功')
            }
            return
        }
        // 业务操作
    }

        /**
     * WebSocket关闭处理
     * 1：关闭网络监听
     * 2：前后端重连业务
     * 3：连接过程中ws断开异常处理
     * 4: 退出业务
     */
    onClose (event) {
        console.log('WebSocket关闭:', event.code, event.reason);
        // 关闭网络监听
        stopNetworkListener()
        // 服务端未响应次数 ≥ 2，需要重连
        if (this.heartBeatRsp >= 2) return openReconnect()
        this.disconnect()
    }

    /**
     * 断开ws连接
     * 关闭心跳包、清空tokne续期任务、关闭页面超时
     */
    clearWs () {
        this.socket?.close();
        this.socket = null;
        stopHeartBeat()
    }

    /**
     * 退出单车诊断业务
     * @param {boolean} clearAll 是否清空所有state数据
     * 1: 车辆已连接，记录断开连接时间，用于车辆连接页面-车辆连接按钮退出后5秒不能连接判断
     * 2：断开ws连接，
     * 3: 关闭心跳包、清空tokne续期任务、关闭页面超时判定
     * 4：清空重连loading、toast提示、关闭重连超时任务
     * 5: 调用退出实时模式接口，通知后端退出实施模式
     * 6：清空单车诊断相关浏览器缓存
     */
    disconnect (clearAll = false) {
        console.log('WebSocket断开连接')
        // 记录断开连接日期
        if (store.getters.connected) storage.set('WS_LAST_CLOSE_TIME', dayjs().unix())
        this.clearWs()
        clearRetry()
        Message.closeAll();
        // 重置信息
        store.commit('RESET_STATE')
    }
}
    // 懒汉模式
const LazySingleton = (function () {
    let _instance = null
    return function () {
        return _instance || (_instance = new WebSocketUtil())
    }
})()

const websocket = new LazySingleton()
export default websocket

  4. websocket工具类wsUtils.js 
    import websocket from '@/diagnostic/websocket'
import store from '@/store'
import { Message, Loading } from 'element-ui';
import WsWorker from './ws.worker.js'
/**
 * ws通信建立成功开启心跳包任务；
 * 每5秒发送一次心跳包；
 * 每次发送心跳包累加服务端未响应次数【heartBeatRsp】；
 * 服务端未响应次数【heartBeatRsp】 ≥ 2，判定服务端响应超，开启前后端重连；
 */
export const startHeartBeat = () => {
    websocket.socket && websocket.socket.readyState === WebSocket.OPEN &&     websocket.socket.send('ping');
    websocket.worker = new WsWorker()
    websocket.worker.postMessage({ type: 'start' })
    websocket.worker.onmessage = (e) => {
        const { type } = e.data
        if (type === 'send') {
            // 发送心跳ping
            sendPing()
        }
    }
}

const sendPing = () => {
    // 服务端未响应次数累加
    websocket.heartBeatRsp++
    // 车辆已连接，服务端响应次数≥2，鉴定为服务端响应超时，断开ws连接，开启重连
    if (store.getters.connected && websocket.heartBeatRsp >= 2) websocket.clearWs()
    websocket.socket && websocket.socket.readyState === WebSocket.OPEN && websocket.socket.send('ping');
}

/**
 * ws断开连接，关闭心跳包任务，
 * 清空tokne续期任务，关闭页面超时判定
 */
export const stopHeartBeat = () => {
    // 关闭心跳
    websocket.worker?.postMessage({ type: 'stop' })
    // 清空轮询
    clearInterval(websocket.tokenPolling)
    websocket.tokenPolling = null
    // 关闭页面超时判定
    clearTimeout(websocket.pageTimeout)
    websocket.pageTimeout = null
    // 关闭心跳包独立线程
    websocket.worker?.terminate()
}
/**
 * 开启重连
 * 每次重连需要间隔三秒
 * 三次重连失败,toast提示，退出单车诊断业务
 */
export const openReconnect = async () => {
    switch (websocket.retryTime) {
    case 0:
        retryConnect()
        break;
    case 1:
    case 2:
        await sleep(3000)
        retryConnect()
        break;
    default:
        Message.error('当前您的网络不稳定，车辆连接已断开，请重新进行连接')
        websocket.disconnect()
        break;
    }
}
export const sleep = (ms) => {
    return new Promise((resolve) => setTimeout(resolve, ms))
}
/**
 * 前后端重连，重连次数累加
 * 1：开启重连全屏loading、toast提示
 * 2：关闭旧连接
 * 3：第一次重连开启重连超时任务
 * 4：开始重连
 */
export const retryConnect = () => {
    // 重连次数累加
    websocket.retryTime++
    // 开启全屏loading
    websocket.reconnectLoading = Loading.service({ fullscreen: true });
    websocket.reconnectMsg?.close()
    websocket.reconnectMsg = Message.warning({
        message: `当前您的网络环境不稳定，正在进行第${websocket.retryTime}次重连，请等待`,
        duration: 0
    })
    // 关闭旧连接
    websocket.clearWs()
    // 第一次重连开启重连超时任务
    if (websocket.retryTime === 1) startRetryTimer()
    // 开启重连
    websocket.connect(1)
}

/**
 * 重连超时任务
 * 重连三次时间不能超过10秒，超过10秒按照重连失败处理
 * 1：开启重连超时任务前，如果存在重连超时任务，先关闭
 * 2：开启超时重连任务，时间10秒
 * 3：10秒后,服务端未响应次数不等于0 判定重连超时，退出单车诊断业务
 */
const startRetryTimer = () => {
    // 1：开启重连超时任务前，如果存在重连超时任务，先关闭
    stopRetryTimer()
    // 2：暂停车云心跳计时
    store.commit('connect/STOP_CONNECT_TIMER')
    // 3：开启超时重连任务，时间10秒
    websocket.retryTimer = setTimeout(() => {
        // 4：10秒后,服务端未响应次数不等于0 判定重连超时，退出单车诊断业务
        if (websocket.retryTime != 0) {
            Message.error('当前您的网络不稳定，车辆连接已断开，请重新进行连接')
            websocket.disconnect()
        }
    }, 1000 * 10)
}

/**
 * 关闭重连超时任务
 */
const stopRetryTimer = () => {
    if (websocket.retryTimer) {
        clearTimeout(websocket.retryTimer)
        websocket.retryTimer = null
    }
}
/**
 * 关闭重连流程
 * 清空重连全屏loading、toast提示
 * 重置重连次数、关闭重连超时任务、重置服务端未响应次数
 */
export const clearRetry = () => {
    websocket.reconnectLoading?.close()
    websocket.reconnectLoading = null
    websocket.reconnectMsg?.close()
    websocket.reconnectMsg = null
    websocket.retryTime = 0
    websocket.heartBeatRsp = 0
    stopRetryTimer()
}

/**
 * 监听网络连接状态,
 * ws建立通信后开启
 */
export const startNetworkListener = () => {
    window.addEventListener('offline', offline)
}

/**
 * ws连接断开后，停止网络监听
 */
export const stopNetworkListener = () => {
    window.removeEventListener('offline', offline)
}
/**
 * 监听网络连接状态
 * 监听到网络中断：主动断开当前ws连接；网络中断后onclose事件会失效，需要主动提前断开ws
 * 判断车辆是否已连接，如果车辆已连接需要开启前后端三次重连
 */
const offline = (e) => {
    // 网络中断
    if (e.type === 'offline') {
        // 车辆已连接
        if (store.getters.connected) websocket.heartBeatRsp = 2 // 后端未响应次数≥2开启重连
        // 主动断开当前ws连接
        websocket.clearWs()
    }
}

  5. 创建webWorker进程用来处理ws心跳ws.worker.js 
    /**
 * 前后端心跳包任务，ws连接建立后每5秒发送一次，由前端主动发起，后端响应
 * ws断开心跳任务清空
 */
let heartBeatTimer = null
onmessage = (e) => {
    const { type } = e.data;
    if (type === 'start') {
        heartBeatTimer = setInterval(() => {
            console.log('WebSocket is sending heartbeat');
            postMessage({ type: 'send' });
        }, 1000 * 5);
    }
    if (type === 'stop') {
        // 清除定时器
        clearInterval(heartBeatTimer)
        heartBeatTimer = null
        console.log('心跳包任务停止成功')
    }
}

  6. 在组件中使用 
    import websocket from '@/websocket'

export default {
    mounted () {
        websocket.connect()
    }
}

这么近又那么远
关注
websocket实时通讯(vue2)
AnRan0205的博客
07-20 424
websocket实时通讯(vue2)
vue3+webSocket+pinia实现实时双向通信的思路
m0_54829066的博客
08-29 1442
在现代 web 应用开发中，实时通信变得越来越重要。用户期望能够及时获取最新的数据，并且能够与服务器进行实时交互。Vue 3 作为一个流行的前端框架，提供了强大的响应式系统和组件化开发模式。WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，允许服务器主动向客户端推送数据，实现实时通信。Pinia 是 Vue 的状态管理库，用于集中管理应用的状态，使得状态的管理更加清晰和可维护。本文将介绍如何使用 Vue 3、WebSocket 和 Pinia 实现实时双向通信。Vue 3。
vue2 使用WebSocket
weixin_53322542的博客
12-06 2039
带离开页面 刷新页面 关闭WebSocket。
Vue 中的 Web Workers：提升性能与流畅度
最新发布
weixin_52648900的博客
09-10 1461
在 Vue 中使用 Web Workers 是一种提升性能的有效方法，避免主线程阻塞，从而改善用户体验和应用性能。
在Vue2中使用WebSocket
浮游的博客
08-27 1291
WebSocket是一种通信协议，能够在客户端和服务器之间建立全双工通信通道。与传统的HTTP请求不同，WebSocket允许服务器主动向客户端发送数据，从而实现实时通信。本文将详细介绍如何在Vue2项目中集成和使用WebSocket，并通过具体代码示例演示其使用方法。
Vue2 使用WebSocket实现前端与后端的实时通讯
zengkeai的博客
11-29 2710
WebSocket是一种在单个TCP连接上进行全双工通信的协议，它能够在客户端和服务器之间建立持久的连接，使得实时通讯成为可能。在前端开发中，WebSocket通常用于实现实时消息推送、实时数据更新等功能，为用户提供更流畅、即时的体验本文将介绍如何在前端项目中利用WebSocket实现与后端的实时通讯，并结合具体的代码示例进行讲解。
用Js实现的WebSocket客户端
COCO56的博客
01-03 1336
文章目录按安装库代码 按 由于一个项目要用到多种语言共同完成功能设计，而各语言之间一般并不兼容，这就不得不采用微内核的架构了。每种语言各开发一个应用程序，用于完成整个项目的一部分功能（可以认为是项目的一个微内核），不同的应用程序（微内核）之间使用WebSocket进行沟通交流和上下文切换。 参考： 用Python实现的WebSocket服务器端 用Js实现的WebSocket客户端 安装库 n...
Vue+Java 通过websocket实现服务器与客户端双向通信操作
10-14
在本文中，我们将深入探讨如何使用Vue.js和Java通过WebSocket实现服务器与客户端的双向通信。WebSocket是一种在浏览器和服务器之间建立持久性连接的协议，允许实时、双向数据传输，非常适合实时应用，如聊天室、股票...
vue websocket 与 delphi10.2 websocket通讯
10-08
在本案例中，我们将探讨如何使用Vue.js和Delphi 10.2之间的WebSocket通讯来读取卡信息。 1. **Vue.js中的WebSocket集成**： Vue.js本身并不直接支持WebSocket，但可以通过第三方库如`vue-websocket`或手动创建...
c#websocket服务与vue通讯
11-28
使用c#编写websocket服务端，使用vue编写的客户端，在一台电脑上实现vue发起访问指令，通过websocket协议访问本机websocket服务，服务端接收到指令后开发访问本地资源。不明白的地方加qq286194946
在vue中使用SockJS实现webSocket通信的过程
10-18
在Vue中使用SockJS实现WebSocket通信的过程涉及到前后端的知识，以及实时通信技术的使用。以下是基于给定文件内容的知识点梳理： 1. WebSocket通信基础： - WebSocket是一种在单个TCP连接上进行全双工通讯的协议，...
Vue 2 中 WebSocket 模块实现与应用(包含心跳检测、自动重连)
weixin_44192363的博客
12-22 4815
该 WebSocket 模块提供了以下核心功能：WebSocket 连接管理： 通过封装 WebSocket 的创建、连接、关闭等操作，实现了 WebSocket 连接的简便管理。消息收发： 可以方便地发送和接收 WebSocket 消息，并在收到消息时进行相应的处理。自动重连： 当 WebSocket 连接断开时，模块会自动尝试重新连接，确保持续的通信。心跳检测： 集成了心跳检测机制，定期向服务器发送心跳消息，以确保连接的稳定性。
vue2实现websocket的聊天应用
weixin_46002095的博客
10-23 1655
首先，我们需要简单了解一下websocket：HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理，HTTP 协议无法实现服务器主动向客户端发起消息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。大多数 Web 应用程序将通过频繁的异步 JavaScript 和 XML（AJAX）请求实现长轮询。轮询的效率低，非常浪费资源。
vue2 使用 Socket.io 实现 WebSocket
weixin_38797742的博客
07-11 554
使用 NPM：官网：https://socket.io/zh-CN/docs/v4/ 客户端API：https://socket.io/zh-CN/docs/v4/client-api/#socket首先，在你的 Vue 项目中安装 socket.io-client： 2、在 Vue 组件中使用 Socket.io 在你的 Vue 组件中，可以像这样使用 Socket.io：
WebScoket入门(vue2)
Giraffe0615的博客
09-01 2862
WebScoket入门(vue2)
初探WebSocket
dengtongcanfan4634的博客
05-01 338
定义     WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行==全双工通讯的协议==。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器==只需要完成一次握==手，两者之间就直接可以==创建持久性的连接==，并进行双向数据传输。     WebSocket 能...
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 628
原生WebSocket： new WebSocket。
vue2 封装 webSocket 开箱即用（或 uni.connectSocket）
qq_44161703的博客
08-08 1734
开箱即用 封装 webSocket。
Vue设置全局webSocket，对应页面接受消息通知处理
weixin_48309048的博客
08-16 3161
Vue设置全局webSocket，对应页面接受消息通知处理
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值