Angular and Django – WebSockets Communication

Django is a great Web framework for server side , Angular is a great JS framework for client side. While Integrating both frameworks, we get many benefits.

This is the 3rd post about integrating both frameworks

  • For getting started tutorial for using both Angular and Django see this post
  • For integrating data packages – numpy, spicy, pandas and more see this post

If we want to develop Real time web applications or we want to get notification from  the server to the client without the need to poll it periodically, we can use Web Sockets.

The infrastructure for web sockets in django is – channels – For simple example of using channels in django see this post

The server side – Django

To use channels in django we need to add it to the installed apps and config a backend (in this case redis server) :

Then we need to create a channel routing table for the channel events:

This declares that on web socket new connection ws_connect function with be called , on disconnect ws_disconnect and every time we get a message from the client ws_message will be called

To implement the event handlers we add a consumers.py file:

In this example we are waiting for message ‘start’ , then we start a periodic timer to generate a random number and send it to the client using the socket

To integrate Angular we need to add the following setting (to the setting.py file):

Also create a directory ‘static’  to put the generated javascript files
 

The Client side – Angular

To use web socket we build a simple Angular application with 2 buttons – to send start and stop commands:

On start click the client will send ‘start’ on the socket and the server will start send random numbers every 1 second:

The template:

To create Web socket:

We can also use RxJS to create observable and observer:

We can implement it as a service (here it is in the component)

Now we can subscribe to receive messages and use the next method to send:

To deploy the angular code use:

and copy the js files to the static directory in django project

Change the index.html file to integrate django:

Now run redis server and python server to see the results

You can find the full code here

Subscribe To Our Mailing List

3 thoughts on “Angular and Django – WebSockets Communication

  1. I agree, Django-backend, Angular-frontend is a fantastic end-to-end framework-set; there is quite a bit of information around about coupling these two together with Django REST Framework (DRF) API.
    This is the first (‘restless’ API) article I’ve seen using ‘sockets’ for Django/Angular which IMHO really makes the most of ‘reactive’ programming patterns.
    Awesome, I’m looking forward to trying it out. I’d love to see something like this on a training site like Udemy, pluralsite, cfe, … or even youtube, with Angular/CLI and perhaps ngPrime as a replacement for bootstrap.
    Thanks so much for the post, great set of three posts on this subject.

  2. which JS files DOi need to copy to static folder?

  3. tHANK YOU FOR THE EXAMPLE. IT HELPS A LOT. BUT CAN YOU PLEASE ELABORATE HOW TO CONFIGURE CHANNELS IN ANGULAR? i AM NOT TALKING ABOUT THE USAGE. THANK YOU

Leave a Reply

Your email address will not be published. Required fields are marked *