2014-10-10 29 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