学习使用js链接websocket服务断线重连的方法

前言
思路
示例代码

前言

我们在是有websocekt的时候，有的时候由于某些原先websocket会断开连接，我们需要重现连接，该如何实现呢？这就需要我们仔细研究websocket的api的使用了。

思路

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

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

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

由上面这两个函数就可以了，大致思路梳理一下：
1、首先开发一个函数websocketinit，函数主要是websocket的连接逻辑，监听信息，发送信息
2、监听onclose事件，onclose触发后重新执行websocketinit事件

示例代码

//1.创建websocket客户端
var host = window.location.host; #IP
var 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)

学习使用js链接websocket服务断线重连的方法相关推荐

【网络通信】websocket如何断线重连
Vue <template><div><button @click="sendDevName('xxxxxxxx')">发送</butto ...
js 链接websocket马上断开_SpringBoot+WebSocket实现简单的数据推送
问题背景为什么要要用websocket呢?websocket相对于传统http协议有什么优势呢? http协议有一个缺陷,就是通信只能由客户端发起,服务器返回数据,不能做到服务器主动向客户端推送.这 ...
WebSocket 实现断线重连详细代码项目源码
小项目源码https://gitee.com/chen_yan_ting/web-socket_dou_di_zhu 实现原理: WebSocket的onClose 连接关闭回调方法webSocket ...
node.js创建WebSocket服务，并使用原生js ES6完成对WebSocket数据交互
注意,前情提示: 本代码基于<Node.js(nodejs)对本地JSON文件进行增.删.改.查操作(轻车熟路)> 传送门Node.js(nodejs)对本地JSON文件进行增.删.改.查 ...
js 链接websocket马上断开_WebSocket之基于STOMP协议的广播模式实现群聊功能
又是一个老套的古诗词赏析不恨此花飞尽,恨西园.落红难缀.--苏轼<水龙吟·次韵章质夫杨花词> WebSocket与STOMP协议相关简介 WebSocket WebSocket 是一种 ...
校园网断线重连，用爬虫来搞定！
前言 hello,大家好,我是大赛哥(弟),好久不见,甚是想念. 最近因为有小需求研究了两登录的加密,也成功解密加密的参数,在这里给大家分享一波. 前段时间,有个同学他实验室服务器校园网老是掉,想问问 ...
Nginx反向代理WebSocket服务连接报错：WebSocket connection to “wssxxxxxx“ failed
最近使用 node.js 搭建 WebSocket 服务,在本地测试 connection 都是正常,于是部署到 Linux 服务上,需要用 Nginx 来反向代理 WebSocket 服务.浏览器控 ...
java redis 断线重连_redis断线重连代码详解
redis断线重连代码详解发布时间:2020-05-08 17:59:39 来源:亿速云阅读:459 作者:Leah redis断线怎么重连?这个问题可能是我们日常工作经常遇到的.本篇文章主要探讨 ...
[javascript] js websocket断线重连库ReconnectingWebSocket
websocket在连接的时候 , 受网络影响或者长时间没有通信被服务端关闭 , 都需要断线重连机制自己写断线重连比较麻烦 , 可以使用这个js库 ReconnectingWebSocket.js ...

学习使用js链接websocket服务断线重连的方法

学习使用js链接websocket服务断线重连的方法

前言

思路

示例代码

学习使用js链接websocket服务断线重连的方法相关推荐

最新文章

热门文章