位置: IT常识 - 正文

【网络通信】websocket如何断线重连(网络通信的整个流程)

编辑：rootadmin

【网络通信】websocket如何断线重连 Vue<template> <div> <button @click="sendDevName('xxxxxxxx')">发送</button> {{data}} </div></template><script>export default { name: 'HelloWorld', data () { return { data: null } }, // html加载完成后执行initWebSocket()进行websocket初始化 mounted () { this.initWebSocket() }, // 离开该层时执行，划重点了！！！ destroyed: function () { // 离开路由之后断开websocket连接 this.websock.close() }, methods: { // 初始化websocket initWebSocket () { const path = 'ws://xxx.xxx.xxx.xxx:端口号/xxxxx'// 后台给的websocket的ip地址 this.websock = new WebSocket(path) this.websock.onmessage = this.websocketOnMessage this.websock.onopen = this.websocketOnOpen this.websock.onerror = this.websocketOnError this.websock.onclose = this.websocketClose }, // 连接建立成功的信号 websocketOnOpen () { console.log('初始化成功')// 连接成功后就可以在这里写一些回调函数了 }, // 连接建立失败重连 websocketOnError () { // 如果报错的话，在这里就可以重新初始化websocket，这就是断线重连 this.initWebSocket() }, // 数据接收 websocketOnMessage (e) { console.log(e)// e这个变量就是后台传回的数据，在这个函数里面可以进行处理传回的值 this.data = e// 这边我绑定了一个data，data会在网页上显示后端传来的东西 }, // 数据发送 websocketSend (Data) { this.websock.send(Data)// Data变量就是你想对后台说些啥，根据后端给你的接口文档传值进行交互 }, // 关闭的信号 websocketClose () { console.log('断开连接') }, // 传参给后端，这里对websocketSend又进行了一层封装，用不到的可以删除 sendDevName (chooseDevice) { console.log(chooseDevice) this.websocketSend(chooseDevice) } }}</script>

推荐整理分享【网络通信】websocket如何断线重连(网络通信的整个流程)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:http网络通信,网络通信百科,网络通信流程,网络通信教程,http网络通信,网络通信教程,网络通信入门,网络通信,内容如对您有帮助，希望把文章链接给更多的朋友！

前端点击“发送”后端服务器就会接受到马赛克里面的东西前端点击发送按钮触发websocketSend (Data)函数后端就会收到前端发的消息，根据前端传过来的消息再发送前端所需要的信息，前端一旦监听到有东西发过来就会触发websocketOnMessage (e)这个函数

websocket的状态

ebsocket的两个属性：readyState和bufferedAmount。根据readyState属性可以判断webSocket的连接状态，该属性的值可以是下面几种： 0 ：对应常量CONNECTING (numeric value 0)，正在建立连接连接，还没有完成。The connection has not yet been established. 1 ：对应常量OPEN (numeric value 1)，连接成功建立，可以进行通信。The WebSocket connection is established and communication is possible. 2 ：对应常量CLOSING (numeric value 2) 连接正在进行关闭握手，即将关闭。The connection is going through the closing handshake. 3 : 对应常量CLOSED (numeric value 3) 连接已经关闭或者根本没有建立。The connection has been closed or could not be opened. 例： var socket = new WebSocket(url); if(socket.readyState!=1){ alert(“未连接。”); return; } 根据bufferedAmount可以知道有多少字节的数据等待发送，若websocket已经调用了close方法则该属性将一直增长。

首先我们要熟悉如下几个api

1、连接websocket的服务器的websocekt函数

2、websocekt断开后触发的onclose函数

由上面这两个函数就可以了，大致思路梳理一下：

1、首先开发一个函数websocketinit，函数主要是websocket的连接逻辑，监听信息，发送信息

2、监听onclose事件，onclose触发后重新执行websocketinit事件

思路有了大致代码如下：

function webSocketInit(service){ //1、初始化ws //2、监听onclose事件重新执行websocketInit函数 }

具体代码如下：

//1.创建websocket客户端var host = window.location.host; #IPvar ut = "{{ ut }}";var wsServer = 'wss://' + host + '/notify/wxlogin?ut=' + ut;var timeConnect = 0;webSocketInit(wsServer);//socket初始化function webSocketInit(service) { var ws = new WebSocket(service); ws.onopen = function () { console.log("已连接TCP服务器"); ws.send('Hello WebSockets!'); }; ws.onmessage = function (evt) { console.log('Received Message: ' + evt.data); data = JSON.parse(evt.data); console.log(data); if (data.status != 0) { alert("扫码错误"); ws.close(); } if (data.data.wx_login == 1) { //window.location.href = "http://" + host + "/admin" window.location.href = "/admin" } if (data.data.wx_login == 0) { //alert(data.data.message) $(".qr_code").css("display", "none"); $(".tips").text(data.data.message) } console.log(data.data); }; ws.onclose = function () { console.log('服务器已经断开'); reconnect(service); };}// 重连function reconnect(service) { // lockReconnect加锁，防止onclose、onerror两次重连 timeConnect++; console.log("第" + timeConnect + "次重连"); // 进行重连 setTimeout(function () { webSocketInit(service); }, 1000);}// 心跳 * 回应setInterval(function () { var websocket = new WebSocket(wsServer); websocket.send('');}, 1000 * 100)来源