Merge branch 'master' of http://git.ycjcjy.com/welcome/screen

src/pages/page3.vue

@@ -56,7 +56,7 @@
         </div>
         <div :hidden="showSlide">
           <ul class="centerLabel userList">
-            <userList></userList>
+            <!-- <userList></userList> -->
           </ul>
         </div>
       </div>
@@ -70,11 +70,13 @@ import 'swiper/dist/css/swiper.css'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import solarLunar from 'solarLunar'
 import userList from '../components/userList'
+import XWebSocket from '../util/websocket'
 const { mapState: mapPageState, mapActions: mapPageActions, mapMutations: mapPageMutations } = createNamespacedHelpers('newIndex')
 export default {
   name: 'projectIndex',
   data () {
     return {
+      ws: null,
       userList: [{
         firstName: '111',
         gender: '1',
@@ -135,12 +137,18 @@ export default {
     userList
   },
   created () {
+    this.ws = new XWebSocket({
+      message: this.receviedMsg.bind(this),
+      delay: 10,
+      autoConnect: true
+    })
+    this.ws.connect(`ws://192.168.0.11/api/websocket/${this.$route.query.id}`)
     this.init()
     this.pageTimer = window.setInterval(() => {
       let curMin = new Date().getMinutes() - 0
       let curHour = new Date().getHours() - 0
       let curSec = new Date().getSeconds() - 0
-      if (!curMin) { // 整点刷新请求
+      if (!curMin && !curSec) { // 整点刷新请求
         if (curHour === 1 && !curSec) { // 1点刷新页面
           window.clearInterval(this.pageTimer)
           window.location.reload()
@@ -160,6 +168,9 @@ export default {
     ...mapPageMutations([
       'emptyPageDetail'
     ]),
+    receviedMsg (e) {
+      console.log('-----------------------', e, '<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<')
+    },
     init () { // 初始化
       this.emptyPageDetail()
       this.getDate()

src/util/websocket.js

@@ -0,0 +1,95 @@
+// const WsConnecting = 0
+const WsOpen = 1
+// const WsClosing = 2
+// const WsClosed = 3
+
+export default class XWebSocket {
+  addr = ''
+  client = null
+  autoConnect = false
+  interval = undefined
+  delay = 60
+  on = { open: null, message: null, error: null, close: null }
+
+  // constructor
+  constructor ({ open, message, error, close, delay, autoConnect }) {
+    this.on = { open, message, error, close }
+
+    if (delay >= 0) {
+      this.delay = delay
+    }
+
+    this.autoConnect = autoConnect
+  }
+
+  // 连接
+  connect (addr) {
+    this.addr = addr
+    this._wsInit()
+  }
+
+  // 发送
+  send (data) {
+    if (this.client && this.client.readyState === WsOpen) {
+      this.client.send(data)
+    }
+  }
+
+  // 关闭
+  close () {
+    if (!this.client) return
+
+    this._breforeClose(false)
+
+    this.client.close()
+    this.client = null
+  }
+
+  _breforeClose (autoConnect) {
+    this._wsClearHeartbeat()
+
+    if (this.client) {
+      if (!autoConnect) {
+        // 防止 onclose 中实现 断线重连
+        this.client.onclose = undefined
+      }
+    }
+  }
+
+  _wsInit () {
+    const _self = this
+
+    this.client = new window.WebSocket(this.addr)
+    this.client.onopen = this.on.open
+    this.client.onmessage = this.on.message
+    this.client.onerror = this.on.error
+    this.client.onclose = e => {
+      if (_self.on.close) {
+        _self.on.close(e)
+      }
+
+      _self._breforeClose(_self.autoConnect)
+      _self.client = null
+
+      if (_self.autoConnect) {
+        window.setTimeout(() => _self._wsInit(), _self.delay * 1000)
+      }
+    }
+
+    this._wsHeartbeat()
+  }
+
+  _wsHeartbeat () {
+    this.interval = window.setInterval(() => {
+      if (this.client && this.client.readyState === WsOpen) {
+        this.client.send(10)
+      }
+    }, 60 * 1000)
+  }
+
+  _wsClearHeartbeat () {
+    if (this.interval !== undefined) {
+      window.clearInterval(this.interval)
+    }
+  }
+}