AngularJS and WebSockets beyond

Question

I just read this post, and I do understand what the difference is. But still in my head I have the question. Can/Should I use it in the same App/Website? Say I want the AngularJs to fetch content and update my page, connecting to a REST api and all of that top stuff. But on top of that I also want a realtime chat, or to trigger events on other clients when there is an update or a message received.

Does Angular support that? Or I need to use something like Socket.io to trigger those events? Does it make sense to use both? If someone could help me or point me to some good reading about that if there is a purpose for using both of them together.

Hope I'm clear enough. thank you for any help.

Answer 1

Javascript supports WebSocket, so you don't need an additional client side framework to use it. Please take a look at this $connection service declared in this WebSocket based AngularJS application.

Basically you can listen for messages:

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

Listen once (great for request/response):

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

And send messages:

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

Usually, since a WebSocket connection is bidirectional and has a good support, you can also use it for getting data from the server in request/response model. You can have the two models:

• Publisher/Subscriber: Where the client declares its interest in some topics and set handlers for messages with that topic, and then the server publish (or push) messages whenever it sees fit.

• Request/response: Where the client sends a message with a requestID (or correlationId), and listen for a single response for that requestId.

Still, you can have both if you want, and use REST for getting data, and WebSocket for getting updates.

In server side, you may need to use Socket.io or whatever server side framework in order to have a backend with WebSocket support.

Answer 2

As noted in the answer in your linked post, Angular does not currently have built-in support for Websockets. So, you would need to directly use the Websockets API, or use an additional library like Socket.io.

However, to answer your question of if you should use both a REST api and Websockets in a single Angular application, there is no reason you can't have both standard XmlHttpRequest requests for interacting with a REST api, using $http or another data layer library such as BreezeJS, for certain functionality included in various parts of the application and also use Wesockets for another part (e.g. real time chat).

Angular is designed to assist with handling this type of scenario. A typical solution to would be to create one or more controllers to handle the application functionality and update your page and then creating separate Services or Factories that encapsulate the data management of each of your data end points (i.e. the REST api and the realtime chat server), which are then injected into the Controllers.

There is a great deal of information available on using angular services/factories for managing data connections. If you're looking for a resource to help guide you on how to build an Angular application and where data services would fit in, I would recommend checking out John Papa's AngularJS Styleguide, which includes a section on Data Services.

For more information about factories and services, you can check out AngularJS : When to use service instead of factory