码迷,mamicode.com
首页 > Web开发 > 详细

Vue中使用websocket的正确使用方法

时间:2020-11-23 12:04:10      阅读:12      评论:0      收藏:0      [点我收藏+]

标签:fill   idt   ber   pre   temp   init   使用方法   kotlin   keyword   

原文:https://www.jianshu.com/p/9d8b2e42328c

<template>
  <div class="test">

</div>
</template>

<script>
export default {
name : ‘test‘,
data() {
return {
websock: null,
}
},
created() {
this.initWebSocket();
},
destroyed() {
this.websock.close() //离开路由之后断开websocket连接
},
methods: {
initWebSocket(){ //初始化weosocket
const wsuri = "ws://127.0.0.1:8080";
this.websock = new WebSocket(wsuri);
this.websock.onmessage = this.websocketonmessage;
this.websock.onopen = this.websocketonopen;
this.websock.onerror = this.websocketonerror;
this.websock.onclose = this.websocketclose;
},
websocketonopen(){ //连接建立之后执行send方法发送数据
let actions = {"test":"12345"};
this.websocketsend(JSON.stringify(actions));
},
websocketonerror(){//连接建立失败重连
this.initWebSocket();
},
websocketonmessage(e){ //数据接收
const redata = JSON.parse(e.data);
},
websocketsend(Data){//数据发送
this.websock.send(Data);
},
websocketclose(e){ //关闭
console.log(‘断开连接‘,e);
},
},
}
</script>
<style lang=‘less‘>

</style>

Vue中使用websocket的正确使用方法

标签:fill   idt   ber   pre   temp   init   使用方法   kotlin   keyword   

原文地址:https://www.cnblogs.com/showcase/p/14000199.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!