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>
el-table利用:row-style="rowClass"设置指定行变色
一款免费开源效果酷炫的 Vue / React 大屏数据展示组件库——DataV
vue项目动态设置background背景色，解决颜色被替换问题
上面是“在vuejs中使用websocket进行实时通讯”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。
当前网址：https://m.ipkd.cn/webs_107.html
声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
