AngularJS和WebSockets超越

时间:2014-10-10 12:24:39

标签: javascript angularjs websocket socket.io

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

Angular支持吗?或者我需要使用像Socket.io这样的东西来触发这些事件?使用两者都有意义吗? 如果有人可以帮助我或指导我一些好的阅读,如果有目的的话可以同时使用它们。

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

2 个答案:

答案 0 :(得分:16)

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

基本上你可以收听消息:

   $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的后端。

答案 1 :(得分:7)

如链接帖子中的answer所述,Angular目前没有内置的Websockets支持。因此,您需要直接使用Websockets API,或使用其他库,如Socket.io。

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

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

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

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