feat: add websocket

.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
   },
   plugins: ['vue'],
   rules: {
+    'import/prefer-default-export': 'off',
     'vue/script-setup-uses-vars': 0,
     'vue/multi-word-component-names': 0,
     'prefer-rest-params': 0,

package.json

@@ -11,20 +11,17 @@
   },
   "dependencies": {
     "@vitejs/plugin-vue": "^1.10.2",
-    "rollup-plugin-visualizer": "^5.5.2",
     "axios": "^0.24.0",
     "element-plus": "^1.2.0-beta.5",
     "mitt": "^3.0.0",
     "naive-ui": "^2.21.5",
     "qs": "^6.10.2",
+    "rollup-plugin-visualizer": "^5.5.2",
     "vite": "^2.7.1",
     "vue": "^3.2.24",
     "vue-router": "4.0.12"
   },
   "devDependencies": {
-    "husky": "^7.0.4",
-    "lint-staged": "^12.1.2",
-    "standard-version": "^9.3.2",
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
     "@vue/cli-plugin-eslint": "^4.5.15",
@@ -34,7 +31,10 @@
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-vue": "^8.2.0",
-    "sass": "^1.44.0"
+    "husky": "^7.0.4",
+    "lint-staged": "^12.1.2",
+    "sass": "^1.44.0",
+    "standard-version": "^9.3.2"
   },
   "lint-staged": {
     "*.{js,jsx,vue}": [

src/api/ws.js

@@ -0,0 +1,57 @@
+import mitt from 'mitt';
+import { WS_TYPE } from '@/constant';
+import { getToken } from '@/utils/util';
+
+let ws;
+const emitter = mitt();
+
+const reconnect = async () => new Promise((resolve, reject) => {
+  ws = new WebSocket('ws://localhost:8001', [getToken()]);
+  ws.onopen = () => {
+    console.log('ws: open');
+    ws.send(JSON.stringify({
+      type: '',
+      data: getToken(),
+    }));
+    resolve();
+  };
+
+  ws.onclose = () => {
+    console.log('ws: onclose');
+  };
+
+  ws.onerror = () => {
+    console.log('ws: onerror');
+    reject();
+  };
+
+  ws.onmessage = (result) => {
+    const { type, data } = JSON.parse(result.data);
+    if (!WS_TYPE[type]) return;
+    emitter.emit(WS_TYPE[type], data);
+  };
+});
+reconnect();
+
+const close = (reason) => {
+  if (!ws) return;
+  ws.close(1000, reason);
+};
+
+const send = async (data) => {
+  if (!ws || ws.readyState !== ws.OPEN) {
+    await reconnect();
+  }
+  ws.send(data);
+};
+
+window.onbeforeunload = () => {
+  close();
+};
+
+export {
+  WS_TYPE,
+  emitter,
+  close,
+  send,
+};

src/constant/WS_TYPE.js

@@ -0,0 +1,3 @@
+export default {
+  MESSAGE: 'MESSAGE',
+};

src/constant/index.js

@@ -1,7 +1,9 @@
 import ROLE from '@/constant/ROLE';
 import REG_EXP from '@/constant/REG_EXP';
+import WS_TYPE from '@/constant/WS_TYPE';
 
 export {
   ROLE,
   REG_EXP,
+  WS_TYPE,
 };

src/utils/helpers.js

@@ -1,3 +1,5 @@
+import { close } from '@/api/ws';
+
 function validateRefs(refs) {
   refs = refs || Object.keys(this.$refs);
   const errors = refs.filter((ref) => this.$refs[ref] && 'validate' in this.$refs[ref] && typeof this.$refs[ref].validate === 'function').map((ref) => this.$refs[ref].validate()).filter((val) => !!val);
@@ -23,6 +25,7 @@ function checkRes(res) {
 }
 
 function signOut(href = '') {
+  close();
   window.localStorage.removeItem('token');
   window.location.href = href;
 }

src/views/User.vue

@@ -3,15 +3,33 @@
     <h1>This is an user page</h1>
     {{ $user }}
     <router-link to="/">Return Home</router-link>
+    <el-button @click="send" type="primary">Send</el-button>
+    <el-button @click="close" type="primary">Close</el-button>
   </div>
 </template>
 
 <script>
+import {
+  send, close, emitter, WS_TYPE,
+} from '@/api/ws';
+
+emitter.on(WS_TYPE.MESSAGE, (data) => {
+  console.log(data);
+});
+
 export default {
   computed: {
     $user() {
       return this.$router.$user;
     },
   },
+  methods: {
+    send() {
+      send(JSON.stringify(this.$router.$user));
+    },
+    close() {
+      close('close');
+    },
+  },
 };
 </script>