多形态MVC式Web架构：完成实时响应

\

本文要点

\\

在Web时代的前二十年，在用户视图及其现实或虚拟世界间的MVC可观察的事件驱动同步已经不再发挥什么作用了。     \\t

近期的一些新进展使这一基础理念得以在Web开发社区复苏。      \\t

dWMVC 和 pWMVC架构范式可以用于完成端到端变化观察“事件环”去创建无缝高效的实时响应应用行为。      \\t

传统中间件架构和新生代的服务器运动期环境都可被用于去完成这些实时响应行为。      \\t

非传统服务运行环境和数据库享有使用非标准化技术去创建创新解决方案的架构自由。\

之前在《多形态MVC式Web架构的分类》中，我们阐述并讨论了WMVC(基于Web的MVC) 架构范式的三个种类。它们是服务器端WMVC (sWMVC)、双重WMVC (dWMVC)以及点对点WMVC (pWMVC)。 sWMVC通常本质上是静态的，而其他两个架构范式可用于构建实时响应的Web应用组件。这是其后续文章，在这篇文章中，我们将利用这两个架构范式去设计和演示完全动态和响应式现代Web组件。

MVC架构方法的核心是实现用户视图与它们所反映的真实或虚拟世界之间同步的事件驱动的观察者模式。该视图（包括或未包括来自于用户的额外指令）预期是反映世界的变化。在许多MVC实现中都体现了这一思想，从最初的桌面界面到现代增强和虚拟现实（AR和VR）。在《多形态MVC式Web架构的分类》的讨论中提到，这个基本思想在Web的前二十年之后已经不再发挥什么作用了。在这段时间，Web应用以基于sWMVC的方法为主导。在最近几年，它在WUI（Web用户界面）应用开发社区中有所复兴。这个新运动是由许多技术产品和标准协议驱动的。

在本文中，我们将运用一些新的进步去实现异步的、自然的、无缝的以及高效的从WUI到后端SoR原始记录（source of record）变化观察响应式“事件环”。这方面关键实用技术是：

以下讨论相关的源码可点击在GitHub上获取。

用户故事

我们假定客户想要一个基于浏览器的博客评论系统。该Web应用允许用户观看一个博客主题并发表评论。

下面是一张Web页面的概念设计截图，由三个子视图构成。最上层那一块显示的是博客主题，其后是评论输入和提交域。最后一块区域负责显示所有用户输入的评论。

图1 博客评论设计截图

该日志系统应该包括两个很有特色的应用：

第一个应用会获取博客评论的所有权并把它们存储进集中式数据库中。\\t
第二个应用在集中式数据库中不保存任何用户评论，以确保用户隐私及客户责任。\

该系统的第三个组件是把其他来源的博客评论整合到这个集中式数据库中，它将在未来开发。

所有应用用户应该有一个视图永远能看到最新的博客评论。

在一个用户正在阅读评论时，由其他用户或通过自动化整合添加了新的评论，那就应该立即显示在所有用户Web页面上，而不必他或她手工刷新。

系统架构

具有集中式数据库的博客Web应用将用dWMVC范式予以设计和开发。总的来说，应用组件间的通讯将用AngularJS、SSE、InSoR和 CDC来实现。这些技术将使系统能够响应任何对集中式数据库中记录的修改（通过这个Web应用或未来的集成模块），并实时传递这种变化给最终用户，概览图如图2。

图2 集中式实时博客Web应用系统架构

客户端与服务器端之间的通讯基于的是HTTP和SSE协议，因为 InSoR 和 CDC 完全是在应用服务器和数据库之间往返的。

第二个Web应用将以pWMVC模式实现（如图3）。它将担任一个使能者的角色，在不必改变内容所有权的情况下把用户聚到一起。

图3 点对点实时博客Web应用的系统架构

通过dWMVC实现的集中式Web应用

下面的图4是基于dWMVC的博客Web应用设计概览。在浏览器端，视图和控制器组件是基于AngularJS的。两个不同的服务器端技术栈组合被用于dWMVC模型组件的实现。左侧的是传统Java栈和J2EE架构，以及关系型数据库 PostgresSQL。NodeJS和RethinkDB 那一侧用于图解基于JavaScript的服务器端运行环境和 NoSQL 数据库的架构范式。这些不同的服务器端设计和实现代表了实现同一功能的两种不同方法。除了NodeJS的异步特性，在InSoR 和 CDC中也存在特别明显的差异，在NoSQL数据库提供者中可自由控制架构，从而可以使用非标准化的技术去创建创新的解决方案（比如 lazy evaluation 和 lazy loading）。这两种实现还提供了很多技术性选择，以满足Web开发社区（从传统中间件实践者到NodeJS/NoSQL 狂热者）广泛的兴趣。

图4 博客应用dWMVC设计模式的架构图。客户端WMVC视图和控制器是基于AngularJS的。服务器端模型组件的两个选择是：Java-RDBMS（左侧）和NodeJS-NoSQL（右侧）。

dWMVC的视图和控制器

该博客网页是用AngularJS局部模板实现的。它是一个复合视图，用于为博客日志的提交和显示提供服务。

\\u0026lt;div class=\"blocker1\"\u0026gt;\    \u0026lt;h3\u0026gt;Topic: WMVC Real Time Reactive Fulfillment\u0026lt;/h3\u0026gt;    \\u0026lt;/div\u0026gt;\\\u0026lt;div id=\"castingId\" class=\"blocker2\"\u0026gt;\    \u0026lt;div\u0026gt;\        \u0026lt;h4\u0026gt;Post a Comment:\u0026lt;/h4\u0026gt;\    \u0026lt;/div\u0026gt;\    \u0026lt;form id=\"commentFormId\"\u0026gt;\        \u0026lt;div\u0026gt;\            \u0026lt;input type=\"text\" style=\"width: 30%\" name=\"newCommentId\" placeholder=\"What is in your mind?\" ng-model=\"newComment\"/\u0026gt;\            \u0026lt;button role=\"submit\" class=\"btn btn-default\" ng-click=\"addComment()\"\u0026gt;\u0026lt;span class=\"glyphicon glyphicon-plus\"\u0026gt;\u0026lt;/span\u0026gt;Send\u0026lt;/button\u0026gt;  \        \u0026lt;/div\u0026gt;\    \u0026lt;/form\u0026gt;\\u0026lt;/div\u0026gt;\\\u0026lt;div\u0026gt;\    \u0026lt;h4\u0026gt;All Comments:\u0026lt;/h4\u0026gt;\\u0026lt;/div\u0026gt;\\\u0026lt;div class=\"view\" ng-switch on=\"comments.comments.length\" ng-cloak\u0026gt;\    \u0026lt;ul ng-switch-when=\"0\"\u0026gt;\        \u0026lt;li\u0026gt;\            \u0026lt;em\u0026gt;No comments yet available.  Be the first to add a comment.\u0026lt;/em\u0026gt;\        \u0026lt;/li\u0026gt;\    \u0026lt;/ul\u0026gt;\    \u0026lt;ul ng-switch-default\u0026gt;\        \u0026lt;li ng-repeat=\"comment in comments.comments\"\u0026gt;\            \u0026lt;span\u0026gt;{{comment.comment}} \u0026lt;/span\u0026gt;\        \u0026lt;/li\u0026gt;\    \u0026lt;/ul\u0026gt;                                \\u0026lt;/div\u0026gt;

该HTML页面依赖于dWMVC控制器（如图5）与服务器端的通信去增加新的评论，并为其他用户刷新页面。

\ \\

图5 博客评论应用的视图和控制器组件。

为了为用户显示和刷新博客评论，该控制器：

通过HTTP之上的SSE连接后端服务器。\\t
如果有的话，则异步接收和显示所有已有的日志评论。\\t
保持连接并监听未来的SSE事件，它将更新的评论事件作为事件负载进行传递。\\t
当SSE事件发生时，推送和绑定更新的日志评论到用户的视图页面。\

所有这些交互和反应是用以下代码段实现的：

\var dataHandler = function (event) \{\        var data = JSON.parse(event.data);\        console.log('Real time feeding =\u0026gt; ' + JSON.stringify(data));\        $scope.$apply(function () \        {\                $scope.comments = data;\        });\};\var eventSource = new EventSource('/wmvcapp/svc/comments/all');\eventSource.addEventListener('message', dataHandler, false);

当一名用户增加一个新的评论时，它会直接传送到服务器端用于处理：

\$scope.addComment = function () \{\        var newInput = $scope.newComment.trim();\        \        if (!newInput.length) \        {\                return;\        }\\        var url = '/wmvcapp/svc/comments/cast';\        $http.post(url, newInput);\\        $scope.newComment = '';\};

接下来，在下面将讨论由服务器模型组件捕获和处理它所关联的数据变更。

dWMVC的Java和PostgreSQL模型组件

主要组件都包含在传统技术栈内，一个基于Java的中间件应用程序库组合和一个关系型数据库，如图6所示。

图6 基于Java和PostgreSQL的dWMVC模型组件。

这些模型中的交互和响应如图7所示。它展示了两个访问该博客应用的用户。

(点击放大图像)

图7 为查看博客评论的用户提供实时惰性更新的一系列交互，基于的是Java和PostgreSQL关系型数据库。

当一个用户打开博客页面时，dWMVC控制器立即实例化一个SSE实例，它启动与服务器的通信以接收博客评论。其相关的服务器组件如下所示，注解了SSE请求和实现基于SSE的输出。当服务器端组件接收到来自于dWMVC控制器基于SSE的请求时，它首先针对已有评论查询一下数据库，然后广播一个异步EventOutput 到该控制器，从而将该评论显示给用户浏览器。与此期间，为了接收在该PostgreSQL内对该博客主题后续变更的持续通知，该服务器端组件增加一个监听以保持对PostgreSQL数据的“主题观察者”的监听。

\@GET\@Path(\"/all\")\@Produces(SseFeature.SERVER_SENT_EVENTS)\public EventOutput getAllComments() throws Exception\{\        final EventOutput eventOutput = new EventOutput();\        Statement sqlStatement =  null;\        \        //Query and return current data\        String comments = BlogByPostgreSQL.getInstance().findComments(ConfigStringConstants.TOPIC_ID);       \        this.writeToEventOutput(comments, eventOutput); \        \        //Listen to future change notifications\        PGConnection conn = (PGConnection)BlogByPostgreSQL.getInstance().getConnection();\        sqlStatement = conn.createStatement();\        sqlStatement.execute(\"LISTEN topics_observer\");             \        conn.addNotificationListener(\"topics_observer\