websocket使用

最新推荐文章于 2024-02-21 10:57:29 发布

ice-king

最新推荐文章于 2024-02-21 10:57:29 发布

阅读量362

点赞数 10

文章标签： websocket 网络协议网络

本文链接：https://blog.csdn.net/m0_59118465/article/details/135456275

版权

一、安装websocket依赖

yarn add websocket
npm i websocket

二、相关代码

webSocketInit() {
      const FilledBy = {
        accessToken: JSON.parse(sessionStorage.getItem("accessToken")), // token
        unsrId: JSON.parse(sessionStorage.getItem("account")).id
      };
      const Url = "ws://192.168.0.206:16070/system/websocket/" + FilledBy.unsrId;
      const Url1 = "wss://192.168.0.206:16070/system/websocket/" + FilledBy.unsrId;
      const webSocketUrl = process.env.NODE_ENV === "test" ? Url1 : Url;
      this.webSocketObject = new WebSocket(webSocketUrl);
      this.webSocketObject.onopen = this.webSocketOnOpen;
      this.webSocketObject.onmessage = this.webSocketOnMessage;
      this.webSocketObject.onerror = this.webSocketOnError;
      this.webSocketObject.onclose = this.webSocketOnClose;
    },
    webSocketOnOpen(e) {
      console.log("与服务端连接打开login", e);
    },
    webSocketOnMessage(e) {
      console.log("来自服务端的消息app", e);
      this.receiveMessage = JSON.parse(e.data);
      this.$store.commit("SET_MessageCount", this.receiveMessage.msgNum);
      this.openMessage(this.receiveMessage);
    },
    websocketsend(agentData) {
      // 数据发送
      this.websock.send(agentData);
    },
    webSocketOnError(e) {
      console.log("与服务端连接异常->", e);
    },
    webSocketOnClose(e) {
      console.log("与服务端连接关闭->", e);
    },
    openMessage(val) {
      if (val.approveState === "0") {
        const h = this.$createElement;
        this.$notify({
          title: "你有新的代办事项！",
          dangerouslyUseHTMLString: true,
          // showClose: false,
          message: h("p", null, [
            h("span", {
              class: "details", on: {
                click: () => { this.clickBtnDetails(val); }
              }
            }, "详情>"),
            h("p", null, '"' + this.receiveMessage.title + '"' + this.receiveMessage.approveStateName + "！"),
            h("p", null, "提交人：" + this.receiveMessage.submitUserName),
            h("p", null, "提交时间：" + this.receiveMessage.formatTime),
            h("span", {
              class: "daiban",
              on: {
                click: () => { this.clickBtnAgree(); }
              }
            }, "同意"),
            h("span", {
              class: "bohui",
              on: {
                click: () => { this.clickBtnReject(); }
              }
            }, "驳回"),
            h("span", {
              class: "zanbuchuli",
              on: {
                click: () => { this.clickBtnNotProcessedTemporarily(); }
              }
            }, "暂不处理")
          ]),
          duration: 0
        });
      } else if (val.approveState === "1") {
        const h = this.$createElement;
        this.$notify({
          title: "你有新的代办事项！",
          dangerouslyUseHTMLString: true,
          // showClose: false,
          message: h("p", null, [
            h("span", {
              class: "details", on: {
                click: () => { this.clickBtnDetails(val); }
              }
            }, "详情>"),
            h("p", null, '"' + this.receiveMessage.title + '"' + this.receiveMessage.approveStateName + "！"),
            h("p", null, "发布人：" + this.receiveMessage.issueUserName),
            h("p", null, "发布时间：" + this.receiveMessage.formatTime)
          ]),
          duration: 0
        });
      }
    },