详解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如何把字符串转换成json

    将字符串转换成JSON格式的数据是JavaScript中一种非常常见的操作,通常是用来将服务器端的数据转换成JavaScript能够使用的方式。以下是将字符串转换成JSON数据的完整攻略: 1. 使用JSON.parse方法 JSON.parse()方法可以将一个JSON字符串转换成相应的JavaScript对象。 const jsonString = ‘{…

    JavaScript 2023年5月27日
    00
  • JavaScript高级教程之如何玩转箭头函数

    JavaScript高级教程之如何玩转箭头函数 介绍 箭头函数是ES6引入的新概念,它可以更方便地创建匿名函数,比传统的函数表达式更加简洁。本文将介绍箭头函数的使用,包括语法、应用场景、this指向和与传统函数表达式等的区别。 语法 箭头函数的语法如下: (param1, param2, …, paramN) => { statements } 或 (…

    JavaScript 2023年5月27日
    00
  • JavaScript常用本地对象小结

    下面我将详细讲解JavaScript常用本地对象的知识点,包含对象的定义、属性和方法,以及两个示例说明。 什么是本地对象 在 JavaScript 中,除了语言本身提供的全局对象和全局函数之外,很多对象也是由浏览器端或者 node.js 端提供的本地对象。本地对象可分为三个大类(原生对象、宿主对象、自定义对象),原生对象又称为内置对象。 常用本地对象 本地对…

    JavaScript 2023年5月27日
    00
  • JavaScript的异步ajax详解

    JavaScript的异步ajax详解 异步请求的概念 异步请求指的是客户端提交请求给后台服务器后,不会一直等待直到服务器响应。而是可以在等待响应的过程中继续进行其他操作。当服务器响应完成后,客户端会立即收到响应并采取相应措施。这样可以有效提升用户体验,提高网站的性能。 ajax简介 ajax(Asynchronous JavaScript and XML)…

    JavaScript 2023年5月27日
    00
  • bootstrap laydate日期组件使用详解

    Bootstrap LayDate日期组件使用详解 在本文中,我们将会学习如何在HTML页面中使用LayDate日期组件,该组件基于Bootstrap框架,提供了强大的日期选择功能和美观的UI界面。 步骤一:引入LayDate的依赖文件 在使用LayDate之前,需要在HTML页面中引入相关的依赖文件。这些文件包括LayDate的CSS文件和JS文件,以及L…

    JavaScript 2023年6月10日
    00
  • JavaScript数组reduce常见实例方法

    下面是关于JavaScript数组reduce方法的一些详细讲解和两个示例说明。 什么是reduce方法 reduce 是 JavaScript 数组中的一个高阶函数,作用是将数组中的所有元素通过指定函数进行归纳,最终返回一个单一的值。这个指定函数接收两个参数:累加器和当前值。 reduce 语法: array.reduce(function(accumul…

    JavaScript 2023年5月27日
    00
  • 仿豆瓣分页原型(Javascript版)

    让我们一步步来详细讲解“仿豆瓣分页原型(Javascript版)”的完整攻略。 1. 目标 在这个项目中,我们的目标是完成一个可以实现类似豆瓣电影列表分页的原型,包含如下功能: 页面展示电影列表 实现分页功能,可以翻页查看电影列表的不同页面 支持自定义每页显示的电影数量 2. 环境 完成这个项目我们需要一个web开发环境,下面列出了需要的工具和技术: HTM…

    JavaScript 2023年6月11日
    00
  • 详解vue的hash跳转原理

    下面我将详细讲解“详解Vue的Hash跳转原理”的完整攻略。 什么是Hash路由 Hash路由是现代前端路由中最早出现的一种路由模式。它利用URL中的#字符来实现页面跳转而无需刷新页面。由于Hash前的URL部分不会发送到服务器,所以可以避免页面的重载,比较适合单页应用的开发。 Hash路由原理 在Hash路由模式下,我们使用JavaScript操作URL中…

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