Menu

Pushing Real-Time Data to an Angular Service using Web Sockets – Code with Dan Blog

November 9th, 2017

  • Pushing data from the server to the client is useful when applications need to display real-time data or when they want to leverage the speed and low-latency benefits provided by TCP/IP Web Socket connections.
  • My answer to this question (up to this point anyway) has been to provide a high-level discussion of how Web Sockets can be used to push data to an Angular service.
  • The startTimer() function simulates data changing on the server and handles iterating through sockets and pushing data back to connected clients (note that there are additional techniques that can be used to push data to multiple clients – see the included comments).
  • As Web Socket data is received in the Angular service, the observer object created in createObservable() is used to pass the data to any Angular subscribers by calling observer.next(res.data).
  • Although this example is intentionally kept quite simple (there’s much more that could be added), it hopefully provides a nice starting point if you’re interested in streaming data to an Angular service using Web Sockets.

One of the questions I’ve been asked a lot lately in my Angular training classes, at conference workshops, and when working with different companies has been, “How can I push data to an Angular application from the server?”. Pushing data from the server to the client is useful when applications need to display real-time data or when they want to leverage the speed and low-latency benefits provided by TCP/IP Web Socket connections.

One of the questions I’ve been asked a lot lately in my Angular training classes, at conference workshops, and when working with different companies has been, “How can I push data to an Angular application from the server?”. Pushing data from the server to the client is useful when applications need to display real-time data or when they want to leverage the speed and low-latency benefits provided by TCP/IP Web Socket connections.

My answer to this question (up to this point anyway) has been to provide a high-level discussion of how Web Sockets can be used to push data to an Angular service. The general flow looks something like this:

While it’s fairly easy to follow the flow described above, having an actual example makes it much easier to demonstrate the overall concept. As a result, I decided to create a simple Angular/Web Socket proof of concept project that I’ll briefly walkthrough here.

There are a lot of options that can be used to add Web Socket functionality to the server – it really depends upon what language/framework you prefer. For the Angular/Web Socket example project, I went with Node.js and socket.io since it’s easy to get up and running on any OS. The overall server is extremely easy to get up and running (keep in mind that I purposely kept it very basic to demonstrate the overall concept). The server starts a timer (used to simulate data changing on the server) once a client connection is made and returns…

Pushing Real-Time Data to an Angular Service using Web Sockets – Code with Dan Blog