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)
|
||||
|
||||
@ -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;
|
||||
|
||||
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