修改websocket

ruoyi-ui/package.json

@@ -29,11 +29,14 @@
     "mockjs": "^1.1.0",
     "nprogress": "0.2.0",
     "pinia": "2.0.22",
+    "socket.io-client": "^4.6.1",
     "vue": "3.2.45",
+    "vue-3-socket.io": "^1.0.5",
     "vue-count-to": "^1.0.13",
     "vue-cropper": "1.0.3",
     "vue-i18n": "^9.2.2",
     "vue-router": "4.1.4",
+    "vue-socket.io": "^3.0.10",
     "vue3-count-to": "^1.1.2"
   },
   "devDependencies": {

ruoyi-ui/src/main.js

@@ -45,6 +45,7 @@ import TreeSelect from '@/components/TreeSelect'
 import DictTag from '@/components/DictTag'
 import {useI18n} from "vue-i18n";
 
+
 const app = createApp(App)
 
 // 全局方法挂载

ruoyi-ui/src/views/index.vue

@@ -110,7 +110,8 @@
           </div>
         </el-footer>
       </el-container>
-      <el-aside style="background-color: rgba(0,0,0,0.3);overflow: auto;margin-bottom: 0;height: calc(100vh - 84px)" width="350px">
+      <el-aside style="background-color: rgba(0,0,0,0.3);overflow: auto;margin-bottom: 0;height: calc(100vh - 84px)"
+                width="350px">
         <div v-for="i in 60" style="position:relative;color:#fff;height: 120px;">
           <img src="../assets/icons/highTemperature.png"
                style="width: 40px;height: 40px;position: absolute;top: 10px;left: 0px">
@@ -132,6 +133,7 @@ import * as echarts from 'echarts';
 // import resize from './mixins/resize'
 import chinaMap from './china.json'
 
+
 const animationDuration = 6000
 
 export default {
@@ -324,6 +326,7 @@ export default {
       this.initChart()
       this.initCarChart()
       this.initTyreChart()
+      this.getErrInfo()
     })
   },
   beforeDestroy() {
@@ -372,7 +375,7 @@ export default {
         geo: {
           show: true,
           map: this.mapName,
-          zoom:1.2,
+          zoom: 1.2,
           label: {
             normal: {
               show: false
@@ -404,7 +407,6 @@ export default {
             label: {
               normal: {
                 formatter: (e) => {
-                  console.log(e)
                   return e.data.name
                 },
                 position: 'right',
@@ -424,7 +426,7 @@ export default {
             type: 'map',
             map: 'china',
             geoIndex: 0,
-            zoom:1.6,
+            zoom: 1.6,
             aspectScale: 0.75, //长宽比
             showLegendSymbol: false, // 存在legend时显示
             label: {
@@ -639,18 +641,31 @@ export default {
         ],
       })
     },
-    getErrInfo(){
-      if( typeof(WebSocket) != "function" ) {
+    getErrInfo() {
+      if (typeof (WebSocket) != "function") {
         alert("您的浏览器不支持Websocket通信协议")
         return
       }
+      let url = "ws://127.0.0.1:8080/websocket/message";  //请求的后端地址
+
+      let websocket = null;//全局WebSocket对象
+      let lockReconnect = false; // 网络断开重连
+      let wsCreateHandler = null; // 创建连接
+
+      websocket = new WebSocket(url)
+      websocket.onopen = function(event) {
+        console.log("服务已连接")
+      };
+      websocket.onmessage = function(event){
+        console.log(event)
+      }
 
     }
   }
 }
 </script>
 <style>
-.indexBg{
-  background-image:url('../assets/images/indexBg.jpg');
+.indexBg {
+  background-image: url('../assets/images/indexBg.jpg');
 }
 </style>

ruoyi-ui/vite.config.js

@@ -13,7 +13,8 @@ export default defineConfig(({mode, command}) => {
         // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
         // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
         base: VITE_APP_ENV === 'production' ? '/' : '/',
-        plugins: [createVitePlugins(env, command === 'build'),basicSsl()],
+        plugins: createVitePlugins(env, command === 'build'),
+        // plugins: [createVitePlugins(env, command === 'build'),basicSsl()],
         resolve: {
             // https://cn.vitejs.dev/config/#resolve-alias
             alias: {
@@ -29,7 +30,7 @@ export default defineConfig(({mode, command}) => {
         server: {
             port: 80,
             host: true,
-            https:true,
+            // https:true,
             open: true,
             proxy: {
                 '/dev-api': {