websocket投送

一、websocket投送

a.vue页面实现websocket投送

1、点击页面投送调用websocket的初始化

html 复制代码
<template>
  <div class="cssFont" @click="goWebSocket">点击将页面投送</div>
</template>
<script>
export default {
  methods: {
    goWebSocket(){
        this.initWebSocket(); //调用初始化
    },
  }
}

</script>

2、methods里写好所有的websocket方法

html 复制代码
<template>
  <div class="cssFont" @click="goWebSocket">点击将页面投送</div>
</template>

<script>
export default {
  mounted() {
    
  },
  beforeDestroy() {
    this.websocketOnclose();
  },
  methods: {
    goWebSocket(){
        this.initWebSocket(); //调用初始化
    },
    initWebSocket: function () {
      const that = this;
      this.loading = true;
      that.websocketOnclose();
      let projectType = this.CQfrom.projectType; //项目类型
      let projectCode = this.CQfrom.projectCode; //项目code
      //   this.deviceVal 当前对接链接的设备
      let url = `${process.env.VUE_APP_WS_API}/websocket/${this.deviceVal}/${projectType}/${projectCode}`;
      this.websock = new WebSocket(url); //新建一个WebSocket的构造函数
      this.websock.onopen = this.websocketOnopen; //连接成功
      this.websock.onerror = this.websocketOnerror; //连接失败
      this.websock.onmessage = this.websocketOnmessage; //消息返回
      this.websock.onclose = this.websocketOnclose; //关闭websocket
    },

    websocketOnopen: function () {
      console.log("WebSocket连接成功");
      //开始
      let val = { val:'需要被投送的显示内容1',val2:'需要被投送的显示内容2'};
      val["username"] = store.getters.name;
      let params = {
        projectCode: val.projectCode,
        projectType: val.projectType,
        routeUrl: "/pgd/patientForm/deliveryBook",
        client: this.deviceVal,
        paramsJsonStr: JSON.stringify(val),//此处就是我传递需要渲染到签字页面上的数据,
        filePath: null,
        fileView: null,
      };

      if (this.CQfrom.projectId) {
        params["projectId"] = this.CQfrom.projectId;
      }

      this.loading = true;
      agreePush(params) //连接成功后调用的函数
        .then((res) => {
          this.loading = false;
          if (res.code === 200) {
            this.$message({
              message: `推送成功到设备${this.deviceVal}`,
              type: "success",
            });
            window.localStorage.setItem(`deviceVal`, this.deviceVal);
          }
        })
        .catch((err) => {
          this.loading = false;
        });
      //结束
    },
    websocketOnerror: function (e) {
      console.log("WebSocket连接发生错误");
      this.initWebSocket(); //连接发生错误重新连接
    },
    websocketOnmessage: function (e) {
      console.log("-----接收消息-------", e);
      if (JSON.parse(e.data)) {
        //接受返回的消息,如果接受到已经签字提交完成后,调用关闭websock接口,直接关闭
        //开始
        window.sessionStorage.setItem("pdfData", e.data);
        this.websock.onclose();
        setTimeout(() => {
          this.$router.go(-1);
        }, 100);
        //结束
      }
      console.log("-----接收消息-------", JSON.parse(e.data));
    },
    websocketOnclose: function (e) {//关闭websocket的接口
      if (e) {
        console.log("connection closed (" + JSON.parse(e.code) + ")");
      }
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.cssFont {
  font-size: 16px;
  color: #363e45;
  font-weight: 600;
  padding: 0 60px 0 60px;
  height: 46px;
  line-height: 46px;
  font-family: PingFangSC, PingFang SC;
}
</style>

注意:后面就是等着签字端签完然后将签完的内容投送回来

相关推荐
超人不会飛37 分钟前
vue3 markdown组件|大模型应用专用
前端·vue.js·人工智能
VillenK1 小时前
用插件的方式注入Vue组件
前端·vue.js
阿幸软件杂货间1 小时前
最新PDF版本!Acrobat Pro DC 2025,解压即用版
pdf·adobe acrobat·acrobat
等什么君!1 小时前
如何 正确使用 nrm 工具 管理镜像源
vue.js
warder2 小时前
字典状态管理:基于 Vue3 + Pinia 的工程化实践
vue.js
人工智能训练师2 小时前
在Ubuntu中如何使用PM2来运行一个编译好的Vue项目
linux·运维·服务器·vue.js·ubuntu·容器
浩星3 小时前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui
星空的资源小屋3 小时前
网易UU远程,免费电脑远程控制软件
人工智能·python·pdf·电脑
萌萌哒草头将军4 小时前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。4 小时前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js