在vuejs框架中使用websocket , 可以比较方便的运用到vuejs框架的响应式系统 , 以及一些简单的生命周期函数
var app=new Vue({
el: '#app',
data: {
server:"ws://127.0.0.1:8080/chat_server",
socket:null,
},
methods: {
//初始化websocket
initConn() {
let socket = new ReconnectingWebSocket(this.server);//创建Socket实例
this.socket = socket
this.socket.onmessage = this.OnMessage;
this.socket.onopen = this.OnOpen;
},
OnOpen() {
let mes = {}
mes.type = "test";
this.socket.send(JSON.stringify(mes));
},
OnMessage(e) {
const redata = JSON.parse(e.data);
console.log(redata)
},
},
created: function () {
this.initConn();
}
})
其他的websocket回调函数可以在initConn中进行赋值给method中的方法
另外websocket是使用的这个类库reconnecting-websocket , 可以进行自动的断线重连
<script src="https://cdn.bootcss.com/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js"></script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
