websocket

src/router/index.js

@@ -35,7 +35,7 @@ const mainRoutes = {
     // 提示: 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
     { path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } },
     { path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } },
-    { path: '/msg-center', component: _import('modules/msg-center/announcement'), name: 'msgCenter', meta: { title: '我的消息中心' } }
+    { path: '/msg-center', component: _import('modules/msg-center/notice'), name: 'msgCenter', meta: { title: '我的消息中心' } }
     // { path: '/demo-echarts', component: _import('demo/echarts'), name: 'demo-echarts', meta: { title: 'demo-echarts', isTab: true } },
     // { path: '/demo-ueditor', component: _import('demo/ueditor'), name: 'demo-ueditor', meta: { title: 'demo-ueditor', isTab: true } }
   ],

src/store/modules/websocket.js

@@ -1,13 +1,10 @@
-const userId = localStorage.getItem('userId')
-const randomNum = localStorage.getItem('randomNum')
-
 export default {
   namespaced: true,
   state: {
     websock: null,
-    url: 'ws://112.74.164.79:10088/web_socket/' + userId + '_' + randomNum,
+    url: '',
     lockReconnect: false, // 是否真正建立连接
-    timeout: 25 * 1000, // 25秒一次心跳
+    timeout: 30 * 1000, // 25秒一次心跳
     timeoutObj: null, // 心跳心跳倒计时
     serverTimeoutObj: null, // 心跳倒计时
     timeoutnum: null, // 断开 重连倒计时
@@ -20,27 +17,26 @@ export default {
   },
   mutations: {
     WEBSOCKET_INIT (state, url) {
+      if (!state || !url) return
       const that = this
       state.websock = new WebSocket(url)
       state.url = url
       state.websock.onopen = function () {
-        console.log('连接成功') // 发送用户JWT令牌 后端解析后自动绑定用户
-        // state.websock.send('id:123')
-        // state.websock.send('OpenBarScanner')
+        console.log('连接成功')
         // 发送心跳包
         that.commit('websocket/start')
       }
       state.websock.onmessage = function (callBack) {
-        // console.log(callBack.data)
         // 重置心跳
-        // console.log(callBack.data)
+        // console.log('callBack = ' + callBack.data)
         that.commit('websocket/reset')
         if (callBack.data === 'heartCheck') {
           return
         }
-        state.message = callBack.data
+        // state.message = callBack.data
+        state.message = JSON.parse(JSON.stringify(callBack.data))
       }
-      state.websock.οnerrοr = function () { // e错误
+      state.websock.onerror = function () { // e错误
         // console.log(e)
         that.commit('websocket/reconnect')
       }
@@ -53,8 +49,7 @@ export default {
       state.websock.send(message)
     },
     reconnect (state) { // 重新连接
-      // console.log("重新连接")
-      var that = this
+      let that = this
       if (state.lockReconnect) {
         return
       }
@@ -65,7 +60,7 @@ export default {
         // 新连接
         that.commit('websocket/WEBSOCKET_INIT', state.url)
         state.lockReconnect = false
-      }, 5000)
+      }, 15000)
     },
     reset (state) { // 重置心跳
       // 清除时间
@@ -74,9 +69,9 @@ export default {
       // 心跳
       this.commit('websocket/start')
     },
-    start (state) { // 开启心跳
-      // console.log("开启心跳")
-      var that = this
+    start (state) {
+      // 开启心跳
+      let that = this
       state.timeoutObj && clearTimeout(state.timeoutObj)
       state.serverTimeoutObj && clearTimeout(state.serverTimeoutObj)
       state.timeoutObj = setTimeout(function () {

src/views/common/msg.vue

@@ -13,25 +13,27 @@
         dataForm: {}
       }
     },
-    mounted () {
-      const that = this
-      const h = this.$createElement
-      this.$nextTick(() => {
-        this.$store.state.websocket.webSocket.onmessage = async function (event) {
-          if (!event || !event.data) {
-            return
-          }
-          let json = JSON.parse(event.data)
-          console.log('json = ' + JSON.stringify(json))
-          if (json) {
-            that.$emit('noticeAdded', json.length)
+    computed: {
+      listenWebsocket () {
+        return this.$store.state.websocket.message
+      }
+    },
+    watch: {
+      listenWebsocket: function (data) {
+        if (!data || data.indexOf('[') !== 0) {
+          return
+        }
+        const h = this.$createElement
+        let json = JSON.parse(data)
+        console.log('json = ' + JSON.stringify(json))
+        if (json) {
+          this.$emit('noticeAdded', json.length)
+          if (json.length <= 5) {
             json.forEach((item) => {
-              that.$notify({
+              this.$notify({
                 title: item.title,
-                // dangerouslyUseHTMLString: true,
-                // message: h('i', {style: 'color: teal'}, item.content),
                 message: h('div', {}, [
-                  h('p', {}, '消息类别：' + that.getMsgType(item.type)),
+                  h('p', {}, '消息类别：' + this.getMsgType(item.type)),
                   h('p', {}, '消息内容：' + item.content)
                 ]),
                 duration: 0
@@ -39,8 +41,60 @@
             })
           }
         }
-      })
+      // const newmsg = JSON.parse(newstr)
+      // if (newstr && newstr.indexOf('[') === -1) {
+      //   // 收到信消息
+      //   this.$notification.open({
+      //     message: newmsg.objName,
+      //     description: newmsg.title
+      //   })
+        // // 刷新消息
+        // this.$store.dispatch('websocket/WEBSOCKET_SEND', 'refreshMessage')
+      // } else {
+      //   this.noticeData = []
+      //   this.messageData = []
+      //   this.msgCount = newmsg.length
+      //   for (var i = 0; i < newmsg.length; i++) {
+      //     var m = newmsg[i]
+      //     m.createDate = m.objName + ' · ' + this.nowTimeAgo(m.createDate)
+      //     if (m.messageType.indexOf('Notice') !== -1) {
+      //       this.noticeData.push(m)
+      //     }
+      //     if (m.messageType.indexOf('Message') !== -1) {
+      //       this.messageData.push(m)
+      //     }
+      //   }
+    //   }
+      }
     },
+    // mounted () {
+    //   const that = this
+    //   const h = this.$createElement
+    //   this.$nextTick(() => {
+    //     this.$store.state.websocket.webSocket.onmessage = async function (event) {
+    //       if (!event || !event.data) {
+    //         return
+    //       }
+    //       let json = JSON.parse(event.data)
+    //       console.log('json = ' + JSON.stringify(json))
+    //       if (json) {
+    //         that.$emit('noticeAdded', json.length)
+    //         json.forEach((item) => {
+    //           that.$notify({
+    //             title: item.title,
+    //             // dangerouslyUseHTMLString: true,
+    //             // message: h('i', {style: 'color: teal'}, item.content),
+    //             message: h('div', {}, [
+    //               h('p', {}, '消息类别：' + that.getMsgType(item.type)),
+    //               h('p', {}, '消息内容：' + item.content)
+    //             ]),
+    //             duration: 0
+    //           })
+    //         })
+    //       }
+    //     }
+    //   })
+    // },
     methods: {
       getMsgType (type) {
         if (!type) return '未知消息类型'

src/views/main.vue

@@ -92,8 +92,7 @@
             this.orgId = data.data.orgId
 
             // websocket初始化
-            localStorage.setItem('userId', data.data.userId)
-            localStorage.setItem('randomNum', (Math.ceil(Math.random() * 100000000)).toString())
+            this.$store.dispatch('websocket/WEBSOCKET_INIT', 'ws://112.74.164.79:10088/web_socket/' + data.data.userId + '_' + (Math.ceil(Math.random() * 100000000)).toString())
           }
         })
       }

src/views/modules/msg-center/notice.vue

@@ -0,0 +1,121 @@
+<!-- 订单 -->
+<template>
+  <div class="msg">
+    <el-form :inline="true" :model="dataForm" @keyup.enter.native="queryData()">
+      <el-form-item label="标题">
+        <el-input v-model="dataForm.title" clearable/>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="queryData()">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      @selection-change="selectionChangeHandle"
+      style="width: 100%;">
+      <el-table-column
+        label="序号"
+        type="index"
+        width="50"
+        align="center">
+      </el-table-column>
+      <el-table-column
+        prop="title"
+        header-align="center"
+        align="center"
+        width="300"
+        :show-tooltip-when-overflow="true"
+        label="消息标题">
+      </el-table-column>
+      <el-table-column
+        prop="content"
+        header-align="center"
+        align="center"
+        width="400"
+        :show-tooltip-when-overflow="true"
+        label="消息内容">
+      </el-table-column>
+      <el-table-column
+        prop="type"
+        header-align="center"
+        align="center"
+        label="消息类型">
+      </el-table-column>
+      <el-table-column
+        prop="publisherId"
+        header-align="center"
+        align="center"
+        label="发布人">
+      </el-table-column>
+      <el-table-column
+        prop="createTime"
+        header-align="center"
+        align="center"
+        width="160"
+        :show-tooltip-when-overflow="true"
+        label="发布时间">
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="150"
+        label="操作">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="checkNotice(scope.row.noticeId)">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'notice',
+    created () {
+      this.queryData()
+    },
+    data () {
+      return {
+        checkedVisible: false,
+        dataForm: {},
+        dataList: [],
+        dataListLoading: false,
+        dataListSelections: []
+      }
+    },
+    methods: {
+      // 查询
+      queryData () {
+        this.pageIndex = 1
+        this.getNoticeList()
+      },
+      // 获取数据列表
+      getNoticeList () {
+        let msg = JSON.parse(this.$store.state.websocket.message)
+        if (this.dataForm.title) {
+          this.dataList = msg.filter(item => item.title && item.title.indexOf(this.dataForm.title) !== -1)
+        } else {
+          this.dataList = msg
+        }
+      },
+      // 多选
+      selectionChangeHandle (val) {
+        this.dataListSelections = val
+      },
+      // 查看消息
+      checkNotice (id) {
+        // this.checkedVisible = true
+        // this.$nextTick(() => {
+        //   this.$refs.check.init(id)
+        // })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>