一旦AngularJs中的数据库发生变化，如何实现自动视图更新？

Posted 2023-05-07

【中文标题】一旦AngularJs中的数据库发生变化，如何实现自动视图更新？

【英文标题】：How to implement automatic view update as soon as there is change in database in AngularJs?

【发布时间】：2013-11-27 01:40:47

【问题描述】：

我正在使用带有 Grails 框架的 AngularJs 并使用 mysql 作为数据库。

我想实现 Facebook 上的自动视图更新等功能。

到目前为止，我能够将 JSON 数据从 Grails 控制器发送到角度控制器并填充视图。

但是我如何实现某些功能，例如更改数据库并实时更新视图而无需重新加载页面。

我遇到了

"使用 $timeout 和 $http 每 X 毫秒轮询一次"

这对于现实世界的应用是否有效？

请通过建议一些措施或 Angular 实现来帮助我解决我的问题。

【问题讨论】：

你可以使用像firebase这样的现代数据库进行实时更新，但如果你想使用mysql，那么在x毫秒内轮询是同步的最佳方式

您可以使用 SocketIO 等基于推送的更新技术，在每次更新发生时，将通知从服务器发送到所有连接的客户端。

【参考方案1】：

对于视图的“自动”更新，我使用了 Grails 事件推送插件，我建议你看看它。 http://grails.org/plugin/events-push

将事件发送到浏览器并在客户端监听它们并使用propper信息更新AngularJS范围非常容易。

示例

一个angularJS文件

window.grailsEvents = new grails.Events('http://myAppUrl.com', enableXDR:true,readResponsesHeaders:false);

/**
 * Module for listening to grails events
 */
angular.module('grailsEvents', []).factory('grailsEvents', function() 
    return window.grailsEvents
);

window.myModule = angular.module('myModule',['grailsEvents'])
   .run(function()
       grailsEvents.on('myEvent',function(data)
          //Every time an event occurs, this will be executed
          console.log(data);
       );
   );

MyEvents.groovy（在 grails-app/conf 中）

events = 
    'myEvent' browser:true

TestController.groovy（发送事件的控制器示例）

class TestController
    def index()
       event(topic:'myEvent',data:MyDomain.list())
    

【讨论】：

您好，能否请您提供 Event-push 的示例应用程序以及 AngularJs 的链接，以便我了解其工作原理。

抱歉耽搁了，我添加了一个小例子。如果您需要更多帮助，请告诉我

感谢 Eylen 的回复，能否请您在 Github 或其他存储库上托管一个示例应用程序，以便我理解，由于缺乏适当的文档，我无法使用 Event Push 插件。对大家都有帮助，也可以作为使用AngularJs实现Event Push插件的人的参考。

好的，我会尝试在GitHub上放一个例子，但不知道什么时候因为我没有太多的空闲时间......我会在我添加它时告诉你

当我安装事件推送插件然后尝试运行我的应用程序时，我正在使用 Grails 2.2.3 我得到以下错误：org.atmosphere#atmosphere-runtime;1.1.0-SNAPSHOT: not found

【参考方案2】：

如果您必须使用 MySQL，我建议您使用稍长的路线，同时牢记性能。您绝对不想每 X 秒进行一次轮询。 cmets 中指出的 SocketIO 方法是一个不错的方法。但是，您需要稍微扩展您的设计。

您将需要实施“主题”概念。例如，假设您有一个名为 Fruits 的页面，您希望在有人发布有关 Fruits 的内容时自动更新该页面。因此，您要做的是创建一个名为 /topics/fruits 之类的“房间”（在 Socket.IO 术语中），并让正在查看此页面的任何人“订阅”该房间。接下来，当有人发布有关水果的内容时，您只需将这些新数据“推送”到 /topics/fruits 房间，该视图中的每个人都会收到更新。

由于您使用的是 grails，这里有一些东西可以让您指出这一点：http://compiledammit.com/2012/09/05/websockets-and-grails-broadcasting-to-topics/。对于 AngularJS 部分，您可以阅读 http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets/ 并实现 Socket.io 客户端部分。只需忽略该帖子中的 NodeJS 部分即可。

【参考方案3】：

Eylen 发布的示例就像一个魅力。此外，如果您想在控制器中侦听事件并更新模型，请执行以下操作：

grailsEvents.on('myEvent', function (data) 
    $scope.$apply(function()
        $scope.mymodel = data.someField;
    );        
);