vue项目实现websocket

最新推荐文章于 2025-04-09 11:20:36 发布

超小盆友的媳妇儿

最新推荐文章于 2025-04-09 11:20:36 发布

阅读量424

点赞数

分类专栏：前端文章标签： vue websocket

本文链接：https://blog.csdn.net/qq_37642495/article/details/118998341

版权

前端专栏收录该内容

25 篇文章

订阅专栏

该博客详细介绍了如何在JavaScript中初始化WebSocket连接，包括错误处理、消息接收和发送。当连接建立后，它会发送一个测试消息，并在接收到响应时执行相应操作，如关闭加载提示、显示成功消息及重新获取表格数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        wsUrl: 'ws://1xxxxxxx:8099/imserver/9999', // ws地址
        websock: null, // ws实例

// 初始化weosocket
      initWebSocket() {

        if (typeof WebSocket === 'undefined')
          return console.log('您的浏览器不支持websocket')
        this.websock = new WebSocket(this.wsUrl)
        this.websock.onmessage = this.websocketonmessage
        this.websock.onopen = this.websocketonopen
        this.websock.onerror = this.websocketonerror
        this.websock.onclose = this.websocketclose
      },
      websocketonopen() {
        // 连接建立之后执行send方法发送数据
        let actions = { test: 'test' }
        this.websocketsend(JSON.stringify(actions))
      },
      websocketonerror() {
        // 连接建立失败重连
        this.initWebSocket()
      },
      websocketonmessage(e) {
        console.log(e)
        // 数据接收
        const redata = JSON.parse(e.data)
        if (redata.code == 200) {
          this.fullscreenLoading = false
          this.rLoading.close();
          this.$message({
          message: 'xxxxxxxxxxxxxx!',
          type: 'success'
        });
          this.getTableData()
        } else {
          // this.initWebSocket()
        }
        console.log('接收的数据', redata)
      },
      websocketsend(Data) {
        // 数据发送
        this.websock.send(Data)
      },
      websocketclose(e) {
        // 关闭
        console.log('断开连接', e)
      },