WebSocket 中的心跳是为了解决什么问题?

这篇具有很好参考价值的文章主要介绍了WebSocket 中的心跳是为了解决什么问题?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


WebSocket

WebSocket 是一种在客户端和服务器之间建立持久化连接的协议,它允许双方实时地交换数据。由于 WebSocket 连接是长时间保持的,因此需要一种机制来确保连接的稳定性和可靠性,这就是心跳机制。

心跳机制是指定期发送一些数据包来保持连接的活跃状态。在 WebSocket 连接中,心跳包通常是空消息或一些特定的标识符,发送方会定时向接收方发送心跳包,接收方收到心跳包后会立即回复一个确认消息。通过这种方式,可以检测连接是否还处于活跃状态。

一、心跳机制的主要作用是:

确保连接的稳定性:由于网络环境的不稳定性,WebSocket 连接有可能会因为各种原因断开,例如网络故障、服务器重启等。通过心跳机制,可以及时发现连接是否已经断开,并采取相应的措施。

减少无效流量:由于 WebSocket 连接是长时间保持的,如果没有心跳机制,连接双方会不停地发送和接收数据包,这会导致大量的无效流量和带宽浪费。通过心跳机制,可以在保持连接的同时,减少无效流量的产生,提高数据传输的效率。

提高连接的可靠性:通过心跳机制可以及时检测连接是否已经断开,这可以减少因连接断开而导致的数据传输中断和数据丢失的情况,从而提高连接的可靠性。

二、代码

const socket = new WebSocket('ws://localhost:8080');
const heartbeatInterval = 5000; // 心跳间隔时间,单位:毫秒
let heartbeatTimer = null; // 心跳定时器

socket.onopen = () => {
  console.log('WebSocket连接已打开');
  startHeartbeat();
};

socket.onmessage = (event) => {
  console.log(`接收到消息:${event.data}`);
};

socket.onclose = () => {
  console.log('WebSocket连接已关闭');
  stopHeartbeat();
};

socket.onerror = (error) => {
  console.error(`WebSocket连接发生错误:${error}`);
  stopHeartbeat();
};

function startHeartbeat() {
  heartbeatTimer = setInterval(() => {
    if (socket.readyState === WebSocket.OPEN) {
      socket.send('heartbeat'); // 发送心跳包
    } else {
      stopHeartbeat();
    }
  }, heartbeatInterval);
}

function stopHeartbeat() {
  clearInterval(heartbeatTimer);
  heartbeatTimer = null;
}

在上述代码中,我们定义了一个 heartbeatInterval 变量来表示心跳间隔时间,然后定义了一个 heartbeatTimer 变量来表示心跳定时器。在 WebSocket 连接打开时,我们调用 startHeartbeat 函数来启动心跳定时器,在定时器中发送心跳包。在 WebSocket 连接关闭或发生错误时,我们调用 stopHeartbeat 函数来停止心跳定时器。
需要注意的是,在发送心跳包时,我们需要先检查 WebSocket 连接的状态是否为 OPEN,因为如果连接已经关闭或发生错误,我们就不应该再发送心跳包了。文章来源地址https://www.toymoban.com/news/detail-574865.html

到了这里,关于WebSocket 中的心跳是为了解决什么问题?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • WebSocket心跳机制

    WebSocket是HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术,属于应用层协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。 1、创建webSocket 2、websocket事件 事件 事件处理程序 描述 open Socket.onopen 连接建立时触发

    2024年02月15日
    浏览(58)
  • websocket 心跳机制

    WebSocket 是一种在客户端和服务器之间创建持久连接的技术。为了保持连接的稳定性,就需要通过发送心跳消息来维持 WebSocket 连接。 1、创建一个webscoket基本的使用 2、在客户端连接到 WebSocket 服务器之后,通过 setInterval 方法定时发送心跳消息 这边的代码会每隔5秒向服务器发

    2024年02月11日
    浏览(39)
  • WebSocket心跳机制(笔记大全)

    一、WebSocket心跳机制前端 前端实现WebSocket心跳机制的方式主要有两种: 使用setInterval定时发送心跳包。 在前端监听到WebSocket的onclose()事件时,重新创建WebSocket连接。 第一种方式会对服务器造成很大的压力,因为即使WebSocket连接正常,也要定时发送心跳包,从而消耗服务器资

    2024年02月15日
    浏览(45)
  • WebSocket断开原因和心跳机制

    WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来。 错误状态码: WebSocket断开时,会触发CloseEvent, CloseEvent会在连接关闭时发送给使用 WebSockets 的客户端. 它在 WebSocket 对象的 onclose 事件监听器中使用。CloseEvent的code字段表示了WebSocket断开的原因。可以从该字段

    2024年02月04日
    浏览(51)
  • websocket以及心跳机制的实现

            在浏览器与服务器通信之间,传统的http请求在某些场景下并不理想,比如实时聊天,实时性的小游戏等等, 其中面临主要的两个缺点: 无法做到消息的实时性 服务器无法主动推送信息 其基于http的主要解决方案有: 基于ajax的轮询:客户端定时或者动态相隔短时

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

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

    2024年02月11日
    浏览(42)
  • websocket断线重连&&心跳检测

    封装websocket 实现断线重连跟心态检测,使用的typeScript去封装 在nodejs 安装ws库 代码如下(示例):  服务端实现ws 创建一个server.js 文件 运行ws服务   node .server.js  客户端实现websocket 创建一个socket.ts 文件 vue 页面使用 断开ws服务 断线  启动服务后 自动重连

    2024年01月19日
    浏览(39)
  • uniapp websocket机制 心跳 重连

    在开发程序过程中通信功能还是比较常用到的,本文主要介绍的是uniapp中websocket的使用 websocket建立连接后,断开、心跳机制重新链接的一个过程。 关于uni.connectSocket可仔细阅读uniapp官网中的uni.connetSocket以及连接socket创建的实例 SocketTask   具体代码如下:内有代码详细注解,

    2024年02月12日
    浏览(40)
  • WebSocket的心跳机制和断线重连

    在服务器重启或是弱网情况下,前端不能保证一直连接成功。因此在出现被动断开的情况下,需要有 心跳机制 和 断线重连 的功能。 心跳机制 :客户端每隔一段时间向服务端发送一个特有的心跳消息,每次服务端收到消息后只需将消息返回,此时,若二者还保持连接,则客

    2024年01月18日
    浏览(44)
  • WebSocket心跳检测和重连机制

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

    2024年01月21日
    浏览(40)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包