💩 websocket

components/layouts/pc/header.vue

@@ -107,6 +107,7 @@
 <script>
 import {mapState} from 'vuex';
 import {isBrowser} from '~/environment';
+import sockClient from '~/plugins/sockjs';
 
 const Cookie = process.client ? require('js-cookie') : undefined
 export default {
@@ -270,6 +271,7 @@ export default {
     let user = this.user;
     if (user) {
       this.getUnreadNotifications();
+      sockClient.initSocket(this.$store.state.userInfo);
     }
   }
 

config/api.config.js

@@ -6,7 +6,7 @@ const apisMap = {
     BASE: 'http://localhost:8099/forest',
     CDN: '',
     PROXY: '/proxy',
-    SOCKET: 'http://localhost:3000',
+    SOCKET: 'http://localhost:3000/ws',
     GRAVATAR: '/proxy/static.rymcu.com/avatar'
   },
   production: {
@@ -14,7 +14,7 @@ const apisMap = {
     BASE: 'https://rymcu.com',
     CDN: 'https://static.rymcu.com',
     PROXY: 'https://static.rymcu.com/proxy',
-    SOCKET: 'https://rymcu.com',
+    SOCKET: 'https://rymcu.com/ws',
     GRAVATAR: 'https://static.rymcu.com/avatar'
   }
 }

io/index.js

@@ -1,28 +0,0 @@
-import http from 'http'
-import socketIO from 'socket.io'
-
-export default function () {
-  this.nuxt.hook('render:before', (renderer) => {
-    const server = http.createServer(this.nuxt.renderer.app)
-    const io = socketIO(server)
-
-    // overwrite nuxt.server.listen()
-    this.nuxt.server.listen = (port, host) => new Promise(resolve => server.listen(port || 3000, host || 'localhost', resolve))
-    // close this server on 'close' event
-    this.nuxt.hook('close', () => new Promise(server.close))
-
-    // Add socket.io events
-    const messages = []
-    io.on('connection', (socket) => {
-      socket.on('last-messages', function (fn) {
-        console.log('messages-client', messages);
-        fn(messages.slice(-50))
-      })
-      socket.on('all', function (message) {
-        console.log('message-client', message);
-        messages.push(message)
-        socket.broadcast.emit('new-message', message)
-      })
-    })
-  })
-}

nuxt.config.js

@@ -70,7 +70,6 @@ export default {
   ** Nuxt.js modules
   */
   modules: [
-    '~/io',
     '@nuxtjs/axios',
     '@nuxtjs/proxy',
     'js-cookie',
@@ -83,6 +82,9 @@ export default {
     ['/api', {
       target: apiConfig.BASE,  //api请求路径
       pathRewrite: {'^/api': isDevMode ? '/api/v1' : '/api'}  //重定向请求路径，防止路由、api路径的冲突
+    }],
+    ['/ws', {
+      target: apiConfig.BASE  //api请求路径
     }]
   ],
   /*

package.json

@@ -11,10 +11,10 @@
   },
   "dependencies": {
     "@chenfengyuan/vue-qrcode": "^1.0.2",
-    "@fortawesome/fontawesome-svg-core": "^1.2.34",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
-    "@fortawesome/free-brands-svg-icons": "^5.15.2",
+    "@fortawesome/free-brands-svg-icons": "^5.15.3",
-    "@fortawesome/free-regular-svg-icons": "^5.15.1",
+    "@fortawesome/free-regular-svg-icons": "^5.15.3",
-    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/vue-fontawesome": "^2.0.2",
     "@nuxtjs/axios": "^5.13.1",
     "babel-plugin-lodash": "^3.3.4",
@@ -23,19 +23,20 @@
     "element-ui": "^2.15.1",
     "express": "^4.17.1",
     "js-cookie": "^2.2.1",
-    "nuxt": "^2.15.2",
+    "net": "^1.0.2",
+    "nuxt": "^2.15.3",
     "raw-loader": "^4.0.2",
     "save-svg-as-png": "^1.4.17",
-    "socket.io": "^2.4.1",
+    "sockjs-client": "^1.5.0",
-    "socket.io-client": "^2.4.0",
+    "stompjs": "^2.3.3",
-    "vditor": "^3.8.2",
+    "vditor": "^3.8.3",
     "vue-cropperjs": "^4.2.0",
     "vuejs-avataaars": "^4.0.1"
   },
   "devDependencies": {
     "@nuxtjs/proxy": "^2.1.0",
     "lodash-webpack-plugin": "^0.11.6",
-    "node-sass": "^4.12.0",
+    "node-sass": "^5.0.0",
-    "sass-loader": "^9.0.3"
+    "sass-loader": "^10.1.1"
   }
 }

pages/admin/tag/post/_tag_id.vue

@@ -92,7 +92,8 @@ export default {
       tagIconPath: '',
       loading: false,
       isEdit: false,
-      tag: {}
+      tag: {},
+      notificationFlag: true
     }
   },
   methods: {
@@ -233,21 +234,27 @@ export default {
             message: title + '成功!'
           });
           _ts.$set(_ts, 'loading', false);
-          // _ts.getData();
+          _ts.$set(_ts, 'notificationFlag', false);
         }
       })
     }
   },
   beforeRouteLeave(to, from, next) {
-    this.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
+    let _ts = this;
+    if (_ts.notificationFlag) {
+      _ts.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         next();
       }).catch(() => {
+        _ts.$store.commit("setActiveMenu", "admin-tag-post");
         return false
       });
+    } else {
+      next();
+    }
   },
   beforeDestroy() {
     window.onbeforeunload = null;
@@ -265,7 +272,7 @@ export default {
       return '关闭提示';
     });
     let _ts = this;
-    this.$store.commit('setActiveMenu', 'postAdminTag');
+    this.$store.commit('setActiveMenu', 'admin-tag-post');
     this.$axios.$get('/api/upload/simple/token').then(function (res) {
       if (res) {
         _ts.$store.commit('setUploadHeaders', res.uploadToken);

pages/admin/topic/post/_topic_id.vue

@@ -106,7 +106,8 @@ export default {
         token: ''
       },
       topicIconPath: '',
-      isEdit: false
+      isEdit: false,
+      notificationFlag: true
     }
   },
   methods: {
@@ -246,6 +247,7 @@ export default {
             message: title + '成功!'
           });
           _ts.$set(_ts, 'loading', false);
+          _ts.$set(_ts, 'notificationFlag', false);
           _ts.contentEditor.setValue('');
           _ts.$router.push({
             path: `/admin/topic/${data.topicUri}`
@@ -255,15 +257,21 @@ export default {
     }
   },
   beforeRouteLeave(to, from, next) {
-    this.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
+    let _ts = this;
+    if (_ts.notificationFlag) {
+      _ts.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         next();
       }).catch(() => {
+        _ts.$store.commit("setActiveMenu", "admin-topic-post");
         return false
       });
+    } else {
+      next();
+    }
   },
   beforeDestroy() {
     window.onbeforeunload = null;

pages/article/post/_article_id.vue

@@ -87,7 +87,8 @@
         list: [],
         loading: false,
         doLoading: false,
-        isEdit: false
+        isEdit: false,
+        notificationFlag: true
       }
     },
     methods: {
@@ -232,6 +233,7 @@
             localStorage.removeItem('article-title');
             localStorage.removeItem('article-tags');
             _ts.contentEditor.setValue('');
+            _ts.$set(_ts, 'notificationFlag', false);
             _ts.$router.push({
               name: 'index'
             })
@@ -271,6 +273,7 @@
             localStorage.removeItem('article-tags');
             _ts.contentEditor.setValue('');
             _ts.$store.commit('article/clearDetailData')
+            _ts.$set(_ts, 'notificationFlag', false);
             _ts.$router.push({
               path: `/article/${res.id}`
             })
@@ -307,6 +310,7 @@
             localStorage.removeItem('article-title');
             localStorage.removeItem('article-tags');
             _ts.contentEditor.setValue('');
+            _ts.$set(_ts, 'notificationFlag', false);
             _ts.$router.push({
               path: `/draft/${res.id}`
             })
@@ -323,7 +327,9 @@
       }
     },
     beforeRouteLeave(to, from, next) {
-      this.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
+      let _ts = this;
+      if (_ts.notificationFlag) {
+        _ts.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
@@ -332,6 +338,10 @@
         }).catch(() => {
           return false
         });
+        _ts.$store.commit("setActiveMenu", "article-post");
+      } else {
+        next();
+      }
     },
     beforeDestroy() {
       window.onbeforeunload = null;
@@ -349,7 +359,7 @@
         return '关闭提示';
       });
       let _ts = this;
-      _ts.$store.commit('setActiveMenu', 'post-article');
+      _ts.$store.commit('setActiveMenu', 'article-post');
       const responseData = await _ts.$axios.$get('/api/upload/token');
       if (responseData) {
         _ts.$set(_ts, 'tokenURL', {

pages/chats/_nickname.vue

@@ -1,4 +1,4 @@
-template>
+<template>
   <client-only>
     <el-row class="wrapper" v-if="user">
       <el-col>
@@ -36,17 +36,12 @@ template>
 </template>
 
 <script>
-  import Vue from 'vue';
+import Vue from 'vue';
-  import {mapState} from 'vuex';
+import {mapState} from 'vuex';
-  import socket from '~/plugins/socket.io.js';
+import sockClient from '~/plugins/sockjs';
 
-  export default {
+export default {
   name: "Chat",
-    asyncData() {
-      return new Promise(resolve =>
-        socket.emit('last-messages', messages => resolve({messages}))
-      )
-    },
   computed: {
     ...mapState({
       user: state => state.userInfo
@@ -65,7 +60,8 @@ template>
       initEditor: false,
       isShow: true,
       loading: false,
-        to: {}
+      to: {},
+      messages: []
     }
   },
   watch: {
@@ -73,11 +69,6 @@ template>
       console.log(value);
     }
   },
-    beforeMount() {
-      socket.on('new-message', (message) => {
-        this.messages.push(message)
-      })
-    },
   methods: {
     _initEditor(data) {
       let _ts = this;
@@ -151,9 +142,7 @@ template>
           url: this.tokenURL.URL,
           linkToImgUrl: this.tokenURL.linkToImageURL,
           token: this.tokenURL.token,
-            filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
+          filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').replace('/\\s/g', '')
-            replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
-            replace('/\\s/g', '')
         },
         height: data.height,
         counter: 102400,
@@ -175,7 +164,7 @@ template>
       }
       _ts.messages.push(message);
       _ts.contentEditor.setValue('')
-        socket.emit('all', message);
+      sockClient.sendMessage(message)
     }
   },
   async mounted() {
@@ -213,13 +202,13 @@ template>
       }, 500);
     }
   }
-  }
+}
 </script>
 
 <style lang="scss">
-  @import "~vditor/src/assets/scss/index.scss";
+@import "~vditor/src/assets/scss/index.scss";
 
-  .from-message {
+.from-message {
   float: right;
   width: auto;
   min-height: 40px;
@@ -235,9 +224,9 @@ template>
   border-radius: 6px;
   position: relative;
   word-break: break-all;
-  }
+}
 
-  .to-message {
+.to-message {
   float: left;
   width: auto;
   min-height: 40px;
@@ -253,9 +242,9 @@ template>
   border-radius: 6px;
   position: relative;
   word-break: break-all;
-  }
+}
 
-  .from-message::after {
+.from-message::after {
   content: '';
   position: absolute;
   top: 50%;
@@ -266,10 +255,10 @@ template>
   background: inherit;
   /*自动继承父元素的背景*/
   transform: rotate(45deg);
-  }
+}
 
-  /** 通过对小正方形旋转45度解决 **/
+/** 通过对小正方形旋转45度解决 **/
-  .to-message::before {
+.to-message::before {
   content: '';
   position: absolute;
   top: 50%;
@@ -280,5 +269,5 @@ template>
   background: inherit;
   /*自动继承父元素的背景*/
   transform: rotate(45deg);
-  }
+}
 </style>

pages/portfolio/post/_portfolio_id.vue

@@ -138,7 +138,8 @@ export default {
       headImgUrl: '',
       cropImg: '',
       isEdit: false,
-      autoCrop: true
+      autoCrop: true,
+      notificationFlag: true
     }
   },
   methods: {
@@ -282,6 +283,7 @@ export default {
             type: 'success',
             message: title + '成功!'
           });
+          _ts.$set(_ts, 'notificationFlag', false);
           _ts.$router.push({
             path: '/portfolio/' + res.idPortfolio
           })
@@ -305,6 +307,7 @@ export default {
             if (res.message) {
               _ts.$message(res.message);
             } else {
+              _ts.$set(_ts, 'notificationFlag', false);
               _ts.$router.push({
                 path: '/user/' + _ts.$store.state.userInfo?.nickname
               })
@@ -339,15 +342,21 @@ export default {
     }
   },
   beforeRouteLeave(to, from, next) {
-    this.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
+    let _ts = this;
+    if (_ts.notificationFlag) {
+      _ts.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         next();
       }).catch(() => {
+        _ts.$store.commit("setActiveMenu", "portfolio-post");
         return false
       });
+    } else {
+      next();
+    }
   },
   beforeDestroy() {
     window.onbeforeunload = null;

pages/user/_nickname.vue

@@ -35,7 +35,7 @@
             <div v-if="oauth.idUser !== user.idUser">
               <el-button type="primary" v-if="isFollow" @click="cancelFollowUser(user.idUser)" plain>取消关注</el-button>
               <el-button type="primary" v-else @click="followUser(user.idUser)" plain>关注</el-button>
-              <el-button v-show="false" @click="gotoChats" plain>聊天</el-button>
+              <el-button @click="gotoChats" plain>聊天</el-button>
             </div>
           </div>
           <div v-else>

plugins/socket.io.js

@@ -1,8 +0,0 @@
-import io from 'socket.io-client'
-import apiConfig from '~/config/api.config'
-
-const socket = io(apiConfig.SOCKET, {
-  transports: ['websocket']
-})
-
-export default socket

plugins/sockjs.js

@@ -0,0 +1,72 @@
+import SockJS from 'sockjs-client'
+import Stomp from 'stompjs'
+
+import apiConfig from '~/config/api.config'
+
+export default {
+  socket: null,
+  stompClient: null,
+  headers: null,
+  successCallback() {
+    let _ts = this;
+    _ts.stompClient.subscribe(`/user/${_ts.headers.id}/message`, (msg) => {
+      let message = JSON.parse(msg.body);
+      console.log(message.dataType)
+      switch (message.dataType) {
+        case 0:
+          console.log(message.content)
+          break;
+        case 1:
+          console.log(message.to)
+          break;
+        default:
+          console.log(message)
+      }
+    }, _ts.headers);
+    _ts.stompClient.subscribe('/topic/greening', (msg) => {
+      console.log('pub', JSON.parse(msg.body));
+    });
+  },
+  initSocket: function (user) {
+    let _ts = this;
+    _ts.socket = new SockJS(apiConfig.SOCKET);
+    _ts.stompClient = Stomp.over(_ts.socket);
+    let headers = {
+      id: user.nickname
+    }
+    _ts.headers = headers;
+    _ts.stompClient.connect(_ts.headers, () => {
+      _ts.successCallback();
+    }, (err) => {
+      console.log(err)
+      _ts.reconnect(apiConfig.SOCKET, _ts.successCallback)
+    })
+  },
+  // 断开重连使用定时器定时连接服务器
+  reconnect(socketUrl, successCallback) {
+    console.info('in reconnect function')
+    let connected = false
+    let _ts = this
+    const reconInv = setInterval(() => {
+      console.info('in interval' + Math.random())
+      _ts.socket = new SockJS(socketUrl)
+      _ts.stompClient = Stomp.over(this.socket)
+      _ts.stompClient.connect({}, (frame) => {
+        console.info('reconnected success')
+        // 连接成功，清除定时器
+        clearInterval(reconInv)
+        connected = true
+        successCallback()
+      }, () => {
+        console.info('reconnect failed')
+        console.info('connected:' + connected)
+        if (connected) {
+          console.info('connect .... what?')
+        }
+      })
+    }, 2000)
+  },
+  sendMessage: function (message) {
+    this.stompClient.send('/app/message', {}, JSON.stringify(message))
+  }
+}

server/index.js

@@ -1,8 +1,6 @@
 const { Nuxt, Builder } = require('nuxt')
 
-const http = require('http')
 const app = require('express')()
-const socketio = require('socket.io')
 const isProd = (process.env.NODE_ENV === 'production')
 const port = process.env.PORT || 3000
 
@@ -10,8 +8,6 @@ const port = process.env.PORT || 3000
 const config = require('./nuxt.config.js')
 config.dev = !isProd
 const nuxt = new Nuxt(config)
-const server = new http.Server(app)
-const io = socketio(server, { transports: ['websocket'] })
 
 // 用 Nuxt.js 渲染每个路由
 app.use(nuxt.render)
@@ -28,21 +24,5 @@ if (config.dev) {
 function listen () {
   // 服务端监听
   app.listen(port, '0.0.0.0')
-  console.log('Server listening on `localhost:' + port + '`.')
+  console.log(`Server listening on localhost:${port}.`)
 }
-
-// Socket.io
-const messages = []
-io.on('connection', (socket) => {
-  socket.on('last-messages', function (fn) {
-    console.log('messages-server', messages);
-    fn(messages.slice(-50))
-  });
-
-  socket.on('all', function (message) {
-    console.log('message-server', message);
-    messages.push(message)
-    socket.broadcast.emit('new-message', message)
-  });
-
-})