【网络通信】websocket如何断线重连

news2025/7/11 10:44:17

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>

前端点击“发送”后端服务器就会接受到马赛克里面的东西
在这里插入图片描述前端点击发送按钮触发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方法则该属性将一直增长。

Js

首先我们要熟悉如下几个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; #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)

来源

vue实现websocket断线重连
websocket断线重连的方法

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406099.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue3-路由跳转专题详细总结

一、基本路由 点击事件似乎可以使用模板更改视图中的内容&#xff0c;个人认为与路由的区别是路由能使网页中的地址栏发生变化 请先阅读基础第二篇 1.创建一个组件,并引入 2.js文件中配置路径 //name相当于别名{path:/tabView,component:TabView},{name:myComPany,path:compan…

Vue3项目搭建全过程

目录 一、前言 二、搭建准备 三、搭建项目 四、启动项目 一、前言 在2020年的9月19日&#xff0c;万众期待的Vue3终于发布了正式版&#xff0c;命名为“One Piece”。 它也带来了很多新的特性&#xff1a;更好的性能、更小的包体积、更好的TypeScript集成、更优秀的API设…

前端面试真题宝典(一)

面试题真题 闭包和柯里化 闭包是什么&#xff1f;闭包是能够读取其他函数内部变量的函数 柯里化是什么&#xff1f;柯里化是把一个多个参数的函数转化为单参数函数的方法 闭包的用途&#xff1a;闭包的主要用途是为了不污染全局变量&#xff0c;用闭包的局部变量来做一些库…

30个题型+代码(冲刺2023蓝桥杯)(中)

2023.3.13~4.13持续更新 目录 &#x1f34e;注意 &#x1f33c;前言 &#x1f33c;十&#xff0c;KMP&#xff08;留坑&#xff09; &#x1f33c;十一&#xff0c;Trie&#xff08;留坑&#xff09; &#x1f33c;十二&#xff0c;BFS &#x1f44a;(一)1562. 微博转发…

获取街道、镇级的地图geoJson数据方法,使用echarts绘制出街道、镇级的地图区域画面(中山市为例)

一、需求 1、在echarts上绘制市级以下的区、县的区域地图。 2、在市级下很多都是有区、县的区域&#xff0c;而少部分是不存在区、县的&#xff0c;是直接市下面一级就是街道、镇级别的区域。 3、统一管理区域数据&#xff0c;有区县的市直接拿区县的geoJson数据&#xff0c;没…

炸弹人小游戏代码开源(python)

♥️作者&#xff1a;小刘在C站 ♥️个人主页&#xff1a;小刘主页 ♥️每天分享云计算网络运维课堂笔记&#xff0c;努力不一定有收获&#xff0c;但一定会有收获加油&#xff01;一起努力&#xff0c;共赴美好人生&#xff01; ♥️夕阳下&#xff0c;是最美的绽放&#xff0…

Ajax--》请求操作以及跨域相关讲解

目录 jQuery中的Ajax 请求超时与网络异常处理 取消请求 Ajax请求—fetch() 跨域 jQuery中的Ajax 在jQuery中应该如何发送Ajax请求呢&#xff1f;看到这篇文章你就能大概了解到如何在jQuery中发送Ajax。 要想使用jQuery框架&#xff0c;肯定是需要引进jQuery资源的&#…

CSS实现单行、多行文本溢出显示省略号(…)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录一、单行超出显示省略号二、多行超出显示省略号一、单行超出显示省略号 描述&#xff1a;如果文字超出父元素指定宽度&#xff0c;文字会自动换行&#xff0c;而连续…

Node.js——文件模块和路径模块(读写文件,处理路径)

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;也会涉及到服务端 &#x1f4c3;个人状态&#xff1a; 在校大学生一枚&#xff0c;已拿 offer&#xff08;秋招&#xff09; &#x1f947;推荐学习&…

MySQL - 死锁的产生及解决方案

MySQL - 死锁的产生及解决方案1. 死锁与产生死锁的四个必要条件1.1 什么是死锁1.2 死锁产生的4个必要条件2. 死锁案例2.1 表锁死锁2.2 行锁死锁2.3 共享锁转换为排他锁3. 死锁排查4. 实例分析4.1 案例描述4.2 案例死锁问题复现4.3 死锁排查4.4 解决死锁5. 如何避免死锁1. 死锁与…

【保姆级】JMeter Mqtt 压测配置

忽然有个紧急任务要对某个服务做MQTT做压测&#xff0c;紧急实操下JMeter&#xff0c;这里记录下非专业测试员的测试过程、(▽&#xff40;)&#xff0c;欢迎&#x1f44f;大家检查指点(&#xffe3;∇&#xffe3;)/下载⏬工具JMeter官方下载地址https://jmeter.apache.org/do…

【前端】1.学习了一段时间的vue,总结一下Vue书写规范

学习了一段时间的vue&#xff0c;总结一下Vue书写规范命名规范普通变量命名规范常量命名规范组件命名规范method 方法命名命名规范views 下的文件命名props 命名规范结构化规范命名规范 在团体开发项目中&#xff0c;为了团队所有成员书写可维护的代码&#xff0c;而不是一次性…

JS入门到精通完整版

前言 JavaScript&#xff08;简称“JS”&#xff09; 是一种具有函数优先的轻量级&#xff0c;解释型或即时编译型的编程语言。它是作为开发Web页面的脚本语言而出名&#xff0c;JavaScript 基于原型编程、多范式的动态脚本语言&#xff0c;并且支持面向对象、命令式、声明式、…

【前端灵魂脚本语言JavaScript①】——JS引入方式

&#x1f41a; 作者: 阿伟 &#x1f482; 个人主页: Flyme awei &#x1f40b; 希望大家多多支持&#x1f618;一起进步呀&#xff01; &#x1f4ac; 文章对你有帮助&#x1f449;关注✨点赞&#x1f44d;收藏&#x1f4c2; JavaScript引入 文章目录JavaScript引入一、JS介绍二…

PTA第六章作业详解

&#x1f680;write in front&#x1f680; &#x1f4dd;个人主页&#xff1a;认真写博客的夏目浅石. &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd; &#x1f4e3;系列专栏&#xff1a;夏目的作业 &#x1f4ac;总结&#xff1a;希望你看完之后&am…

vue+uniapp瀑布流布局多种实现方式

文章目录前言一、实现原理二、代码实现1.方式1&#xff08;图片高度累加比较法&#xff09;2.方式2&#xff08;父元素高度比较法&#xff09;三.uniapp实现代码实现四、多列实现代码实现前言 瀑布流布局是网页设计常见的一种布局&#xff0c;一般用于图片多列展示。列宽固定&…

Vue3:状态管理-Store(Vuex,Pinia)

什么是状态管理 理论上来说&#xff0c;每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了 它是一个独立的单元&#xff0c;由以下几个部分组成 状态&#xff1a;驱动整个应用的数据源&#xff1b;视图&#xff1a;对状态的一种声明式映射&#xff1b;交互&#xff1a…

写给20、21级学生的话

写给20、21级学生的话前言一、关于招聘变招生&#xff0c;你怎么看&#xff1f;二、对于即将实习/已经实习的学生&#xff0c;你有什么建议&#xff1f;1.学习方面2.提升方面三、思想成年真的很重要前言 最近&#xff0c;有一些同学遇到的实习问题&#xff0c;我统一回复下&…

Vue2通知提醒框(Notification)

项目相关依赖版本信息 可自定义设置以下属性&#xff1a; 自动关闭的延时时长&#xff08;duration&#xff09;&#xff0c;单位ms&#xff0c;默认4500ms消息从顶部弹出时&#xff0c;距离顶部的位置&#xff08;top&#xff09;&#xff0c;单位像素px&#xff0c;默认24p…

HTML常用快捷键都在这了 看完之后效率暴涨

是这么回事; 我今天上网页课的时候&#xff0c;发现好多同学在敲标签的时候敲得很慢&#xff0c;我再仔细一看&#xff0c;好家伙&#xff0c;他们的标签竟然都是一个一个的敲出来的&#xff01; 那效率能高吗&#xff1f; 这是当时让敲的代码&#xff0c;很简单&#xff0c;对…