webSocket封装部分
This commit is contained in:
tdg930622
parent
c6f8823ad8
commit
40331ae769
5221
package-lock.json
generated
5221
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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,
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)=>{
|
||||
if (!value){
|
||||
const validatePhone = (rule, value, callback) => {
|
||||
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,
|
||||
'code':smsCode,
|
||||
'type':2,
|
||||
'platform':2
|
||||
'phone': telephone,
|
||||
'code': smsCode,
|
||||
'type': 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,
|
||||
'password':password,
|
||||
'type':1,
|
||||
'platform':2
|
||||
'username': username,
|
||||
'password': password,
|
||||
'type': 1,
|
||||
'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-wrap{
|
||||
.login-logo {
|
||||
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{
|
||||
.el-tabs__nav-wrap{
|
||||
&::after{
|
||||
.login-wrap {
|
||||
.el-tabs__nav-wrap {
|
||||
&::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;
|
||||
}
|
||||
|
||||
66
src/utils/stompSocket.js
Normal file
66
src/utils/stompSocket.js
Normal file
@ -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;
|
||||
Loading…
x
Reference in New Issue
Block a user