Real-Time Chat app with Django Channels and WebSockets Introduction - Part 1

[Music] hello I'm Andreas chat your Tech curious web designer in this video I will give you an introduction overview on how to build a realtime chat application using Chango channels and websockets let me show you first a quick demo of the project so here we can see the chat application we're going to build I'm logged in with the admin user and we can see here that only one user is online at the moment let's add now a message anybody here as you can see the chat pubble appeared here on the right but obviously no one is receiving this message right now so let's add two more people to this conversation okay so we have here now Bobby and Lucy on two different additional browsers to check this out let's Bobby join now this conversation and as we can see the online number changed as soon as Bobby joined and if Lucy joins we have three users online then Lucy says hello guys and we can see this message is now broadcasted to the other two chat Windows as well so Bobby sees the message and replies Hello Lucy and we can see everyone gets this message simultaneously and the admin writes awesome now the admin leaves this chat group and as we can see the number changed here to two online then Bobby says bye-bye and also leaves and now only Lucy is left in this chat all right this is the application we're going to build in this tutorial series you can also check out a live version of this project on my website at awesome.com chat all right this technology of realtime communication is also widely used in computer games and other applications which require instant feedback from the server this topic might sound very complicated and under the hood it might be indeed quite complex however with Chango channels and HDMX this actually quite easy and straightforward to set up so even if a beginner this tutorial series should be very easy to follow however should you not be too familiar with the basics of Jenum I recommend checking out my backend tutorial series first to get understanding of the Core Concepts all right let me quickly tell you now the main steps we cover in this series so first we're going to build a basic Jango chat application a second step we add HDMX for interactivity then we switch to an asky server to upgrade to a web circuit connection this allows for a consistent and asynchronous connection between a browser and the server then we upgrade to ch layers this allows simultaneous communication with many users and as last we see how we can set up our ready database for production before I explain those Concepts more in detail a quick shout out to my newest supporters on patreon a high five to Constantine and a fist pump to Family Travel lock thank you so much for your support I really appreciate it I'm a stay-at home dead of two little cute bugers and every little help so thank you so much all right and now let's get into it so what is a websocket it is a communication protocol that provides consistent connection between a client and a server and it was introduced as a technology for the web in 2011 let's see how this works now in more detail Chango by default is using the HTTP protocol to communicate between the browser also called the client and the server Jango uses a whiskey server for this which stands for web server Gateway interface and the communication is synchronous meaning each request is handled one after the other when the browser sends a request to the backend server it receives a response back which renders the web page in the browser this is called a request response cycle and the connection is closed when the response is received in a websocket connection we have our asynchronous communication between the browser and the server this means requests can be handled independently from each other and are designed to handle multiple requests simultaneously this is for example the case when many users interact in a chat application at the same time to enable this we need to use an asynchronous Gateway interface known as an asky server an asky server can be described as a more modern version of a whiskey server that can handle both synchronous and asynchronous operations to establish this web soet connection the browser sends first a standard HTTP request to the server asking for an upgrade then the server initiates a web circuit handshake with the client this process typically involves an exchange of security keys with hashing once both sides agree on the terms a connection is established which remains open so both browser and server can send messages at any time without waiting for a response from the other side the asky server does not come automatically with jungo so we need to install one for our setup we using dff which is a server developed as part of the Chango channels project however they exist also other Alternatives such as uvicorn or hyper corn which offer similar functionality now let's take a look how our project will work under the hood first when the browser requests our chat page it initiates a standard HTTP request to the server to fetch the page once this chat page is loaded the HDMX code we implemented on the web page will trigger another HTTP request to the server this time requesting an upgrade to a websocket connection after receiving this upgrade request the server initiates a websocket handshake with a client then after the successful completion of the handshake the connection is officially upgraded to a websocket connection enabling asynchronous communication between the browser and the server using a Chango Channel a Chango channel is unique for each individual user and represents a onetoone connection between the server and the browser however in order to be able to receive and broadcast a message to many users we have to upgrade again and add a channel layer this channel layer can add each individual channel to a group where messages which are sent to this group can be accessed in real time additionally to facilitate this communication we need a inmemory data store which manages the communication between all the different parts for development we can use the inbuilt data store Chango channels provides in production however we need a more robust solution which can be provided by the redis database a very popular open-source key value database with inmemory data store and casing making sending and receiving data very fast this database does not replace our postgress database but works alongside it and they complement each other all right that's the infrastructure of our realtime chat app in a nutshell as last let's get familiar with the main action we can perform in each stage in the HTTP request stage we are working with the URL stopy file to call functions in our view stop file and then return a response using the return statement in the websocket stage we're working with the routing stopy file to call a method in a consumer stopy file so this file is the equivalent to the viop file to handle the business logic and then we return the data back to the BR browser with a send function in the channel layer stage we are dealing with asynchronous communication and we will be using a async to sync function to bridge the gap between asynchronous and synchronous code and finally to broadcast messages to all members of a group we are using the group send function all right I hope this explanation provided some insight and overview on how this works but things will get more clear when working with the actual code but this is all for this video thank you for watching and I hope you got an idea now what Chango channels and websockets are in the next video we will build out the basic chat application and also adding HDMX I hope to see you there until then stay curious my friends and chiao Chow for [Music] now [Music]

Channel: Andreas Jud

Views: 8,889

Keywords: django, python, websockets, Django Channels, real time communication, entrepreneur, ajudmeister, Andreas Jud, web development, web designer, redis, htmx

Id: u7siCTdGhuw

Length: 10min 5sec (605 seconds)

Published: Sat Mar 16 2024