在Kafka系列的事件驱动微服务的最初文章（见这里）中，我讨论了使用事件驱动通信和Kafka实现有状态微服务而不是标准的无状态rest服务的优点。

我还介绍了一个相关概念证明应用程序的架构和源代码。

在本文中，我想展示如何将异步事件驱动的通信从Kafka扩展到通过Java后端的Web前端。

因此，在本系列的第一篇文章中，我们去掉了HTTP作为后端微服务之间的通信协议，现在我们也将它（用WebSockets）替换为前端和后端之间的通信协议。

好吧，但你为什么要这么做？

因为它为最终用户提供了更好的体验！。

使用WebSockets可以构建合法的实时用户界面，更新会立即从服务器推送到客户端，用户无需单击任何按钮或刷新浏览器。

等等，但是我们也可以使用好的旧HTTP，不是吗？

好。。。HTTP不是为提供实时通信而设计的，但由于人们确实需要它，因此在它之上创建了许多解决方法和技术，例如：

• Long polling
• Short polling
• Server-Sent Events

那不过是些黑客，IMHO.。

另一方面，WebSockets提供全双工双向通信，这意味着信息可以从客户端流向服务器，同时也可以反向流动，它不能获得比这更多的实时性（这就是我之前说的“合法实时应用程序”的意思）。

HTTP vs WebSockets (source: https://blogs.windows.com/windowsdeveloper/2016/03/14/when-to-use-a-htt…)

例子

我在上一篇文章中使用的同一个PoC应用程序中添加了一个新服务，同时还添加了一个角度web前端。

好吧，但这项新服务有什么用？

它允许前端用户接收有关她/他选择的任何帐户当前余额的信息，以及余额更改时的实时更新。

此外，还向用户显示与当前所选账户（即贷记或借记的任何金额）过去或现在相关的任何交易的信息。

架构

新的Transfers WebSockets服务的主要组件包括：

• 两个Kafka使用者（每个主题一个）从Kafka集群检索消息
• 两个Kafka流本地存储以检索与给定密钥（id）关联的最新数据
• 使用简单映射存储给定帐户的事务列表实现的自定义本地存储。
• 两个Dispatcher，跟踪注册哪些WebSockets会话（即前端客户端）以接收与哪个帐户相关的实时余额更新或实时新传输数据，然后相应地发送更新。

这些是角前端的主要组成部分：

• 一个WebSockets服务，它处理连接生命周期并将接收到的消息分派给相应的RxJS主题。请注意，不同类型的JSON消息（请求、响应和更新）通过惟一的WebSockets连接流动。
• 将用户输入（即所选帐户的id）传递给WebSockets服务以便将其发送到远程服务器的窗体。
• 一种角度组件，用于显示帐户余额，该帐户余额通过RxJS观察者异步通知余额的变化（更新），RxJS观察者订阅了前面提到的WebSockets服务中相应的RxJS主题，然后相应地重新呈现该值。
• 另一个角度组件，与前一个组件类似，异步通知与所选帐户相关的任何新事务，并将其添加到显示的事务数据列表中。

行动起来

查看这个Youtube视频进行演示，在这个演示中，一个连续生成Kafka消息（表示随机资金转移）的测试过程被用来为应用程序提供数据。

而在Web用户界面上，用户可以看到转账发生时是如何弹出的，相关账户的余额也会相应地发生变化，所有这些都是实时的。

最后的想法

HTTP协议已经取得了巨大的成功，它使我们今天所知道的WWW成为可能。

它非常成功，已经扩展到了后端（RESTful服务和开放API），在那里它已经成为国王十多年了。

然而，技术不断发展，范例不断出现，对于某些用例，其他工具和设计可能是更好的选择。

我不知道未来的软件应用程序会是什么样子，我只能猜测。

事件驱动的微服务看起来非常强大，用Kafka实现它们并将WebSockets添加到组合中似乎很有希望。

事实上，一些公司能够看到REST API之外的东西，并开始向他们的客户提供Websockets API，以便更快地流式访问数据（例如）。

还有其他实现事件驱动微服务的替代方法，例如，最近我了解了Uber Cadence，但这是以后的文章

原文：https://dev.to/victorgil/kafka-websockets-angular-event-driven-microservices-all-the-way-to-the-frontend-12aa

本文：

讨论：请加入知识星球或者微信圈子【首席架构师圈】