[vuejs] 在vuejs中使用websocket进行实时通讯

在vuejs框架中使用websocket , 可以比较方便的运用到vuejs框架的响应式系统 , 以及一些简单的生命周期函数

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

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>