前端实时通信的几种方式及其优缺点

电玩女神 2023-03-04 09:17 24阅读 0赞

1.短轮询  
短轮询的原理很简单，每隔一段时间客户端就发出一个请求，去获取服务器最新的数据，一定程度上模拟实现了即时通讯。  
优点：兼容性强，实现非常简单  
缺点：延迟性高，请求中有大半是无用，非常消耗带宽和服务器资源，影响性能，

2.comet  
comet有两种主要实现手段，一种是基于 AJAX 的长轮询（long-polling）方式，另一种是基于 Iframe 及 htmlfile 的流（streaming）方式，通常被叫做长连接。  
具体两种手段的操作方法请移步Comet技术详解：基于HTTP长连接的Web端实时通信技术

长轮询：客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。  
优点：兼容性好，在无消息的情况下不会频繁的请求，资源浪费较小  
缺点：服务器hold连接会消耗资源，返回数据顺序无保证，难于管理维护  
应用： webQQ、开心网、校内，Hi网页版、Facebook IM等等

长连接：在页面里嵌入一个隐蔵iframe，将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求，服务器端就能源源不断地往客户端输入数据。  
优点：兼容性好，消息即时到达，不发无用请求  
缺点：服务器维护长连接消耗资源  
实例：Gmail聊天

3.SSE 使用指南请看Server-Sent Events 教程  
SSE（Server-Sent Event，服务端推送事件）是一种允许服务端向客户端推送新数据的HTML5技术  
优点：基于HTTP而生，因此不需要太多改造就能使用，使用方便，而websocket非常复杂，必须借助成熟的库或框架  
缺点：基于文本传输效率没有websocket高，不是严格的双向通信，客户端向服务端发送请求无法复用之前的连接，需要重新发出独立的请求

4.Websocket  
Websocket是一个全新的、独立的协议，基于TCP协议，与http协议兼容、却不会融入http协议，仅仅作为html5的一部分，其作用就是在服务器和客户端之间建立实时的双向通信。  
优点：真正意义上的实时双向通信，性能好，低延迟  
缺点：独立与http的协议，因此需要额外的项目改造，使用复杂度高，必须引入成熟的库，无法兼容低版本浏览器

5.Web Worker  
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行

6.Service workers  
Service workers 本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理，创建有效的离线体验。

7、Flash Socket：在页面中内嵌入一个使用了Socket类的 Flash 程序JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信，JavaScript在收到服务器端传送的信息后控制页面的显示。 一般用在网络游戏中，web端基本不适用，加上早在 2017 年 7 月，Flash 的娘家 Adobe 已宣布在 2020年 底终止对 Flash 的支持。各个浏览器也在2020年底左右终止对 Flash 的支持  
优点：实现真正的即时通信，而不是伪即时。  
缺点：客户端必须安装Flash插件；非HTTP协议，无法自动穿越防火墙。  
实例：网络互动游戏。