在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>