2014-10-10 91 views
22

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

做角支持吗?或者我需要使用类似Socket.io的东西来触发这些事件?使用两者有意义吗? 如果有人可以帮助我,或者指出我有一些很好的解读,如果有一个目的是将他们两个一起使用。

希望我很清楚。感谢您的任何帮助。

回答

16

的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连接是双向的,你也可以用它来获取数据fr请求/响应模型中的服务器。你可以有两种型号:

  • 发布/订阅:凡客户宣称它的利益在某些主题和设置信息处理与该主题,然后服务器发布(或推送)的消息时,它看起来合适。

  • 请求/响应:客户端使用requestID(或correlationId)发送消息并侦听该请求标识的单个响应。

尽管如此,您可以同时使用这两种方法,并使用REST获取数据,使用WebSocket获取更新。

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

+1

不错的例子,但要注意$连接不是角度的一部分,以$开头的服务应该保留给角度api。 – pdem 2016-01-11 10:52:42

7

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

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

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

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

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