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

@@ -1,7 +1,7 @@
 <template>
   <div class="login-wrap">
     <div class="login-logo">
-            <img src="../../assets/image/login-logo.png" height="40" alt="" >
+      <img src="../../assets/image/login-logo.png" height="40" alt="">
     </div>
     <div class="login-box">
       <div class="login-content flex-column-center">
@@ -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,16 +73,18 @@
   </div>
 </template>
 <script>
+import socketClass from "../../utils/stompSocket";
+
 export default {
   data() {
-        const validatePhone = (rule,value,callback)=>{
+    const validatePhone = (rule, value, callback) => {
-            if (!value){
+      if (!value) {
         callback(new Error('请输入11位手机号码'));
       }
       //使用正则表达式进行验证手机号码
-            else if (!/^1[3456789]\d{9}$/.test(value)){
+      else if (!/^1[3456789]\d{9}$/.test(value)) {
         callback(new Error('手机号不正确！'));
-            }else{
+      } else {
         callback()
       }
     };
@@ -100,16 +104,16 @@ export default {
       },
       rules: {
         telephone: [
-                    { validator: validatePhone, trigger: 'blur' }
+          {validator: validatePhone, trigger: 'blur'}
         ],
         smsCode: [
-                    { required: true, message: '请输入短信验证码', trigger: 'blur' }
+          {required: true, message: '请输入短信验证码', trigger: 'blur'}
         ],
         account: [
-                    { required: true, message: '请输入手机号', trigger: 'blur' }
+          {required: true, message: '请输入手机号', trigger: 'blur'}
         ],
         password: [
-                    { required: true, message: '请输入密码', trigger: 'blur' }
+          {required: true, message: '请输入密码', trigger: 'blur'}
         ],
       },
       timer: null,
@@ -124,17 +128,17 @@ export default {
           let telephone = this.$util.encryptByDES(this.strKey, this.ruleForm.telephone)
           let smsCode = this.$util.encryptByDES(this.strKey, this.ruleForm.smsCode)
           let formData = {
-                            'phone':telephone,
+            'phone': telephone,
-                            'code':smsCode,
+            'code': smsCode,
-                            'type':2,
+            'type': 2,
-                            'platform':2
+            'platform': 2
           }
           this.$fetchApi.login(formData).then(res => {
             sessionStorage.setItem('token', res.token)
             this.$store.commit('setToken', res.token)
             sessionStorage.setItem('userInfo', JSON.stringify(res.user))
             this.$store.commit('setUserInfo', res.user)
-                            if(res.user.resources.length > 0){
+            if (res.user.resources.length > 0) {
               let url = "/workbench";
               // let data= res.user.resources[0].children[0]
               // if(data.children.length>0){
@@ -144,7 +148,7 @@ export default {
               // }
               this.$store.commit('setRoutes', url)
               this.$router.push(url)
-                            }else{
+            } else {
               this.$message.warning('未赋予数据权限！')
             }
           })
@@ -160,10 +164,10 @@ export default {
           let username = this.$util.encryptByDES(this.strKey, this.ruleForm.account)
           let password = this.$util.encryptByDES(this.strKey, this.ruleForm.password)
           let formData = {
-                        'username':username,
+            'username': username,
-                        'password':password,
+            'password': password,
-                        'type':1,
+            'type': 1,
-                        'platform':2
+            'platform': 2
           }
           this.$fetchApi.login(formData).then(res => {
 
@@ -172,7 +176,7 @@ export default {
             sessionStorage.setItem('userInfo', JSON.stringify(res.user))
             this.$store.commit('setUserInfo', res.user)
 
-                        if(res.user.resources.length > 0){
+            if (res.user.resources.length > 0) {
               let url = "/workbench";
               // let data= res.user.resources[0].children[0]
               // if(data.children.length>0){
@@ -182,7 +186,8 @@ export default {
               // }
               this.$store.commit('setRoutes', url)
               this.$router.push(url)
-                        }else{
+              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
@@ -224,10 +231,10 @@ export default {
       })
     },
     handleChangeLoginWay(tab, event) {
-            if(this.$refs.ruleForm) {
+      if (this.$refs.ruleForm) {
         this.$refs.ruleForm.clearValidate();
       }
-            if(tab && typeof tab === 'string') {
+      if (tab && typeof tab === 'string') {
         this.loginWay = type
         return
       }
@@ -260,16 +267,15 @@ export default {
         if (timeNum > 200) {
           clearInterval(scanCodeTimer);
           this.qrFail = true
-                }
+        } else {
-                else {
 
           this.$fetchApi.loginByQRCode(this.qrCodeInfo.verify).then(res => {
 
-                        if(res.status=='INVALID'){
+            if (res.status == 'INVALID') {
               this.qrFail = true
               clearInterval(scanCodeTimer);
             }
-                        if(res.status=='SUCCESS') {
+            if (res.status == 'SUCCESS') {
               // 登录成功
               this.$store.commit('setToken', res.token)
               this.$store.commit('setRoutes', JSON.parse(res.perms))
@@ -282,25 +288,36 @@ export default {
           })
 
         }
-                timeNum ++;
+        timeNum++;
       }, 1500);
     },
     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 {
-.login-wrap{
+  padding: 20px 0 0 40px;
+}
+
+.login-wrap {
   width: 100%;
   height: 100%;
-    background: url('~@/assets/image/login-bg1.png') no-repeat ;
+  background: url('~@/assets/image/login-bg1.png') no-repeat;
   background-size: cover;
   position: relative;
 }
-.login-box{
+
+.login-box {
   width: 384px;
   height: 370px;
   position: absolute;
@@ -308,7 +325,8 @@ export default {
   top: 50%;
   margin-top: -185px;
 }
-.login-content{
+
+.login-content {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
@@ -321,34 +339,40 @@ export default {
   box-shadow: 0px 4px 4px 0px #00000014;
 
 }
-.login-tab{
+
+.login-tab {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.login-btn{
+
+.login-btn {
   color: #fff;
   background-color: #5d78ff;
   border-color: #5d78ff;
-    &:hover{
+
+  &:hover {
     background-color: #3758ff;
     border-color: #2a4eff;
   }
 }
-.login-qr-code-box{
+
+.login-qr-code-box {
   width: 260px;
   height: 260px;
   position: relative;
 }
-.login-qr-fail{
+
+.login-qr-fail {
   width: 260px;
   height: 260px;
   position: absolute;
   left: 0;
   top: 0;
-    background: rgba(255,255,255,0.8);
+  background: rgba(255, 255, 255, 0.8);
 }
-.login_footer_ad{
+
+.login_footer_ad {
   position: fixed;
   bottom: 30px;
   left: 50%;
@@ -356,33 +380,37 @@ export default {
   opacity: 0.6;
 }
 
-.logo-wrap{
+.logo-wrap {
   height: 29px;
 }
-.logo-img{
+
+.logo-img {
   width: 58%;
   height: 24px;
 }
 
 </style>
 <style lang="scss">
-.login-wrap{
+.login-wrap {
-    .el-tabs__nav-wrap{
+  .el-tabs__nav-wrap {
-        &::after{
+    &::after {
       background-color: $color-white !important;
     }
   }
-    .el-input__inner{
+
+  .el-input__inner {
     border-top: 0 !important;
     border-left: 0 !important;
     border-right: 0 !important;
     border-radius: 0 !important;
     color: $color-text-primary;
   }
-    .login-sms-code .el-input__inner{
+
+  .login-sms-code .el-input__inner {
     padding-right: 150px;
   }
-    .login-sms-code-btn{
+
+  .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;