开发ws链接

stdiet-ui/src/main.js

@@ -18,12 +18,15 @@ import "./permission"; // permission control
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
 import VueScrollTo from "vue-scrollto";
-import VueResource from "vue-resource"
-import HighchartsVue from 'highcharts-vue'
-import Highcharts from 'highcharts'
+import VueResource from "vue-resource";
+import HighchartsVue from "highcharts-vue";
+import Highcharts from "highcharts";
+import { init } from "@/utils/websocket";
 //图片导出模块
-import exportingInit from 'highcharts/modules/exporting'
-exportingInit(Highcharts)
+import exportingInit from "highcharts/modules/exporting";
+exportingInit(Highcharts);
+
+init();
 
 import {
   addDateRange,
@@ -111,7 +114,7 @@ Vue.use(VueScrollTo, {
   y: true
 });
 
-Vue.use(VueResource)
+Vue.use(VueResource);
 
 new Vue({
   el: "#app",

stdiet-ui/src/utils/websocket.js

@@ -0,0 +1,57 @@
+import { getToken } from "./auth";
+
+const { protocol, hostname, origin, port } = window.location;
+const wsProtocol = protocol.startsWith("https") ? "wss" : "ws";
+const url = `${wsProtocol}://${hostname}${
+  port === "80" || port === "443" ? "" : `:${8091}`
+}/ws`;
+let ws = undefined;
+let intervalRef = undefined;
+
+function handleOnMessageReceive(event) {
+  console.log({ event });
+}
+
+function connect() {
+  try {
+    ws = new WebSocket(url);
+
+    ws.onopen = event => {
+      console.log("ws连接成功");
+      intervalRef && clearInterval(intervalRef);
+
+      document.addEventListener("message", handleOnMessageReceive);
+    };
+
+    ws.onmessage = event => {
+      console.log({ event });
+
+      const dataObj = JSON.parse(event.data || "{}");
+
+      if (dataObj.type && dataObj.type !== "WS_TYPE_HEART_BEAT") {
+        window.postMessage(dataObj, origin);
+      }
+    };
+
+    ws.onerror = event => {
+      console.log({ event });
+      ws = undefined;
+      document.removeEventListener("message", handleOnMessageReceive);
+    };
+
+    ws.onclose = event => {
+      ws = undefined;
+      document.removeEventListener("message", handleOnMessageReceive);
+    };
+  } catch (error) {
+    console.log(error);
+    console.log("浏览器不支持websocket");
+  }
+}
+
+export function init() {
+  intervalRef = setInterval(() => {
+    console.log("尝试连接websocket");
+    !ws && connect();
+  }, 10000);
+}