金色小芝麻

vuePress-theme-reco 金色小芝麻    2021 - 2023
金色小芝麻 金色小芝麻

Choose mode

  • dark
  • auto
  • light
主页
分类
  • JavaScript
  • BUG复盘
  • SVG笔记
  • TypeScript
  • 个人总结
  • CSS笔记
  • 开发工具
  • 前端入门
  • Vue2.0
  • 性能优化
  • 架构学习
  • 每日一题
标签
时间轴
社交
  • 掘金 (opens new window)
author-avatar

金色小芝麻

83

文章

27

标签

主页
分类
  • JavaScript
  • BUG复盘
  • SVG笔记
  • TypeScript
  • 个人总结
  • CSS笔记
  • 开发工具
  • 前端入门
  • Vue2.0
  • 性能优化
  • 架构学习
  • 每日一题
标签
时间轴
社交
  • 掘金 (opens new window)
  • 每日一题

    • vue的双向绑定的原理是什么?
    • 什么是 WebSocket 心跳?
    • Problem: 介绍下 CSS3 中 position:sticky
    • Problem: 能描述下渐进增强和优雅降级之间的不同么?

什么是 WebSocket 心跳?

vuePress-theme-reco 金色小芝麻    2021 - 2023

什么是 WebSocket 心跳?

金色小芝麻 2022-01-25

# Problem: 什么是 WebSocket 心跳?

*[interview]: start

WebSocket 是用来建立客户端与服务端的长连接的,在实际链接过程中可能会有一些情况导致连接异常客户端和服务器相互之间没有反馈信息,WebSocket心跳就是为了保证二者之间链接的可持续性和稳定性的。例如:

  • 如果设备断网,不会触发webSocket的任何事件,前端也就无法知道当前是连接还是断开的状态。这个时候如果调用send方法,浏览器才会发现连接断开了,便会立刻或者一定时间后触发 onclose 函数。如果是后端的webSocket服务发生了异常断开。前端也没有收到断开的通知;
  • 为了解决上面的两个问题,以前端作为主动方,发送心跳消息ping,后端收到ping类型的消息,立马返回pong消息,告知前端连接正常。如果一定时间没有收到pong消息,就说明连接不正常,一旦发现异常,前端就会持续执行重连逻辑,直到重连成功;
  • 因此webSocket的心跳只要用于检测网络和前后端连接问题。避免丢包

*[interview]: end

欢迎来到 金色小芝麻
看板娘