vue3使用全局websocket的示例详解

 更新时间:2023年10月19日 09:41:50   作者:CUI_PING  
这篇文章主要为大家详细介绍了vue3使用全局websocket的相关知识,文中的示例代码讲解详细,对我们深入学习vue3有一定的帮助,感兴趣的小伙伴可以参考一下

思路:

一: 使用store 定义websocket 全局封装类 websocket.js

const useSocketStore = defineStore(
  'socket',
  {
    state: () => ({
      ws: undefined,
      heartTimeOut: 40000, //监测心跳时间 40秒
      //this.isReConnection = false
      lockReconnect: false, //避免重连
      timerReconnect: undefined,
      timerHeart: undefined,
      timerServerHeart: undefined,
      handClose: false,
      msg: ""
    }),
    actions: {
      connection(url, token){
        if("WebSocket" in window){
          this.createWebSocket(url, token)
          
        }
        else{
          console.log("您的浏览器不支持websocket通信")
        }    
      },
    
      //初始化
      createWebSocket(url, token){
        try{
          this.ws = new WebSocket(url, token)  // 
          
          this.initWebsocket()
          
        }
        catch(e){
          console.log("catch eeeee=", e)
          this.reConnection()
        }
      },
    
      initWebsocket(){
    
        //建立连接
        this.ws.onopen = (e)=>{
         
          //webSocket业务订阅——可以有多个业务
          this.ws.send("hello server");
          console.log("连接成功")
          //连接成功后,需要开启监测心跳
          this.heartCheck()
        }
    
        this.ws.onmessage = (messages)=>{
         
          console.log(messages.data)
          let msg = messages.data
          if(msg.includes("{")){
            msg = JSON.parse(msg)
          }
          this.msg = msg

          //接收到消息后,需要开启监测心跳
          this.heartCheck()
        }
    
      
        this.ws.onerror = (e)=>{       //连不上时onerror 和 onclose 监听同时会捕捉到
          console.log("连接失败")
          // 连失败需要重连
          this.reConnection()
        }
    
        this.ws.onclose = (e)=>{
          console.log("关闭连接")
         
          //是否正常关闭  正常关闭不需要重连, 否则需要重连
          if(!this.handClose){
            this.reConnection()
          }
        }
      },
    
      clearTimer(){
        this.timerReconnect && clearTimeout(this.timerReconnect)
        this.timerHeart && clearTimeout(this.timerHeart)
        this.timerServerHeart && clearTimeout(this.timerServerHeart)
      },
    
      //重连
      reConnection(){
        console.log("重新连接")
        if(this.lockReconnect){
          return
        }
        this.lockReconnect = true
        if(this.timerReconnect) {
          clearTimeout(this.timerReconnect)
        } 
    
        //没连上会一直重连, 设置迟延,避免请求过多
        this.timerReconnect = setTimeout(() => { //setTimeout 到点了执行
          this.connection()
          this.lockReconnect = false
        }, 5000);
        
      },
      
    
      //心跳
      heartCheck(){
        console.log("监测心跳")
        if(this.timerHeart){
          clearTimeout(this.timerHeart)
        }
    
        // if(this.timerServerHeart){
        //   clearTimeout(this.timerServerHeart)
        // }
    
        this.timerHeart = setTimeout(() => {
          console.log("PING");
          this.ws.send("PING");
    
          // this.timerServerHeart = setTimeout(() => {
          //   // 断了
          //   this.ws.close()
          // }, 5000);
    
          this.lockReconnect = false
        }, this.heartTimeOut); //40秒
    
      },
    
      //发送消息
      sendMsg(data){
        console.log("发送消息")
        if(this.ws.readyState === WebSocket.OPEN){
          this.ws.send(JSON.stringify(data))
        }
      },
    
      //关闭连接 手动关闭
      closeWs(){
        console.log("手动关闭ws")
        this.handClose = true
        this.clearTimer()
        this.ws.close()
      }
    }
  })

export default useSocketStore

二: 在全局组件中引入,并初始化websocket 连接

import useSocketStore from '@/store/modules/websocket'
import { getToken } from '@/utils/auth'
import  useUserStore from "@/store/modules/user.js"
const userStore = useUserStore();

const socketStore = useSocketStore();

onMounted(()=>{
  let url = `${import.meta.env.VITE_APP_SOCKET_URL}/1/${userStore.userId}/`;
  let token= getToken();

  socketStore.connection(url, token);
})
onUnmounted(()=>{
  socketStore.closeWs();
})

三: 在各个组件中使用watch 监听接收消息内容的变更

watch(() => socketStore.msg, messages => {
  if(messages.mesType === "order"){
    newMessage.value = true;
  }  
})

到此这篇关于vue3使用全局websocket的示例详解的文章就介绍到这了,更多相关vue3全局websocket内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue路由三种传参方式详细讲解

    vue路由三种传参方式详细讲解

    在Vue中有多种方式可以进行路由跳转并传递参数,这篇文章主要给大家介绍了关于vue路由三种传参方式的相关资料,文中介绍的方法分别包括params传参、query传参(显示传参)以及props传参(路由组件传参),,需要的朋友可以参考下
    2023-10-10
  • 使用github部署前端vue项目

    使用github部署前端vue项目

    这篇文章主要为大家介绍了使用github部署前端vue项目过程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法

    Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法

    这篇文章主要介绍了Vue移动端用淘宝弹性布局lib-flexible插件做适配的操作方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • 用Vue封装导航栏组件

    用Vue封装导航栏组件

    这篇文章主要为大家详细介绍了用Vue封装导航栏组件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • VUE3中watch监听使用实例详解

    VUE3中watch监听使用实例详解

    watch函数用来侦听特定的数据源,并在回调函数中执行副作用,下面这篇文章主要给大家介绍了关于VUE3中watch监听使用的相关资料,需要的朋友可以参考下
    2022-06-06
  • 在Echarts图中给坐标轴加一个标识线markLine

    在Echarts图中给坐标轴加一个标识线markLine

    这篇文章主要介绍了在Echarts图中给坐标轴加一个标识线markLine,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue中的attribute和property的具体使用及区别

    vue中的attribute和property的具体使用及区别

    本文主要介绍了vue中的attribute和property的具体使用及区别,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 关于element-ui中@selection-change执行两次的问题

    关于element-ui中@selection-change执行两次的问题

    这篇文章主要介绍了关于element-ui中@selection-change执行两次的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 基于Vue实现图书管理功能

    基于Vue实现图书管理功能

    这篇文章主要为大家详细介绍了基于Vue实现图书管理功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • vue全局引入scss样式文件的过程记录

    vue全局引入scss样式文件的过程记录

    css文件可以直接引入到main.js中,scss文件如果没有scss特殊语法也可以直接引入index.js,只有scss文件中的特殊语法全局引入的时候无法显示,所以需要特殊处理,下面这篇文章主要给大家介绍了关于vue全局引入scss样式文件的相关资料,需要的朋友可以参考下
    2022-11-11

最新评论