websocket断线重连&&心跳检测

这篇具有很好参考价值的文章主要介绍了websocket断线重连&&心跳检测。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

封装websocket 实现断线重连跟心态检测,使用的typeScript去封装

一、服务端实现ws

在nodejs 安装ws库

1.引入库

代码如下(示例):

npm i ws

 服务端实现ws 创建一个server.js 文件 运行ws服务   node .\server.js 



// 引入模块
const WebSocket = require("ws").Server;
const port = 3001;

// 创建服务器
const server = new WebSocket({ port }, () => {
  console.log("websocket服务开启");
});

const connectHandler = (ws) => {
  console.log("客户端连接");
  // 监听客户端出错
  ws.on("error", errorHandler);
  // 监听客户端断开链接
  ws.on("close", closeHandler);
  // 监听客户端发来的消息
  ws.on("message", messageHandler);
};

// 监听接收客户端信息回调
// 注意:因为这里用到this的指向,因此用普通的函数
function messageHandler(data) {
  console.log("messageHandler===>接收客户端消息", JSON.parse(data));
  const { ModeCode } = JSON.parse(data);
  switch (ModeCode) {
    case "message":
      console.log("收到消息");
      // 需要发送信息给客户端以此说明连接成功
      this.send(JSON.stringify(JSON.parse(data)));
      break;
    case "heart_beat":
      console.log("心跳检测");
      // 需要发送信息给客户端以此说明连接成功
      this.send(JSON.stringify(JSON.parse(data)));
      break;
  }
}

// 监听客户端出错回调
const errorHandler = (error) => {
  console.log("errorHandler===>客户端出错", error);
};
// 监听客户端断开连接回调
const closeHandler = (e) => {
  console.log("closeHandler===>客户端断开🔗", e);
};

// 建立连接
server.on("connection", connectHandler);

客户端实现websocket

创建一个socket.ts 文件

class Socket {
  wsUrl;
  constructor(wsUrl: any) {
    this.wsUrl = wsUrl;
  }

  ModeCode = {
    // websocket消息类型
    MSG: "message", // 普通消息
    HEART_BEAT: "heart_beat" // 心跳
  };
  ws: any = null;
  webSocketState: boolean = false; // webSocket的连接状态
  heartBeat = {
    // 心跳连接的时间设置
    time: 5 * 1000, // 心跳时间间隔
    timeout: 3 * 1000, // timeout:心跳超时间隔
    reconnect: 10 * 1000 // 断线重连时间
  };
  reconnectTimer: any = null; // 断线重连时间器

  /**
   * 连接ws
   */
  connectWebSocket() {
    this.ws = new WebSocket(this.wsUrl);
    this.init();
  }
  /*
   * 心跳初始函数
   * @param time:心跳时间间隔
   */
  startHeartBeat(time: Number | string) {
    setTimeout(() => {
      this.ws.send(
        JSON.stringify({
          ModeCode: this.ModeCode.HEART_BEAT,
          msg: new Date()
        })
      );
      this.waitingServer();
    }, time as any);
  }
  // 延时等待服务端响应,通过webSocketState判断是否连线成功
  waitingServer() {
    this.webSocketState = false;
    setTimeout(() => {
      if (this.webSocketState) {
        this.startHeartBeat(this.heartBeat.time);
        return;
      }
      console.log("心跳无响应,已断线");
      try {
        this.ws.close();
      } catch (e) {
        console.log("连接已关闭,无需关闭");
      }
      this.reconnectWebSocket();
    }, this.heartBeat.timeout);
  }
  // 重连操作
  reconnectWebSocket() {
    this.reconnectTimer = setTimeout(() => {
      this.reconnectWs();
    }, this.heartBeat.reconnect);
  }
  //初始化
  init() {
    this.ws.addEventListener("open", () => {
      this.webSocketState = true; //socket状态设置为连接,做为后面的断线重连的拦截器
      this.heartBeat && this.heartBeat.time ? this.startHeartBeat(this.heartBeat.time) : ""; // 是否启动心跳机制
      console.log("开启");
    });
    this.ws.addEventListener("message", (e: any) => {
      console.log(e.data, "eeeee");
      const data = JSON.parse(e.data);
      switch (data.ModeCode) {
        case this.ModeCode.MSG: // 普通消息
          console.log("收到消息" + data.msg);
          break;
        case this.ModeCode.HEART_BEAT: // 心跳
          this.webSocketState = true;
          console.log("收到心跳响应" + data.msg);
          break;
      }
    });
    this.ws.addEventListener("close", (e: any) => {
      this.webSocketState = false; // socket状态设置为断线
      console.log("断开了连接", e);
    });
    this.ws.addEventListener("error", (e: any) => {
      this.webSocketState = false; // socket状态设置为断线
      this.reconnectWebSocket(); // 重连
      console.log("连接发生了错误", e);
    });
  }
  reconnectWs() {
    if (!this.ws) {
      // 第一次执行,初始化
      this.connectWebSocket();
    }
    if (this.ws && this.reconnectTimer) {
      // 防止多个websocket同时执行
      clearTimeout(this.reconnectTimer);
      this.ws.reconnectTimer = null;
      this.connectWebSocket();
    }
  }

  //发送数据
  sendMessage(data: any) {
    this.ws.send(JSON.stringify(data));
  }
  //在其他需要socket地方主动关闭socket
  closeWebSocket(e: any) {
    console.log(e);
    this.ws.close();
    clearTimeout(this.reconnectTimer);
    this.webSocketState = false;
  }
}

export default Socket;

vue 页面使用

//引用
import Scoket from "@/utils/socket";

const socket = new Scoket("ws://localhost:3001");
//发送消息
const onSend = () => {
  console.log("onSend");
  socket.sendMessage(message.value);
};
//连接ws
onMounted(() => {
  socket.connectWebSocket();
});

websocket判断客户端断开,websocket,网络协议,网络

断开ws服务 断线  启动服务后 自动重连文章来源地址https://www.toymoban.com/news/detail-805037.html


到了这里,关于websocket断线重连&&心跳检测的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp使用WebSocket断线,心跳重连机制

    提示:我们在使用WebSocket,经常会遇到有的时候给别人发消息,别人会接收不到,这个时候就有可能是WebSocket断线了,所以这个时候心跳包就出现了 提示:可直接使用,记得把对应地址替换一下

    2024年04月12日
    浏览(43)
  • SpringBoot+Netty实现TCP客户端实现接收数据按照16进制解析并存储到Mysql以及Netty断线重连检测与自动重连

    在SpringBoot项目中需要对接三方系统,对接协议是TCP,需实现一个TCP客户端接收 服务端发送的数据并按照16进制进行解析数据,然后对数据进行过滤,将指定类型的数据 通过mybatis存储进mysql数据库中。并且当tcp服务端断连时,tcp客户端能定时检测并发起重连。 全流程效果  

    2024年02月03日
    浏览(38)
  • java webSocket服务端、客户端、心跳检测优雅解决

    项目分为三个端,项目之间需要webSocket通信。 WebSocketConfig WebSocketServer

    2024年02月17日
    浏览(41)
  • websocket实时通讯和socket.io实时通信库的使用;心跳机制与断线重连

    https://zh.javascript.info/websocket WebSocket 是一种网络通信协议,就类似于 HTTP 也是一种通信协议。 为什么需要 WebSocket? 因为 HTTP 协议有一个缺陷:通信只能由客户端发起。 代码解析: 创建WebSocket实例:通过 new WebSocket() 创建一个WebSocket实例。在括号中传入服务器的URL,该URL指定了

    2024年02月16日
    浏览(42)
  • C++ Qt TCP的心跳检测机制,断线重连技术,应用层代码重新实现

    目录 前言: 一、Qt直接启动本身的KeepAlive 二、在应用层自己实现一个心跳检测  三、自定义心跳代码实现: 完整客户端服务端工程下载: 共用的结构体相关头文件:         客户端部分核心代码:         服务端部分核心代码: 运行结果展示: 前两篇关于qt tcp 相关的,

    2024年02月05日
    浏览(45)
  • websocket超时重连、心跳检测

    在单个TCP连接上进行全双工通信的协议,可以实现服务端和客户端双向推送信息的协议。我们在使用webscoket通信时必须要注意的问题超时重连和心跳检测。 超时重连:当出现错误时客户端尝试重新连接websocket。 心跳检测:客户端长时间没接收到服务端消息,就向服务端发送

    2024年02月11日
    浏览(42)
  • WebSocket心跳检测和重连机制

    心跳和重连的目的用一句话概括就是客户端和服务端保证彼此还活着,避免丢包发生。 websocket 连接断开有以下两证情况: 前端断开 在使用 websocket 过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时关闭,这时候websocket的连接已经断开,而不同浏览器有不同

    2024年01月21日
    浏览(41)
  • Vue 2 中 WebSocket 模块实现与应用(包含心跳检测、自动重连)

    WebSocket 技术是一种在 Web 开发中常用的实时通信方式,它允许客户端和服务器之间建立持久性的双向连接,以便实时地传输数据。在 Vue.js 项目中,使用 WebSocket 可以轻松实现实时消息推送、即时通讯等功能。在这篇博客中,我们将介绍一个基于 Vue.js 的 WebSocket 模块的实现,

    2024年02月03日
    浏览(37)
  • Unity-TCP-网络聊天功能(四): 消息粘包、心跳机制保活(心跳包)、断线重连

    bug1:下线后,如果发送多条消息,在客户端上线时,一瞬间接收到,效果如同粘包,需要拆包。举例,连续发送三条160长度消息,可能实际显示2条消息,原因,第三条消息和第二条消息粘包,第二条消息长度变为320,但是Receive方法没有考虑这个问题,相当于这段代码只运行

    2024年02月11日
    浏览(39)
  • uniapp websocket 封装断线重连

     1.新建一个工具类js文件 2. 把我封装的代码复制进去 我是用uniapp 的api封装的 在外面也可以直接用uniapp的api操作 只有在开始调用连接需要用封装的方法调用 在需要使用封装的方法的页面 引入js     import {         websocetObj     } from \\\"@/API/websocket.js\\\"  完善重连 在app.vue的

    2024年02月11日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包