feat: 🎸 利用websocket同步多个mock管理页数据,以及mock服务重启后重置mock管理页数据

lib/index.js

@@ -1,8 +1,9 @@
-const send = require('koa-send')
+const path = require('path')
 const Koa = require('koa')
 const fs = require('fs')
 const processMock = require('./processMock')
 const { logger } = require('./utils/index')
+const { WebSocketServer } = require('ws')
 // 使用router
 const Router = require('koa-router')
 const Boom = require('boom')
@@ -25,6 +26,7 @@ class KoaMockSwitch {
   constructor(config) {
     this.mockRoot = config.root
     this.port = config.port || 7777
+    this.wssPort = Number(this.port) + 1
     this.mockSwitchMap = config.switchMap || []
     this.apiPrefix = config.apiPrefix || ''
     this.apiSuffix = config.apiSuffix || '.json'
@@ -49,12 +51,14 @@ class KoaMockSwitch {
     app.on('error', (err, ctx) => {
       logger.error(`${ctx.url} error\n${err.stack}`)
     })
-    this._listen()
+    this._listenMockServer()
+    this._initWebsocket()
   }
 
-  _listen() {
+  _listenMockServer() {
     // 注意：这里的端口要和webpack里devServer的端口对应
     this._server = app.listen(this.port)
+    logger.info(`mock server is running at the port: ${ this.port }`)
 
     this._server.on('error', (err) => {
       logger.error(err.message)
@@ -63,6 +67,39 @@ class KoaMockSwitch {
     this._watchProcessStop()
   }
 
+  // 为了同步各个窗口的展示
+  _initWebsocket() {
+    const wss = new WebSocketServer({ port: this.wssPort })
+    const wsList = []
+    let mockSwitchTableData = null
+    logger.info(`ws is running at the port: ${ this.wssPort }`)
+
+    wss.on('connection', ws => {
+      wsList.push(ws)
+      // logger.info(wsList.length + ' ws connection')
+
+      // 如果mockSwitchTableData已经存在，则直接同步至新连接的窗口
+      if (mockSwitchTableData) {
+        ws.send(mockSwitchTableData)
+      }
+
+      ws.on('message', buffer => {
+        mockSwitchTableData = buffer.toString()
+        // 广播选择后的table数据
+        wsList.forEach(client => {
+          if (client !== ws) { // 不需要广播给自己
+            client.send(mockSwitchTableData)
+          }
+        })
+      })
+
+      ws.on('close', () => {
+        wsList.splice(wsList.indexOf(ws), 1)
+        // logger.info(wsList.length + ' ws left')
+      })
+    })
+  }
+
   _watchProcessStop() {
     // 信号量含义：http://nodejs.cn/api/process/signal_events.html
     ['SIGINT', 'SIGTERM', 'SIGHUP'].forEach(signal => {
@@ -175,16 +212,21 @@ class KoaMockSwitch {
     if (ctx.path.startsWith('/mock-switch/list')) {
       ctx.body = this.mockSwitchMap
     } else if (ctx.path.startsWith('/mock-switch/')) {
-      var fileName = ctx.path.substr('/mock-switch/'.length)
-      await send(
-        ctx,
-        './mockManagePage/' + (fileName || 'index.html'),
-        { root: __dirname + '/' }
-      )
+      ctx.set('Accept-Ranges', 'bytes')
+      ctx.set('Connection', 'keep-alive')
+      if (-1 < ctx.request.accept.headers.accept.indexOf('text/html')) {
+        ctx.set('Content-Type', 'text/html; charset=UTF-8')
+        let html = fs.readFileSync(path.resolve(__dirname, './mockManagePage/index.html'), 'utf8')
+        html = html.replace(/{{\s*?WS_PORT\s*?}}/, this.wssPort)
+        ctx.body = html
+      } else if (ctx.path === '/mock-switch/index.js') {
+        ctx.set('Content-Type', 'application/javascript; charset=UTF-8')
+        const js = fs.readFileSync(path.resolve(__dirname, './mockManagePage/index.js'), 'utf8')
+        ctx.body = js
+      }
     } else if (ctx.path.startsWith('/mock-switch')) {
       const mockValueRule = ctx.request.body.value
       const type = ctx.request.body.type
-
       // 如果接口类型为share，则说明要切换的是共享数据
       if (type === 'share') {
         const shareDataIndexPath = `${this.mockRoot}/$share/index.js`

lib/mockManagePage/index.html

@@ -52,6 +52,9 @@ <h2>接口管理</h2>
 	<script src="//unpkg.com/axios/dist/axios.min.js"></script>
   <script src="//unpkg.com/vue/dist/vue.min.js"></script>
   <script src="//unpkg.com/element-ui/lib/index.js"></script>
+	<script>
+		window.WS_PORT = {{ WS_PORT }};
+	</script>
   <script src="index.js"></script>
 </body>
 

lib/mockManagePage/index.js

@@ -3,7 +3,8 @@ new window.Vue({
   data() {
     return {
       apiTableData: [],
-      shareTableData: []
+      shareTableData: [],
+      ws: null
     }
   },
   mounted() {
@@ -17,13 +18,20 @@ new window.Vue({
         this.apiTableData = api
         this.shareTableData = share
       })
+
+    this.initWebsocket()
   },
   methods: {
     changeHandle(row, type) {
       window.axios.post('/mock-switch', {
         type,
         key: type === 'share' ? row.name : row.url,
-        value: row.status
+        value: row.status,
+      }).then(() => {
+        this.ws.send(JSON.stringify({
+          shareTableData: this.shareTableData,
+          apiTableData: this.apiTableData,
+        }))
       })
     },
 
@@ -34,6 +42,33 @@ new window.Vue({
         })
         data[i].status = data[i].selections[0].value
       }
+    },
+
+    initWebsocket() {
+      this.ws = new WebSocket('ws://localhost:' + window.WS_PORT)
+
+      this.ws.addEventListener('open', () => {
+        console.log('Connection opened.')
+      })
+
+      this.ws.addEventListener('message', (e) => {
+        const data = JSON.parse(e.data)
+        const { shareTableData, apiTableData } = data
+
+        if (shareTableData) {
+          this.shareTableData = shareTableData
+        }
+        if (apiTableData) {
+          this.apiTableData = apiTableData
+        }
+      })
+
+      this.ws.addEventListener('close', () => {
+        console.log('Connection closed.')
+        setTimeout(() => {
+          location.reload()
+        }, 1000)
+      })
     }
   }
 })

package.json

@@ -7,7 +7,7 @@
     "lib"
   ],
   "scripts": {
-    "mock": "nodemon -q ./demo/mockServer/server.js",
+    "mock": "nodemon -q --inspect ./demo/mockServer/server.js",
     "prepare": "husky install",
     "demo": "webpack-dev-server --open --config ./demo/webpack.config",
     "commit": "git-cz",
@@ -28,6 +28,11 @@
     "url": "https://github.com/CodeLittlePrince/mock-master/issues"
   },
   "homepage": "https://github.com/CodeLittlePrince/mock-master#readme",
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
   "devDependencies": {
     "@commitlint/cli": "^14.1.0",
     "@commitlint/config-conventional": "^14.1.0",
@@ -45,18 +50,13 @@
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.3"
   },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  },
   "dependencies": {
     "boom": "^7.3.0",
     "chalk": "^4.1.2",
     "koa": "^2.13.4",
     "koa-body": "^4.2.0",
     "koa-bodyparser": "^4.3.0",
     "koa-router": "^10.1.1",
-    "koa-send": "^5.0.1"
+    "ws": "^8.2.3"
   }
 }