封装socket
parent
5a1bb5fc69
commit
808bc47a2d
162
src/App.vue
162
src/App.vue
|
|
@ -5,93 +5,175 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import {setToken} from "./utils/auth";
|
||||
import { mapGetters } from "vuex";
|
||||
import { WS_URL } from "./utils/websocketApi";
|
||||
export default {
|
||||
name: 'App',
|
||||
name: "App",
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'oidcIsAuthenticated'
|
||||
])
|
||||
...mapGetters(["oidcIsAuthenticated"]),
|
||||
},
|
||||
provide(){
|
||||
data() {
|
||||
return {
|
||||
reload: this.reload
|
||||
}
|
||||
isRouterAlive: true,
|
||||
// socket参数
|
||||
socket: null,
|
||||
timeout: 10 * 1000, // 45秒一次心跳
|
||||
timeoutObj: null, // 心跳心跳倒计时
|
||||
serverTimeoutObj: null, // 心跳倒计时
|
||||
timeoutnum: null, // 断开 重连倒计时
|
||||
lockReconnect: false, // 防止
|
||||
websocket: null,
|
||||
};
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
isRouterAlive: true
|
||||
}
|
||||
mounted() {
|
||||
this.initWebSocket();
|
||||
},
|
||||
methods: {
|
||||
|
||||
reload(){
|
||||
this.isRouterAlive = false
|
||||
this.$nextTick(function(){
|
||||
this.isRouterAlive = true
|
||||
})
|
||||
initWebSocket() {
|
||||
// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
|
||||
let wsUrl = WS_URL;
|
||||
this.websocket = new WebSocket(wsUrl);
|
||||
this.websocket.onopen = this.websocketonopen;
|
||||
this.websocket.onerror = this.websocketonerror;
|
||||
this.websocket.onmessage = this.setOnmessageMessage;
|
||||
this.websocket.onclose = this.websocketclose;
|
||||
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
|
||||
// window.onbeforeunload = that.onbeforeunload
|
||||
},
|
||||
}
|
||||
}
|
||||
start() {
|
||||
console.log("start");
|
||||
//清除延时器
|
||||
this.timeoutObj && clearTimeout(this.timeoutObj);
|
||||
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
|
||||
this.timeoutObj = setTimeout(() => {
|
||||
if (this.websocket && this.websocket.readyState == 1) {
|
||||
//发送消息，服务端返回信息，即表示连接良好，可以在socket的onmessage事件重置心跳机制函数
|
||||
this.websocket.send("heartBath");
|
||||
} else {
|
||||
this.reconnect();
|
||||
}
|
||||
//定义一个延时器等待服务器响应，若超时，则关闭连接，重新请求server建立socket连接
|
||||
this.serverTimeoutObj = setTimeout(() => {
|
||||
this.websocket.close();
|
||||
}, this.timeout);
|
||||
}, this.timeout);
|
||||
},
|
||||
reset() {
|
||||
// 重置心跳
|
||||
// 清除时间
|
||||
clearTimeout(this.timeoutObj);
|
||||
clearTimeout(this.serverTimeoutObj);
|
||||
// 重启心跳
|
||||
this.start();
|
||||
},
|
||||
// 重新连接
|
||||
reconnect() {
|
||||
if (this.lockReconnect) return;
|
||||
this.lockReconnect = true;
|
||||
//没连接上会一直重连，设置延迟避免请求过多
|
||||
this.timeoutnum && clearTimeout(this.timeoutnum);
|
||||
this.timeoutnum = setTimeout(() => {
|
||||
this.initWebSocket();
|
||||
this.lockReconnect = false;
|
||||
}, 5000);
|
||||
},
|
||||
async setOnmessageMessage(event) {
|
||||
console.log(event.data, "获得消息");
|
||||
this.reset();
|
||||
// 自定义全局监听事件
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("onmessageWS", {
|
||||
detail: {
|
||||
data: event.data,
|
||||
},
|
||||
})
|
||||
);
|
||||
},
|
||||
websocketonopen() {
|
||||
//开启心跳
|
||||
this.start();
|
||||
console.log(
|
||||
"WebSocket连接成功!!!" + new Date() + "----" + this.websocket.readyState
|
||||
);
|
||||
},
|
||||
websocketonerror(e) {
|
||||
console.log("WebSocket连接发生错误" + e + ",重启socket");
|
||||
this.initWebSocket();
|
||||
},
|
||||
websocketclose(e) {
|
||||
this.websocket.close();
|
||||
clearTimeout(this.timeoutObj);
|
||||
clearTimeout(this.serverTimeoutObj);
|
||||
console.log("WebSocket连接关闭,重启socket");
|
||||
this.initWebSocket();
|
||||
},
|
||||
websocketsend(messsage) {
|
||||
that.websocket.send(messsage);
|
||||
},
|
||||
closeWebSocket() {
|
||||
// 关闭websocket
|
||||
that.websocket.close();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.flex{
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.flex-1{
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
.jc-c{
|
||||
.jc-c {
|
||||
justify-content: center;
|
||||
}
|
||||
.jc-sb{
|
||||
.jc-sb {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.jc-e{
|
||||
.jc-e {
|
||||
justify-content: end;
|
||||
}
|
||||
.ai-c{
|
||||
.ai-c {
|
||||
align-items: center;
|
||||
}
|
||||
.column{
|
||||
.column {
|
||||
flex-direction: column;
|
||||
}
|
||||
.fc-w{
|
||||
.fc-w {
|
||||
color: #fff;
|
||||
}
|
||||
.max-h{
|
||||
.max-h {
|
||||
height: 100%;
|
||||
}
|
||||
.max-w{
|
||||
.max-w {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fz-16{
|
||||
.fz-16 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.fz-14{
|
||||
.fz-14 {
|
||||
font-size: 14px;
|
||||
}
|
||||
.fz-10{
|
||||
.fz-10 {
|
||||
font-size: 10px;
|
||||
}
|
||||
.mt-1{
|
||||
.mt-1 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.mt-2{
|
||||
.mt-2 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.mr-1{
|
||||
.mr-1 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.mr-2{
|
||||
.mr-2 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.cursor{
|
||||
.cursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
.fw-b{
|
||||
.fw-b {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -125,4 +125,23 @@ export const diffArrFunc = (arr1, arr2) => {
|
|||
}
|
||||
}
|
||||
return diffArr
|
||||
}
|
||||
}
|
||||
|
||||
// 判断的是否是JSON字符串
|
||||
export const isJson=(str)=>{
|
||||
if (typeof str == 'string') {
|
||||
try {
|
||||
var obj = JSON.parse(str);
|
||||
// 等于这个条件说明就是JSON字符串 会返回true
|
||||
if (typeof obj == 'object' && obj) {
|
||||
return true;
|
||||
} else {
|
||||
//不是就返回false
|
||||
return false;
|
||||
}
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,7 +66,6 @@
|
|||
|
||||
<script>
|
||||
import { postMethodCommon, getMethodCommon } from "@/api/common.js";
|
||||
import { WS_URL } from "../../../utils/websocketApi";
|
||||
export default {
|
||||
name: "setting",
|
||||
props: ["globalmap"],
|
||||
|
|
@ -80,7 +79,7 @@ export default {
|
|||
},
|
||||
watch: {},
|
||||
created() {
|
||||
this.initWebSocket();
|
||||
|
||||
this.getListData();
|
||||
|
||||
// 首次加载页面获取在线人数
|
||||
|
|
@ -122,36 +121,7 @@ export default {
|
|||
},
|
||||
callUser() {
|
||||
this.$emit("callUser");
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket(WS_URL);
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log("WEBSOCKET-ONLINE");
|
||||
heartCheck = setInterval(function () {
|
||||
ws.send("HeartBeat");
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function () {
|
||||
ws.send("HeartBeat");
|
||||
}, 5000);
|
||||
};
|
||||
ws.onclose = function () {
|
||||
console.log("WEBSOCKET-CLOSED");
|
||||
clearInterval(heartCheck);
|
||||
_this.initWebSocket();
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export default {
|
|||
this.getList();
|
||||
},
|
||||
mounted() {
|
||||
this.initWebSocket();
|
||||
window.addEventListener("onmessageWS", this.getSocketData);
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
|
|
@ -66,46 +66,15 @@ export default {
|
|||
});
|
||||
},
|
||||
|
||||
initWebSocket() {
|
||||
getSocketData(res) {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket(WS_URL);
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log("WEBSOCKET-ONLINE");
|
||||
heartCheck = setInterval(function () {
|
||||
ws.send("HeartBeat");
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function () {
|
||||
ws.send("HeartBeat");
|
||||
}, 5000);
|
||||
if (evt.data && evt.data !== '发生数据') {
|
||||
let obj = JSON.parse(evt.data);
|
||||
|
||||
if (obj.Module) {
|
||||
if (obj.Module == "火情信息") {
|
||||
_this.getList();
|
||||
_this.$emit("getlistSocket");
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
console.log("WEBSOCKET-CLOSED");
|
||||
clearInterval(heartCheck);
|
||||
_this.initWebSocket();
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
this.$message({
|
||||
type: "warning",
|
||||
message: "您的浏览器不支持 WebSocket!",
|
||||
});
|
||||
if (!isJson(res.detail.data)) return;
|
||||
let obj = JSON.parse(evt.data);
|
||||
if (obj.Module) {
|
||||
if (obj.Module == "火情信息") {
|
||||
_this.getList();
|
||||
_this.$emit("getlistSocket");
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
<script>
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
import axios from "axios";
|
||||
import { WS_URL } from "../../../utils/websocketApi";
|
||||
import { isJson } from "../../../utils/index";
|
||||
export default {
|
||||
name: "toolbox",
|
||||
props: ["globalmap", "checkList", "checkNumber", "mergeSuccessRandom"],
|
||||
|
|
@ -111,7 +111,7 @@ export default {
|
|||
window.renyuan = this.renyuan;
|
||||
},
|
||||
mounted() {
|
||||
this.initWebSocket();
|
||||
window.addEventListener("onmessageWS", this.getSocketData);
|
||||
},
|
||||
methods: {
|
||||
deal() {
|
||||
|
|
@ -314,38 +314,15 @@ export default {
|
|||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
// // <span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="物资调度" >物资调度</span>
|
||||
initWebSocket() {
|
||||
getSocketData(res) {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket(WS_URL);
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log("WEBSOCKET-ONLINE");
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
if (!evt.data || evt.data == '发生数据') {
|
||||
return false;
|
||||
}
|
||||
let obj = JSON.parse(evt.data);
|
||||
|
||||
if (obj.Module) {
|
||||
if (obj.Module == "火情信息") {
|
||||
_this.getList();
|
||||
_this.$emit("getlistSocket");
|
||||
}
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
console.log("WEBSOCKET-CLOSED");
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
this.$message({
|
||||
type: "warning",
|
||||
message: "您的浏览器不支持 WebSocket!",
|
||||
});
|
||||
if (!isJson(res.detail.data)) return;
|
||||
let obj = JSON.parse(evt.data);
|
||||
if (obj.Module) {
|
||||
if (obj.Module == "火情信息") {
|
||||
_this.getList();
|
||||
_this.$emit("getlistSocket");
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue