Skip to content

Commit a7b2346

Browse files
committed
Update web-real-time-message-push.md
1 parent 2f95403 commit a7b2346

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

docs/system-design/web-real-time-message-push.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ head:
1212

1313
我有一个朋友做了一个小破站,现在要实现一个站内信 Web 消息推送的功能,对,就是下图这个小红点,一个很常用的功能。
1414

15-
![](https://guide-blog-images.oss-cn-shenzhen.aliyuncs.com/github/javaguide/system-design/web-real-time-message-push/1460000042192380.png)
15+
![站内信 Web 消息推送](https://guide-blog-images.oss-cn-shenzhen.aliyuncs.com/github/javaguide/system-design/web-real-time-message-push/1460000042192380.png)
1616

1717
不过他还没想好用什么方式做,这里我帮他整理了一下几种方案,并简单做了实现。
1818

@@ -26,17 +26,17 @@ head:
2626

2727
移动端消息推送示例 :
2828

29-
![](https://guide-blog-images.oss-cn-shenzhen.aliyuncs.com/github/javaguide/system-design/web-real-time-message-push/IKleJ9auR1Ojdicyr0bH.png)
29+
![移动端消息推送示例](https://guide-blog-images.oss-cn-shenzhen.aliyuncs.com/github/javaguide/system-design/web-real-time-message-push/IKleJ9auR1Ojdicyr0bH.png)
3030

3131
Web 端消息推送示例:
3232

33-
![](https://guide-blog-images.oss-cn-shenzhen.aliyuncs.com/github/javaguide/system-design/web-real-time-message-push/image-20220819100512941.png)
33+
![Web 端消息推送示例](https://guide-blog-images.oss-cn-shenzhen.aliyuncs.com/github/javaguide/system-design/web-real-time-message-push/image-20220819100512941.png)
3434

3535
在具体实现之前,咱们再来分析一下前边的需求,其实功能很简单,只要触发某个事件(主动分享了资源或者后台主动推送消息),Web 页面的通知小红点就会实时的 `+1` 就可以了。
3636

3737
通常在服务端会有若干张消息推送表,用来记录用户触发不同事件所推送不同类型的消息,前端主动查询(拉)或者被动接收(推)用户所有未读的消息数。
3838

39-
![](https://guide-blog-images.oss-cn-shenzhen.aliyuncs.com/github/javaguide/system-design/web-real-time-message-push/1460000042192384.png)
39+
![消息推送表](https://guide-blog-images.oss-cn-shenzhen.aliyuncs.com/github/javaguide/system-design/web-real-time-message-push/1460000042192384.png)
4040

4141
消息推送无非是推(push)和拉(pull)两种形式,下边我们逐个了解下。
4242

@@ -198,7 +198,7 @@ SSE 在服务器和客户端之间打开一个单向通道,服务端响应的
198198

199199
整体的实现思路有点类似于在线视频播放,视频流会连续不断的推送到浏览器,你也可以理解成,客户端在完成一次用时很长(网络不畅)的下载。
200200

201-
![SSE 示例](https://guide-blog-images.oss-cn-shenzhen.aliyuncs.com/github/javaguide/system-design/web-real-time-message-push/1460000042192391.png)
201+
![SSE 示意图](https://guide-blog-images.oss-cn-shenzhen.aliyuncs.com/github/javaguide/system-design/web-real-time-message-push/1460000042192391.png)
202202

203203
SSE 与 WebSocket 作用相似,都可以建立服务端与浏览器之间的通信,实现服务端向客户端推送消息,但还是有些许不同:
204204

@@ -297,7 +297,7 @@ Websocket 应该是大家都比较熟悉的一种实现消息推送的方式,
297297

298298
是一种在 TCP 连接上进行全双工通信的协议,建立客户端和服务器之间的通信渠道。浏览器和服务器仅需一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
299299

300-
![Websocket 示例](https://guide-blog-images.oss-cn-shenzhen.aliyuncs.com/github/javaguide/system-design/web-real-time-message-push/1460000042192394.png)
300+
![Websocket 示意图](https://guide-blog-images.oss-cn-shenzhen.aliyuncs.com/github/javaguide/system-design/web-real-time-message-push/1460000042192394.png)
301301

302302
SpringBoot 整合 Websocket,先引入 Websocket 相关的工具包,和 SSE 相比额外的开发成本。
303303

0 commit comments

Comments
 (0)