Merge branch 'message-config' into 'master'

websocket集成

See merge request pigbigbig/beyond-clouds-front!105

components/pc/pageHeader.vue

@@ -131,6 +131,7 @@
     <div class="click-top" v-if="showToTop" @click="clickToTop">
     <div class="click-top" v-if="showToTop" @click="clickToTop">
       <div class="click-top__triangle"></div>
       <div class="click-top__triangle"></div>
     </div>
     </div>
+    <notifications/>
   </div>
   </div>
 
 
 </template>
 </template>
@@ -208,7 +209,23 @@
           }
           }
         }
         }
       },
       },
-
+      sockets: {
+        connect(data) {
+          this.$notify({
+            title: '连接消息',
+            text: 'websocket连接成功',
+            type: 'success'
+          });
+        },
+        push_event(data) {
+          console.log(data)
+          this.$notify({
+            title: '新消息',
+            text: JSON.stringify(data),
+            type: 'success'
+          });
+        }
+      },
       methods:{
       methods:{
 
 
         playOneVideo(){
         playOneVideo(){

nuxt.config.js

@@ -44,7 +44,9 @@ module.exports = {
   */
   */
   plugins: [
   plugins: [
     '~/plugins/axios',
     '~/plugins/axios',
-    {src: '~/plugins/baidu.js'},
+    {src: '~/plugins/baidu.js', ssr: false},
+    {src: '~/plugins/websocket.js', ssr: false},
+    {src: '~/plugins/notifications.js', ssr: false},
     {src:'~/plugins/mavonEditor.js',ssr:false},
     {src:'~/plugins/mavonEditor.js',ssr:false},
     {src:'~/plugins/cropper.js',ssr:false},
     {src:'~/plugins/cropper.js',ssr:false},
     {src:'~/plugins/globalBux.js',ssr:false},
     {src:'~/plugins/globalBux.js',ssr:false},

package.json

@@ -21,7 +21,9 @@
     "koa": "^2.6.2",
     "koa": "^2.6.2",
     "mavon-editor": "^2.7.7",
     "mavon-editor": "^2.7.7",
     "nuxt": "^2.0.0",
     "nuxt": "^2.0.0",
-    "vue-cropper": "^0.4.9"
+    "vue-cropper": "^0.4.9",
+    "vue-notification": "^1.3.20",
+    "vue-socket.io": "^3.0.7"
   },
   },
   "devDependencies": {
   "devDependencies": {
     "@vue/test-utils": "^1.0.0-beta.27",
     "@vue/test-utils": "^1.0.0-beta.27",

plugins/notifications.js

+import Vue from 'vue';
+import Notifications from 'vue-notification'
+Vue.use(Notifications)

plugins/websocket.js

+import Vue from 'vue';
+import VueSocketIO from "vue-socket.io";
+import socketio from 'socket.io-client'
+
+export default function ({ app: { router }, store }) {
+  router.afterEach((to, from) => {
+    console.log(from.name)
+    if (from && (from.name === null || from.name === 'users-login')) {
+      const auth = store.state.auth;
+      if (auth.authenticated) {
+        console.log("检测到用户已登录，正在初始化websocket连接.")
+        const socket = new VueSocketIO({
+          debug: true,
+          connection: socketio('http://api.opensource.yundingshuyuan.com', {
+            query: 'token=' +  auth.token
+          }),
+          options: { path: "/socket.io" }
+        })
+        Vue.use(socket)
+      }
+    }
+  })
+
+}

store/message.js

+const defaultUser = {
+
+}
+export const state = () => ({
+  unReadCount: null,
+})
+
+export const mutations = {
+  setUnReadCount (state, unReadCount) {
+    Object.assign(state, {
+      unReadCount
+    })
+  },
+  clearUnReadCount (state) {
+    Object.assign(state, {
+      unReadCount: 0
+    })
+  }
+}