一、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>
注意:后面就是等着签字端签完然后将签完的内容投送回来