前端如何实现即时通讯（websocket）

「爱情、让人受尽委屈。」 2023-10-02 12:29 129阅读 0赞

**目录**

1.前言：

2.基于Web的前端，存在以下几种可实现即时通讯的方式：

3.短轮询 (历史方案)

4.Comet - ajax长轮询 (历史方案)

5.SSE

6.WebSocket (目前主流)

--------------------

#### 1.前言： ####

> **`严格意义上: HTTP协议只能做到客户端请求服务器, 服务器做出响应, 做不到让服务器主动给客户端推送消息!`**
> 
> --------------------
> 
> **那么如果服务器数据更新了, 想要即时通知到客户端怎么办呢 ? (即时通信需求)**
> 
> --------------------
> 
> 即时通信需求: 服务器数据一有更新, 希望推送给到浏览器

--------------------

#### 2.基于Web的前端，存在以下几种可实现即时通讯的方式： ####

>  *  **短轮询 (历史方案)**
>     
>     开个定时器, 每隔一段时间发请求 (实时性不强)
>  *  **Comet - ajax长轮询(历史方案)**
>     
>     发送一个请求, 服务器只要数据不更新, 就一直阻塞 (服务器压力过大)
>  *  **SSE**
>     
>     (利用了http协议, 流数据的传输, 并不是严格意义的双向通信, 无法复用连接)
>  *  **WebSocket (主流)**
>     
>     性能和效率都高!

--------------------

####  3.**短轮询** (历史方案) ####

> 短轮询就是客户端定时发送请求，获取服务器上的最新数据。不是真正的即时通讯，但一定程度上可以模拟即时通讯的效果。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16][]

**优缺点：**

*  优点：浏览器兼容性好，实现简单 setInterval
 *  缺点：实时性不高，资源消耗高，存在较多无用请求，影响性能

--------------------

#### 4.**Comet - ajax长轮询** (历史方案)  ####

> 短轮询的实时性, 着实太差, 所以 Comet 技术方案应运而生, 用以实现即时通讯
> 
> --------------------
> 
> 使用 Ajax 长轮询（long-polling）
> 
>  *  浏览器发出XMLHttpRequest 请求，服务器端接收到请求后，会阻塞请求直到有数据或者超时才返回
>  *  浏览器JS在处理返回信息(有数据或者超时) 后再次发出请求。服务器收到请求后, 会再次阻塞到有数据或者超时

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

**优缺点：**

*  优点：浏览器兼容性好，**即时性好**，**不存在⽆⽤请求**
 *  缺点：**服务器压力较大**（维护⻓连接会消耗较多服务器资源）

--------------------

#### 5.**SSE** ####

> 服务端推送事件（Server-Sent Event），它是⼀种基于HTTP协议, 允许服务端向客户端推送新数据的 HTML5 技术。

**问题: HTTP协议 不是 无法做到服务器主动向客户端推送消息么?**

这些 SSE 采用了一些小技巧! 详细见 [参考文章：SSE教程][SSE]

--------------------

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

**优缺点：**

*  优点：基于 HTTP，无需太多改造就能使⽤；相比 WebSocket 要简单一些
 *  缺点：基于⽂本传输，效率没有 WebSocket ⾼；基于HTTP协议, 不是严格的双向通信

--------------------

#### 6.**WebSocket** (目前主流) ####

> **这是基于 TCP 协议的全新、独⽴的协议，作⽤是在服务器和客户端之间建⽴实时的双向通信。**
> 
> --------------------
> 
> **WebSocket 协议与 HTTP 协议保持兼容，但它不会融⼊ HTTP 协议，仅作为 HTML 5 的⼀部分。**

**优缺点：**

*  优点：真正意义上的双向实时通信，性能好、延迟低
 *  缺点：由于是独⽴于 HTTP 的协议，因此要使用的话需要对项⽬作改造；
    
    使⽤复杂度会⾼一些，通常需要引⼊成熟的库 (如: Socket-io )；并且⽆法兼容低版本的浏览器

--------------------

HTTP 和 WebSocket 的连接通信比较图：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_19_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/6b88e268ce2e47e5ae85d057036799ed.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/0bb19e48525846e3a068c04e43594f55.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_20,color_FFFFFF,t_70,g_se,x_16
[SSE]: https://www.ruanyifeng.com/blog/2017/05/server-sent_events.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/8123f147147f4be89d6910cc9e2d1c9e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/231ab0098b0c42738f8ba0ebd4f14f88.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_19,color_FFFFFF,t_70,g_se,x_16