如何实现消息功能_如何优雅的实现消息通信？

一、背景

作为一名 Web 开发者，在日常工作中，经常都会遇到消息通信的场景。比如实现组件间通信、实现插件间通信、实现不同的系统间通信。那么针对这些场景，我们应该怎么实现消息通信呢？本文阿宝哥将带大家一起来学习如何优雅的实现消息通信。

好的，接下来我们马上步入正题，这里阿宝哥以一个文章订阅的例子来拉开本文的序幕。小秦与小王是阿宝哥的两个好朋友，他们在阿宝哥的 “全栈修仙之路” 博客中发现了 TS 专题文章，刚好他们近期也打算系统地学习 TS，所以他们就开启了 TS 的学习之旅。

时间就这样过了半个月，小秦和小王都陆续找到了阿宝哥，说 “全栈修仙之路” 博客上的 TS 文章都差不多学完了，他们有空的时候都会到 “全栈修仙之路” 博客上查看是否有新发的 TS 文章。他们觉得这样挺麻烦的，看能不能在阿宝哥发完新的 TS 文章之后，主动通知他们。

好友提的建议，阿宝哥怎能拒绝呢？所以阿宝哥分别跟他们说：“我会给博客加个订阅的功能，功能发布后，你填写一下邮箱地址。以后发布新的 TS 文章，系统会及时给你发邮件”。此时新的流程如下图所示：

在阿宝哥的一顿 “操作” 之后，博客的订阅功能上线了，阿宝哥第一时间通知了小秦与小王，让他们填写各自的邮箱。之后，每当阿宝哥发布新的 TS 文章，他们就会收到新的邮件通知了。

阿宝哥是个技术宅，对新的技术也很感兴趣。在遇到 Deno 之后，阿宝哥燃起了学习 Deno 的热情，同时也开启了新的 Deno 专题。在写了几篇 Deno 专题文章之后，两个读者小池和小郭分别联系到我，说他们看到了阿宝哥的 Deno 文章，想跟阿宝哥一起学习 Deno。

在了解他们的情况之后，阿宝哥突然想到了之前小秦与小王提的建议。因此，又是一顿 “操作” 之后，阿宝哥为了博客增加了专题订阅功能。该功能上线之后，阿宝哥及时联系了小池和小郭，邀请他们订阅 Deno 专题。之后小池和小郭也成为了阿宝哥博客的订阅者。现在的流程变成这样：

这个例子看起来很简单，但它背后却与一些设计思想和设计模式相关联。因此，接下来阿宝哥将分析以上三个场景与软件开发中一些设计思想和设计模式的关联性。

二、场景与模式

2.1 消息轮询模式

在第一个场景中，小秦和小王为了能查看阿宝哥新发的 TS 文章，他们需要不断地访问 “全栈修仙之路” 博客：

这个场景跟软件开发过程中的轮询模式类似。早期，很多网站为了实现推送技术，所用的技术都是轮询。轮询是指由浏览器每隔一段时间向服务器发出 HTTP 请求，然后服务器返回最新的数据给客户端。常见的轮询方式分为轮询与长轮询，它们的区别如下图所示：

这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而 HTTP 请求与响应可能会包含较长的头部，其中真正有效的数据可能只是很小的一部分，所以这样会消耗很多带宽资源。为了解决上述问题 HTML5 定义了 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

WebSocket 是一种网络传输协议，可在单个 TCP 连接上进行全双工通信，位于 OSI 模型的应用层。WebSocket 协议在 2011 年由 IETF 标准化为 RFC 6455，后由 RFC 7936 补充规范。

既然已经提到了 OSI(Open System Interconnection Model)模型，这里阿宝哥来分享一张很生动、很形象描述 OSI 模型的示意图：

关于奇舞周刊

《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。