【问题标题】:AngularJS and WebSockets beyondAngularJS 和 WebSockets 超越
【发布时间】:2014-12-05 14:56:03
【问题描述】:

我刚刚阅读了这个post,我明白其中的区别。但我的脑海里仍然有一个问题。我可以/应该在同一个应用程序/网站中使用它吗?假设我希望 AngularJs 获取内容并更新我的页面,连接到 REST api 和所有顶级内容。但最重要的是,我还想要实时聊天,或者在收到更新或收到消息时触发其他客户端上的事件。

Angular 支持吗?或者我需要使用 Socket.io 之类的东西来触发这些事件?两者都用有意义吗? 如果有人可以帮助我或向我指出一些关于这方面的好读物,如果有将它们一起使用的目的。

希望我已经足够清楚了。感谢您的任何帮助。

【问题讨论】:

    标签: javascript angularjs websocket socket.io


    【解决方案1】:

    Javascript 支持 WebSocket,因此您不需要额外的客户端框架来使用它。请看一下在这个WebSocket based AngularJS application 中声明的这个$connection service

    基本上你可以收听消息:

       $connection.listen(function (msg) { return msg.type == "CreatedTerminalEvent"; }, 
            function (msg) {
                addTerminal(msg);
                $scope.$$phase || $scope.$apply();
       });
    

    听一次(非常适合请求/响应):

        $connection.listenOnce(function (data) {
            return data.correlationId && data.correlationId == crrId;
        }).then(function (data) {
            $rootScope.addAlert({ msg: "Console " + data.terminalType + " created", type: "success" });
        });
    

    并发送消息:

        $connection.send({
            type: "TerminalInputRequest",
            input: cmd,
            terminalId: $scope.terminalId,
            correlationId: $connection.nextCorrelationId()
        });
    

    通常,由于 WebSocket 连接是双向的并且has a good support,您也可以使用它在请求/响应模型中从服务器获取数据。你可以有两个模型:

    • 发布者/订阅者:客户端声明其对某些主题的兴趣并为具有该主题的消息设置处理程序,然后服务器在它认为合适的时候发布(或推送)消息。

    • 请求/响应:客户端发送带有 requestID(或correlationId)的消息,并监听该 requestId 的单个响应。

    不过,如果您愿意,您可以同时拥有两者,并使用 REST 获取数据,使用 WebSocket 获取更新。

    在服务器端,您可能需要使用 Socket.io 或任何服务器端框架才能拥有支持 WebSocket 的后端。

    【讨论】:

    • 很好的例子,但请注意 $connection 不是 Angular 的一部分,以 $ 开头的服务应该保留给 Angular api。
    【解决方案2】:

    正如您链接帖子中的answer 所述,Angular 目前没有对 Websockets 的内置支持。因此,您需要直接使用 Websockets API,或者使用像 Socket.io 这样的附加库。

    但是,要回答您是否应该在单个 Angular 应用程序中同时使用 REST api 和 Websockets 的问题,没有理由不能同时使用标准 XmlHttpRequest 请求与 REST api 交互,使用 $http 或另一个数据层库,例如 BreezeJS,用于应用程序各个部分中包含的某些功能,并且还使用 Wesockets 用于另一部分(例如实时聊天)。

    Angular 旨在帮助处理这种类型的场景。一个典型的解决方案是创建一个或多个控制器来处理应用程序功能并更新您的页面,然后创建单独的服务或工厂来封装每个数据端点的数据管理(即 REST api 和实时聊天服务器),然后将其注入到控制器中。

    有大量关于使用 Angular 服务/工厂管理数据连接的信息。如果您正在寻找一种资源来帮助指导您如何构建 Angular 应用程序以及数据服务适合的位置,我建议您查看 John Papa 的 AngularJS Styleguide,其中包括关于 Data Services 的部分。

    更多关于工厂和服务的信息,可以查看AngularJS : When to use service instead of factory

    【讨论】:

      猜你喜欢
      • 2011-05-23
      • 2013-07-21
      • 2015-08-31
      • 1970-01-01
      • 2018-10-09
      • 2010-10-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多