Docker.vue 添加 websocket 连接, 通过 websocket 来管理 docker

src/views/devops/machine/Docker.vue

@@ -3,8 +3,12 @@
     <el-header height="220">
       <h3>Docker 容器列表</h3>
       <el-row style="margin-top: 10px">
-        <el-button size="mini" type="success" icon="el-icon-refresh" style="margin-left: 5px" @click="onRefresh">刷新</el-button>
-        <el-button size="mini" type="success" icon="el-icon-files" style="margin-left: 5px" @click="onGetImages">镜像列表</el-button>
+        <span>
+          <span v-if="wsConnectStatus" style="color: green; margin: 5px">WebSocket 已连接</span>
+          <span v-if="!wsConnectStatus" style="color: red; margin: 5px">WebSocket 未连接</span>
+        </span>
+        <el-button size="mini" type="warning" icon="el-icon-refresh" style="margin-left: 5px" @click="onRefresh">刷新</el-button>
+        <el-button size="mini" type="warning" icon="el-icon-files" style="margin-left: 5px" @click="onGetImages">镜像列表</el-button>
       </el-row>
     </el-header>
     <el-main>
@@ -126,12 +130,16 @@ export default {
       dataList: [],
       dockerContainerList: [],
       showImageDialog: false,
-      dataList1: []
+      dataList1: [],
+      wsClient: null,
+      wsConnectStatus: false,
+      wsReconnectLock: false
     }
   },
   created() {
     document.title = 'Docker 列表'
     this.getData()
+    this.initWebSocket()
   },
   methods: {
     getData() {
@@ -234,6 +242,11 @@ export default {
     },
     onRefresh() {
       this.getData()
+
+      const jsonPayload = {}
+      jsonPayload.machineId = '123456'
+      jsonPayload.ops = 'images'
+      this.sendMessage(JSON.stringify(jsonPayload))
     },
     onGetImages() {
       this.dataList1 = []
@@ -248,6 +261,57 @@ export default {
         this.$message.error(error.message)
       })
     },
+    // ****************************************************************************************************************
+    // WebSocket相关
+    // ****************************************************************************************************************
+    initWebSocket() {
+      if ('WebSocket' in window) {
+        const wsUrl = 'ws://localhost:4030/bgws/frontend'
+        this.wsClient = new WebSocket(wsUrl)
+        const that = this
+        this.wsClient.onopen = function() {
+          that.setOnline()
+        }
+        this.wsClient.onclose = function() {
+          that.setOffline()
+          that.reconnect()
+        }
+        this.wsClient.onerror = function() {
+          that.setOffline()
+          console.log('websocket connection error...')
+          that.reconnect()
+        }
+        this.wsClient.onmessage = function(evt) {
+          const message = JSON.parse(evt.data)
+          that.processMessage(message)
+        }
+      } else {
+        // 浏览器不支持 WebSocket
+        this.$message.error('您的浏览器不支持 WebSocket!')
+      }
+    },
+    setOnline() {
+      this.wsConnectStatus = true
+    },
+    setOffline() {
+      this.wsConnectStatus = false
+    },
+    reconnect() {
+      if (this.wsReconnectLock) return
+      this.wsReconnectLock = true
+      const that = this
+      setTimeout(function() {
+        console.log('websocket reconnecting...')
+        that.initWebSocket()
+        that.wsReconnectLock = false
+      }, 5000)
+    },
+    sendMessage(message) {
+      this.wsClient.send(message)
+    },
+    processMessage(message) {
+      console.log(message)
+    }
   }
 }
 </script>