uniapp app.vue全局使用websocket

之前百度看了很多种 还有uniapp自带的方法
个人觉得uniapp的方法还是比较简单,上代码

app.vue文件

 data() {
    return {
      show: false, //投诉弹窗
      timeout: 5000, //
      timeoutObj: null,
      tokenUser: "",
    };
  },

 created() {
 //我这里是登陆之后根据token判断连接websocket
    this.tokenUser = uni.getStorageSync("token");
    if (this.tokenUser !== "") {
      this.connectWebsocket();
    } 
  },



  methods: {
    //wx连接
    connectWebsocket() {
      uni.showLoading({
        title: "connect...",
      });
      if ("WebSocket" in window) {
        console.log("您的浏览器支持 WebSocket!");
        let socketUrl = uni.getStorageSync("socketUrl");
        //创建一个 WebSocket 连接
        uni.connectSocket({
          url: `${socketUrl}?token=${this.tokenUser}`,
          success: (res) => {
            console.log("连接成功 connectSocket=", res);
          },
          fail(err) {
            console.log("连接失败 connectSocket=", err);
          },
        });
        //监听WebSocket连接打开事件。
        uni.onSocketOpen((res) => {
          console.log("连接成功");
          uni.hideLoading();
        });
        //监听WebSocket错误  连接出错加了定时器重连
        uni.onSocketError((res) => {
          console.log("WebSocket连接打开失败,请检查!");
          setTimeout(() => {
            this.connectWebsocket();
          }, 3000);
        });
        this.onSocketMessage(); // 监听服务器返回的消息
      } else {
        // 浏览器不支持 WebSocket
        console.log("您的浏览器不支持 WebSocket!");
      }
    },
    //监听服务器返回的消息
    onSocketMessage() {
      // 消息
      this.timeout = 5000;
      this.timeoutObj = null;
      //监听WebSocket接受到服务器的消息事件
      uni.onSocketMessage((res) => {
        uni.hideLoading();
        this.getSocketMsg(res.data); // 监听到有新服务器消息
      });
    },

    //监听到有新服务器消息处理
    getSocketMsg(reData) {
        //我的处理消息代码
      //接收的参数发送给需要的页面处理   这里可以用vuex,之前没有想到使用vuex很简单,有空再优化一下
      this.$bus.$emit("wxResData", reData);
      this.reset(); // 检测心跳reset,防止长时间连接导致连接关闭
    },
    //检测心跳重置
    reset() {
      clearInterval(this.timeoutObj);
      this.start(); // 启动心跳
    },
    //心跳包
    start() {
      let jsonData = JSON.stringify({
        action: "ping",
        time: currentTime(),
      });
      console.log("开始start心跳包3s后发信息");
      this.timeoutObj && clearTimeout(this.timeoutObj);
      this.timeoutObj = setInterval(() => {
        uni.sendSocketMessage({
          data: jsonData,
          success: (res) => {
            console.log("连接中....", res);
          },
          fail: (err) => {
            console.log("连接失败打印....");
            clearTimeout(this.timeoutObj);
            this.tokenUser = uni.getStorageSync("token");
            if (this.tokenUser !== "") {
              this.connectWebsocket();
            }
          },
        });
      }, this.timeout);
    },
  },

版权声明:本文为qq_40796623原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。