Web端即时通讯技术 | 青训营笔记

122 阅读2分钟

这是我参与「第五届青训营 」笔记创作活动的第5天

前言

提前为青训营大项目做些技术调研和学习。

关于消息模块,之前做的项目也涉及到了,当时也有做的调研:客户端轮询、WebSocket,再次回顾一下吧。

即时通讯

即时通讯,服务器端可以即时地将数据的更新或变化反应到客户端,例如消息即时推送等功能都是通过这种技术实现的。但是在Web中,由于浏览器的限制,实现即时通讯需要借助一些方法。这种限制出现的主要原因是,一般的Web通信都是浏览器先发送请求到服务器,服务器再进行响应完成数据的现实更新

实现方案

轮询

浏览器每隔一段时间向浏览器发送http请求,服务器端在收到请求后,不论是否有数据更新,都直接进行响应。

本质上还是浏览器发送请求,服务器接受请求的过程,通过让客户端不断的进行请求,使得客户端能够模拟实时地收到服务器端的数据的变化。

优点:

  • 简单

缺点:

  • 资源占用高
  • 服务端无法主动发起通信

长轮询

当服务器收到客户端发来的请求后,服务器端不会直接进行响应,而是先将这个请求挂起,然后判断服务器端数据是否有更新。如果有更新,则进行响应,如果一直没有数据,则到达一定的时间限制(服务器端设置)才返回。

优点:

  • 一定程度减少了HTTP请求次数

缺点:

  • 资源占用仍然高
  • 服务端无法主动发起通信

长连接

SSE是HTML5新增的功能,全称为Server-Sent Events。它可以允许服务推送数据到客户端。

优点:

  • 不需要建立或保持大量的客户端发往服务器端的请求,节约资源,提升性能
  • 实现简单

WebSocket

WebSocket 是 HTML5 定义的一个新协议,与传统的http协议不同,该协议可以实现服务器与客户端之间全双工通信

简单来说,首先需要在客户端和服务器端建立起一个连接,这部分需要http。连接一旦建立,客户端和服务器端就处于平等的地位,可以相互发送数据,不存在请求和响应的区别。

优点:

  • 全双工通信

缺点:

  • 实现复杂、需要设计消息通知总线

对比

image.png

参考&鸣谢