wesocket对接vue2.0和vue3.0

最新推荐文章于 2024-05-19 08:44:56 发布

盲人提灯

最新推荐文章于 2024-05-19 08:44:56 发布

阅读量206

点赞数

分类专栏： typeScript JavaScript 文章标签： javascript vue.js websocket

本文链接：https://blog.csdn.net/A_lamp/article/details/126377710

版权

JavaScript 同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

typeScript

1 篇文章 0 订阅

订阅专栏

vue2.0
<script>
    import store from '@/store/'

    export default {
        data() {
            return {
            }
        },
        mounted() { 
              //初始化websocket
              this.initWebSocket()
        },
        destroyed: function () { // 离开页面生命周期函数
              this.websocketclose();
        },
        methods: {
            initWebSocket: function () { // 建立连接
                // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
                var userId = store.getters.userInfo.id;
                var url = window._CONFIG['domianURL'].replace("https://","ws://").replace("http://","ws://")+"/websocket/"+userId;
                this.websock = new WebSocket(url);
                this.websock.onopen = this.websocketonopen;
                this.websock.send = this.websocketsend;
                this.websock.onerror = this.websocketonerror;
                this.websock.onmessage = this.websocketonmessage;
                this.websock.onclose = this.websocketclose;
              },
              // 连接成功后调用
              websocketonopen: function () {
                console.log("WebSocket连接成功");
              },
              // 发生错误时调用
              websocketonerror: function (e) {
                console.log("WebSocket连接发生错误");
              },
              // 给后端发消息时调用
              websocketsend: function (e) {
                console.log("WebSocket连接发生错误");
              },
                                                        // 接收后端消息
              // vue 客户端根据返回的cmd类型处理不同的业务响应
              websocketonmessage: function (e) {
                var data = eval("(" + e.data + ")"); 
                 //处理订阅信息
                if(data.cmd == "topic"){
                   //TODO 系统通知
             
                }else if(data.cmd == "user"){
                   //TODO 用户消息
        
                }
              },
              // 关闭连接时调用
              websocketclose: function (e) {
                console.log("connection closed (" + e.code + ")");
              }
        }
    }
</script>

 vue3.0
    const websocketonopen = (): any => {
      console.log('WebSocket连接成功11')
    }
    const websocketonerror = (e?: any): any => {
      console.log('WebSocket连接发生错误', e)
    }
    const websocketsend = (e?: any): any => {
      console.log('WebSocket连接发生错误', e)
    }
    const websocketonmessage = (e?: any): any => {
      const data = eval('(' + e.data + ')')
      console.log('data==', data)
      if (variables.speedData.length !== 0) {
        if (data.type === 0) {
          if (
            variables.speedData.some((item: any) => item.taskId == data.taskId)
          ) {
            variables.speedData.forEach((item: any) => {
              if (item.taskId == data.taskId) {
                item.message = data.message
              }
            })
          } else {
            variables.speedData.push(data)
          }
        } else if (data.type === 1) {
          variables.speedData = variables.speedData.filter(
            (item: any) => item.taskId !== item.taskId
          )
        }
      } else {
        variables.speedData.push(data)
      }
    }
    const websocketclose = (e?: any): any => {
      console.log('connection closed (' + e.code + ')')
    }
    const initWebSocket = () => {
      // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
      const url = 'ws://192.168.29.20:12345/dolphinscheduler/logWebSocket'
      const websock = new WebSocket(url)
      websock.onopen = websocketonopen
      websock.send = websocketsend
      websock.onerror = websocketonerror
      websock.onmessage = websocketonmessage
      websock.onclose = websocketclose
    }

    // ===
    const onSearch = () => {
      variables.page = 1
      requestTableData()
    }

    onMounted(() => {
      createColumns(variables)
      requestTableData()
      initWebSocket()
      // setInterval(() => {
      //   variables.list.forEach((item: any) => {
      //     item.message = Math.random() + ''
      //   })
      // }, 5000)
    })

    watch(useI18n().locale, () => {
      createColumns(variables)
    })

    return {
      ...toRefs(variables),
      requestTableData,
      onUpdatePageSize,
      onSearch
    }
  },