vue中websocket的简单使用

本文详细介绍了如何在Vue项目中初始化并使用WebSocket进行实时通信,包括连接、接收数据、错误处理及断开连接的完整流程。同时,强调了在项目上线后需将URL的ws替换为wss以确保安全性。

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

**

简单使用:

**

主要代码

  initWebSocket() {
          const wsuri = `ws:url`;
          this.websock = new WebSocket(wsuri);//这里面的this都指向vue
          this.websock.onopen = this.websocketopen;
          this.websock.onmessage = this.websocketonmessage;
          this.websock.onclose = this.websocketclose;
          this.websock.onerror = this.websocketerror;
        },
        websocketopen() {//打开
          // console.log("WebSocket连接成功")
        },
        websocketonmessage(e) { //数据接收
            let ObjData = JSON.parse(e.data);
            console.log(ObjData)
        },
        websocketclose() {  //关闭
          // console.log("WebSocket关闭");

        },
        websocketerror() {  //失败
          //  console.log("WebSocket连接失败");
        },

调用 看个人需求需要在什么地方调用

this.initWebSocket()

完成之后或者页面跳转别忘记关闭websocket

  destroyed() {
        this.websock.close() //离开路由之后断开websocket连接
      },

注意项目上线后把url前面的ws改为wss

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值