websocket前端的连接与接收数据

什么是websocket

1, WebSocket是一种用于在客户端和服务器之间进行全双工通信的网络协议。它使得在单个TCP连接上可以进行双向通信，允许服务器主动地发送数据给客户端，同时客户端也可以向服务器发送数据。与传统的HTTP请求-响应模型不同，WebSocket允许实时通信，从而可以支持实时更新的应用程序，如即时聊天、在线游戏和股票市场报价。

2,WebSocket协议通过建立持久化的连接，避免了HTTP请求的额外开销和延迟。客户端可以使用WebSocket API与服务器建立连接，并通过发送和接收消息进行通信。WebSocket还支持一些高级功能，如心跳检测、数据压缩和扩展。

3,本文是在可视化数据大屏中使用进行的一些操作

//webScoket初始化方法data(){return{websocket:{},//连接后端的地址(这里要替换成自己后端的连接地址)websocketUrl:'ws://192.168.1.14:2000/',//判断是否重新连接lockReconnect:false,}}//自己在data  里面定义这些参数webScoketInit(){var that =this;
                that.websocket =newWebSocket(that.websocketUrl);//连接发生错误的回调方法
                that.websocket.onerror=function(event){//尝试重新连接reconnect(that.websocketUrl);
                    console.log(event);
                    console.log('连接错误')};//连接成功建立的回调方法
                that.websocket.onopen=function(event){//心跳检测重置
                    heartCheck.reset().start();
                    console.log(event,'成功数据');
                    console.log('连接开启')}//接收到消息的回调方法
                that.websocket.onmessage=function(event){//心跳检测重置let res = event.data
                    //获取到后台发送的数据并转为json类型可转可不转 转了可能报错请根据自身情况修改//接收的后端返回数据
                    console.log(res,'==============websocks')//进行业务处理 大数据可视化需要刷新页面if(res=="reload"){
                        that.websk()}
                    heartCheck.reset().start();}//连接关闭的回调方法
                that.websocket.onclose=function(event){//尝试重新连接reconnect(that.websocketUrl);
                    console.log(event);
                    console.log('连接关闭')}//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
                window.onbeforeunload=function(){closeWebSocket();}//重新连接functionreconnect(url){if(that.lockReconnect)return;// console.log('连接成功')
                    that.lockReconnect =true;//没连接上会一直重连，设置延迟避免请求过多setTimeout(function(){// that.websocket = new WebSocket(url);
                        that.webScoketInit();
                        that.lockReconnect =false;
                        console.log('重连中')},2000);}//心跳检测var heartCheck ={//1分钟发一次心跳,时间设置小一点较好（50-60秒之间）timeout:1000,timeoutObj:null,serverTimeoutObj:null,reset:function(){clearTimeout(this.timeoutObj);clearTimeout(this.serverTimeoutObj);returnthis;},start:function(){var self =this;this.timeoutObj =setTimeout(function(){//这里发送一个心跳，后端收到后，返回一个心跳消息，//onmessage拿到返回的心跳就说明连接正常
                            that.websocket.send("ping");//给服务器发送ping（可自定义与后端协调）//如果超过一定时间还没重置，说明后端主动断开了
                            self.serverTimeoutObj =setTimeout(function(){//如果后端没回应就自动断开在从新连接
                                console.log('重新连接')//如果onclose会执行reconnect，我们执行socket.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
                                that.websocket.close();}, self.timeout)},this.timeout)}}//关闭WebSocket连接functioncloseWebSocket(){
                    that.websocket.close();}},websk(){
                window.location.reload()},

成功示例图