webSocket封装部分

package.json

@@ -45,7 +45,8 @@
         "sass": "^1.53.0",
         "sass-loader": "^8.0.2",
         "svg-sprite-loader": "^6.0.11",
-    "vue-template-compiler": "^2.6.11"
+        "vue-template-compiler": "^2.6.11",
+        "@stomp/stompjs": "^5.0.0"
     },
     "eslintConfig": {
         "root": true,

src/main.js

@@ -19,6 +19,7 @@ import {TrydoFiles} from "@trydo/files-utils"
 // 引入全局通用自定义指令
 import '@/assets/js/directive';
 import '@/assets/js/directiveVideo';
+import stompSocket from "./utils/stompSocket"
 
 
 Vue.use(ElementUI);
@@ -34,6 +35,7 @@ Vue.prototype.$verify = verify;
 Vue.prototype.$clickThrottle = clickThrottle;
 Vue.prototype.$echarts = echarts;
 Vue.prototype.$TrydoFiles = TrydoFiles;
+Vue.prototype.$stompSocket = stompSocket;
 
 // vue使用vue-meta-info来动态设置标题
 Vue.use(MetaInfo)

src/pages/login/index.vue

@@ -46,12 +46,14 @@
           </el-form>
 
           <!--通过账号密码登录-->
-                    <el-form v-if="loginWay === 'account'" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" class="width100 mt-30 pt-5">
+          <el-form v-if="loginWay === 'account'" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0"
+                   class="width100 mt-30 pt-5">
             <el-form-item label="" prop="account">
               <el-input v-model.trim="ruleForm.account" placeholder="请输入手机号/账号" maxLength="18"></el-input>
             </el-form-item>
             <el-form-item label="" prop="password">
-                            <el-input v-model.trim="ruleForm.password" placeholder="请输入密码" maxLength="18" type="password"></el-input>
+              <el-input v-model.trim="ruleForm.password" placeholder="请输入密码" maxLength="18"
+                        type="password"></el-input>
             </el-form-item>
 
             <div class="flex mt-24">
@@ -71,6 +73,8 @@
   </div>
 </template>
 <script>
+import socketClass from "../../utils/stompSocket";
+
 export default {
   data() {
     const validatePhone = (rule, value, callback) => {
@@ -182,6 +186,7 @@ export default {
               // }
               this.$store.commit('setRoutes', url)
               this.$router.push(url)
+              this.$stompSocket.initStomp(a => this.socketSucc(a), b => this.socketErr(b));
             } else {
               this.$message.warning('未赋予数据权限！')
             }
@@ -198,7 +203,9 @@ export default {
         if (!errMsg) {
           // 验证成功，获取短信验证码
           // 防止重复点击
-                    if(!this.$clickThrottle()) { return }
+          if (!this.$clickThrottle()) {
+            return
+          }
           this.$fetchApi.sendVerifyCode(this.ruleForm.telephone).then(res => {
 
             this.codeBtnDisabled = true
@@ -260,8 +267,7 @@ export default {
         if (timeNum > 200) {
           clearInterval(scanCodeTimer);
           this.qrFail = true
-                }
+        } else {
-                else {
 
           this.$fetchApi.loginByQRCode(this.qrCodeInfo.verify).then(res => {
 
@@ -287,12 +293,22 @@ export default {
     },
     resetForm(formName) {
       this.$refs[formName].resetFields();
+    },
+
+    socketSucc(frame) {
+      console.log(frame, '---初始化成功!!!')
+    },
+    socketErr(frame) {
+      console.log(frame, '---初始化失败!!!')
     }
   }
 }
 </script>
 <style lang="scss" scoped>
-.login-logo{padding:20px 0 0 40px;}
+.login-logo {
+  padding: 20px 0 0 40px;
+}
+
 .login-wrap {
   width: 100%;
   height: 100%;
@@ -300,6 +316,7 @@ export default {
   background-size: cover;
   position: relative;
 }
+
 .login-box {
   width: 384px;
   height: 370px;
@@ -308,6 +325,7 @@ export default {
   top: 50%;
   margin-top: -185px;
 }
+
 .login-content {
   width: 100%;
   height: 100%;
@@ -321,25 +339,30 @@ export default {
   box-shadow: 0px 4px 4px 0px #00000014;
 
 }
+
 .login-tab {
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
 .login-btn {
   color: #fff;
   background-color: #5d78ff;
   border-color: #5d78ff;
+
   &:hover {
     background-color: #3758ff;
     border-color: #2a4eff;
   }
 }
+
 .login-qr-code-box {
   width: 260px;
   height: 260px;
   position: relative;
 }
+
 .login-qr-fail {
   width: 260px;
   height: 260px;
@@ -348,6 +371,7 @@ export default {
   top: 0;
   background: rgba(255, 255, 255, 0.8);
 }
+
 .login_footer_ad {
   position: fixed;
   bottom: 30px;
@@ -359,6 +383,7 @@ export default {
 .logo-wrap {
   height: 29px;
 }
+
 .logo-img {
   width: 58%;
   height: 24px;
@@ -372,6 +397,7 @@ export default {
       background-color: $color-white !important;
     }
   }
+
   .el-input__inner {
     border-top: 0 !important;
     border-left: 0 !important;
@@ -379,9 +405,11 @@ export default {
     border-radius: 0 !important;
     color: $color-text-primary;
   }
+
   .login-sms-code .el-input__inner {
     padding-right: 150px;
   }
+
   .login-sms-code-btn {
     top: 3px;
     right: 0;

src/utils/stompSocket.js

@@ -0,0 +1,66 @@
+import {Client,Message }from '@stomp/stompjs';
+
+let client = null;
+let url = 'wss://mediate.dev.trydotec.com/mediate/ws/websocket';
+let subscriptionMap = {};
+
+const socketClass = {
+    // 初始化
+    initStomp(succ, err) {
+        console.log('----过来了')
+        client = new Client({
+            brokerURL: url,
+            debug: function (str) {
+                console.log(str);
+            },
+        });
+        client.onConnect = succ;
+        client.onStompError = err;
+        client.activate();
+    },
+    // 关闭
+    deactivate() {
+        if (!client)return;
+        client.deactivate();
+        client = null;
+        subscriptionMap = {};
+    },
+    // 推送
+    publish(data) {
+        // data
+        // {
+        //   destination: '/topic/general',
+        //   body: 'Hello world',
+        //   headers: { priority: '9' },
+        // }
+        if (!client)return;
+        client.publish(data);
+    },
+    // 订阅
+    subscription(url, callback) {
+        // callback = function (message) {
+        //   // called when the client receives a STOMP message from the server
+        //   if (message.body) {
+        //     alert('got message with body ' + message.body);
+        //   } else {
+        //     alert('got empty message');
+        //   }
+        // };
+        if (!client)return;
+        subscriptionMap[url]  = client.subscribe(url, callback);
+    },
+    // 取消订阅
+    unsubscribe(url) {
+        if (!client)return;
+        if (url){
+            const a =  subscriptionMap[url];
+            if (a){
+                a.unsubscribe();
+                delete subscriptionMap[url]
+            }
+        }
+    }
+}
+
+
+export default socketClass;