详解JS WebSocket断开原因和心跳机制

详解JS WebSocket断开原因和心跳机制

WebSocket 是一个重要的协议,可在浏览器和服务器之间双向通信,且具有较低的延迟和较高的带宽利用率。但是,在实际应用中,WebSocket 经常会由于各种原因而断开连接,为此,我们需要对 WebSocket 的断开原因和心跳机制做详细了解。

WebSocket断开原因

1. 服务器主动关闭

服务器端主动关闭连接时,WebSocket 处于 CLOSED 状态,并触发 onclose 事件。在这种情况下,我们可以读取 event.codeevent.reason 属性获取关闭代码和关闭原因。

示例代码(服务端):

wsServer.close(reason, code);

示例代码(客户端):

ws.onclose = function(event) {
  console.log("WebSocket已关闭。");
  console.log("关闭代码:" + event.code);
  console.log("关闭原因:" + event.reason);
}

2. 客户端主动关闭

客户端主动关闭连接时,WebSocket 处于 CLOSED 状态,并触发 onclose 事件。在这种情况下,我们需要手动调用 WebSocket.close() 方法来关闭连接。

示例代码:

ws.close();

3. 网络异常

网络异常是导致断开连接的最常见原因之一。在这种情况下,WebSocket 处于 CLOSED 状态,并触发 onclose 事件。网络异常断开连接时,event.code 的值为 1006,event.reason 的值可能为空字符串或某些异常信息。

4. 服务器异常

服务器异常有许多种,可能是服务器程序崩溃、服务器网络故障等。在这种情况下,WebSocket 处于 CLOSED 状态,并触发 onclose 事件。服务器异常断开连接时,event.code 的值可能是任意的 4000 到 4999 之间的错误代码(由服务器指定),event.reason 的值可能为空字符串或某些错误信息。

WebSocket心跳机制

WebSocket 心跳机制是指定期向服务器发送一条心跳消息来保持连接的机制。WebSocket 心跳一般有两种实现方式:

1. 客户端轮询

客户端轮询是指客户端间隔一段时间向服务器发送一条消息,服务器收到消息后立即回复,客户端收到回复后重新计时。如果一定时间内没有收到服务器回复,客户端即认为连接断开。

示例代码:

let heartbeatTimer = null;

function startHeartbeat() {
  heartbeatTimer = setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify({type: "heartbeat"}));
    }
  }, 3000);
}

function stopHeartbeat() {
  clearInterval(heartbeatTimer);
}

2. 服务器推送

服务器推送是指服务器定期向客户端推送一条消息,客户端收到消息后重新计时。如果一定时间内没有收到服务器推送,客户端即认为连接断开。

示例代码:

ws.onmessage = function(event) {
  let data = JSON.parse(event.data);
  if (data.type === "heartbeat") {
    // 接收到服务器心跳消息,重新计时
    resetHeartbeat();
  }
}

let heartbeatTimer = null;

function resetHeartbeat() {
  clearInterval(heartbeatTimer);
  heartbeatTimer = setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify({type: "heartbeat"}));
    }
  }, 3000);
}

总结

以上是 WebSocket 断开原因和心跳机制的详细讲解,我们需要在实际应用中结合具体情况,选择合适的心跳机制,保证 WebSocket 连接的稳定性。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解JS WebSocket断开原因和心跳机制 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • JS常用算法实现代码

    JS常用算法实现代码的完整攻略包含以下内容: 1. 算法基础 在学习算法实现代码之前,需要先掌握算法基础知识。算法是指根据一定的规则,通过有限次的计算,解决特定的问题的方法。在算法中,最常用的是时间复杂度和空间复杂度。时间复杂度指算法运行时间随输入规模增加而增长的速率,通常用“O()”表示。空间复杂度指算法所需存储空间随输入规模增加而增长的速率,通常用“O(…

    JavaScript 2023年5月19日
    00
  • javascript时间自动刷新实现原理与步骤

    JavaScript 时间自动刷新实现主要是通过不断更新页面上显示的日期和时间来实现,其实现步骤主要包括以下几步: 创建用于显示时间的 HTML 元素。可以使用 p 或 span 等标签,例如: <p id="time"></p> 创建用于更新时间的 JavaScript 函数。该函数需要通过定时器来不断更新时间,…

    JavaScript 2023年5月27日
    00
  • js实现的类marquee水平循环滚动

    JS实现的类marquee水平循环滚动,是指在一个容器内部以水平方向不间断滚动一段文字或图片等内容,类似于HTML中的标签效果。以下为完整的攻略: 步骤1:HTML结构 首先,在HTML中建立一个容器,例如: <div id="scroll-container"> <span>这是一段滚动文字</span&g…

    JavaScript 2023年6月11日
    00
  • 在JavaScript中使用高阶函数的方法

    当我们谈论高级函数的时候,我们通常指的是那些将其它函数作为参数传递,或者返回一个函数的函数。这种函数可以让我们更轻松、更灵活地处理数据,因为它们能够在以前无法实现的层面上操作函数。 定义高阶函数 要获得最大的灵活性,我们可以编写 Function 类,以允许动态创建新函数: class FunctionFactory { constructor() { th…

    JavaScript 2023年5月27日
    00
  • JavaScript 面向对象与原型

    JavaScript 面向对象与原型 什么是面向对象? 面向对象编程(Object-oriented programming, OOP)是一种编程模式,它以“对象”作为程序的基本单元,通过对象之间的交互实现程序功能。面向对象编程思想中,将程序拆分成若干个模块,每个模块相当于一个对象,包含自身属性和方法。 JavaScript作为一门面向对象的语言,与其他语言…

    JavaScript 2023年5月27日
    00
  • 详解JavaScript的三种this指向方法

    详解JavaScript的三种this指向方法 JavaScript中的this关键字被用来指示当前函数在执行时所引用的对象或上下文。this的指向可能是以下三种情况: 全局对象 当在全局范围内调用this时,它引用的是全局对象(全局global或window,具体取决于环境)。 对象实例 当使用构造函数创建的实例对象时,this将指向该实例对象。 显式绑定…

    JavaScript 2023年5月28日
    00
  • jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法

    首先需要说明的是,AjaxPro.Utility.RegisterTypeForAjax辅助方法实际上是AjaxPro框架提供的一种将服务端方法注册到客户端的途径,以便客户端可以直接使用JavaScript调用服务端的方法。而jQuery Ajax也是一种实现客户端与服务端交互的工具。 下面是实现“jQuery Ajax 仿AjaxPro.Utility.R…

    JavaScript 2023年6月11日
    00
  • Js中安全获取Object深层对象的方法实例

    当我们需要操作一个较为复杂的对象时,通常需要获取对象中的某些属性值。在Javascript中,我们可以使用访问对象的属性(如obj.prop)来获取对象的属性值。但是,在某些情况下,对象的属性结构可能较为复杂,其中嵌套了很多层子属性,我们需要一种更方便、更安全的方式来访问这些深层次的属性。下面是几种安全获取Object深层对象的方法实例。 使用&&a…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部