Django Channels Tutorial 🔥: the most minimal Real Time app (not Chat) | Django WebSockets

this is the absolutely minimal example of real-time jungle and django channels app that uses web sockets these integers are generated on jungle side and then are sent via the websocket protocol to the page this is the synchronous code that can handle only one client if i open the second tab and try to make a request to the url address i can't get the page but at the first stop the first pipe is still working without problems so it's synchronous code and also it doesn't use radius at all but nevertheless it's the minimal example of a real-time app that uses web sockets and django channels as you can see the page is not reloading and i'm doing nothing there is no events except the data that are coming from the jungle side and it's the only event ganga channels it's an advanced topic so i assume that you know janga core very well if not consider watching my jungle 3 tutorial ok let's do it first of all i want to create a basic django project with one app and one template so i have to install django first and now i want to create a jungle project let's say it'll be the real time project then i want to create an app let's say it'll be the integers app and also let's apply migrations okay we can start the jungle development server and we can see django welcome page okay now on the level of the manage py file in the root real time project folder i'm creating the templates directory and inside the templates directory i want to create a template let's say it'll be the index.html basic layouts and also i want to use bootstrap styles get bootstrap.com copy this link and paste it here django doesn't know about the templates folder yet so in the real-time project child directory in the settings pi file i want firstly to append the installed apps with the integers app and also the templates lasts it's theirs last i want to append with the base der global variable and i am calling is join path method and passing into it the templates string the name of this folder then i have to define a road and view that will handle requests to a page to the index page so i need the root urls poi file and here i'm creating a new url pattern the root url address and this pattern will include the integers folder and its urls py module and i want to import the include function then in the integers folder i have to create the euros py model and the handler for all requests to this url address will be let's say the index function that i have to import from dot views import index dot means the current folder the integers and then i have to define the index function in the viewspi file i am defining a new function and the render function will render the index html file and the context dictionary will have the text key and some value i have to save eurospy and in the index.html file i want to use my hello world it's a basic bootstrap layout let's test it i have to restart my server and again hello world okay it's working it's the quite typical django project very basic application and the next step is to install the jungle channels and integrate it to the project let's install it now i have to append the installed apps last with the channels app so i need the settings pi module again and somewhere here i'm appending the channels comma then i have to modify a bit a definition of the asynchronous application that's defined in the ascii dot py model and also let's look at the whiskey py model and we can see that the content of these two files is almost the same so i need the asgi dot py this file is generated by django and it doesn't use the jungle channels yet so first of all i have to import the protocol type router class so here from channels routine import protocol type router and the application variable will be an instance of the protocol type router the protocol type router takes a dictionary as an argument and this dictionary will have http key and the value of the http key will be the returning value of get asgi application function okay i defined the application variable now i need to use it so in the settings py file i am scrolling down until the definition of the whiskey application variable now i'm copying this line and replacing these gates so asgi and the path to the application variable will be real time project folder asgi module and the application variable and now we can start the development server again and we can see that the synchronous server was run our app is still working okay and now let's define a web socket a router and a handler like we usually do with the core jungle apps let's start with the router we can define it in any file we want but the preferred way is to create a special routing py file and i want to create it in the integers app folder routing dot py and the idea is absolutely the same like for the core urls py files so i need the path function from jungle euros import path and let's create a list let's say it will be ws url patterns websocket euro patterns list and it will have only one element for this project i'm calling the path function as usual and the first argument should be a url address let's say it'll be w s web socket and some url and the second argument is the handler that will handle all requests to this url in django core such handlers are called views as you know but in jungle channels they are called consumers so let's say that the handler will be ws consumer class and i'm calling it as asky method so let's import on this class from dot consumers model imports this class the dot here means the current folder and in the current folder i have no consumers dot py model so let's define it and here i have to define my ws consumer class it should be a subclass of at least websocket consumer class and i have to import it from channels generic websocket import web socket consumer my class will be a sub class of the web socket consumer class and a pass for a while we will back to it a bit later because i need to use these ws url patterns list let's open again the asgi dot py file and here i have to add the second key to this dictionary the second key will be web socket and the value of this key will be an instance of the auth middleware stack class that i have to import so from channels auth import oauth middleware stack class and as the argument the oauth middleware star class gets an instance of the url router class url router let's import it to and in its turn the url router class gets our ws url patterns list as an argument ws url patterns that i have to import from integers app routing model import ws url patterns here first of all django channels check the type of the connection it checks the protocol type whether it is an http connection or a web socket connection the web socket it's a different protocol it's not http it's ws protocol if the connection is the web socket connection it will be given to the auth middleware stock class to identify a user like django does with its own oauth model after that the connection will be given to the url router class that pass it to the consumer that was defined in these url patterns list that's it let's back to our ws consumer class the handler of all requests and in my ws consumer class i have to override the only one method i have to override only one method because it's the minimal example it's a demonstration so connect and here i have to accept the incoming connection from the client from the browser so i'm calling the accept method self accept the connection is accepted and established so i want to start messaging to the connection i want to randomly generate integers and then send them in the json object so let's import i need the json model from random model i need a rand int function and from time import sleep and here i'm starting a for loop for i in range 1000 for example and then i'm creating a dictionary with a message key for example and the value of the message key will be the returning value of the rand int function that will randomly generate integers from 1 to 100 for example and then i have to pass this dictionary to the json dump s to dump string method it will return the json object that i want to send self send i'm calling the send method and then i do an awful thing i sleep one second i do it because it's just an example so the send method will send the json object to the opened connection to the other side of this connection to the client that's it with the server side now i need the client so let's close it routing settings and i need our index.html file first of all i want to add an id to the h1 header and id let's say will be app just app and then i need the script block here and here i have to define an instance of the websocket class i am creating a new variable the socket and i need a new instance new web socket and then i have to pass into the websocket constructor a url address to send requests to and the url address should be the same as the one that i defined in the w url patterns list so it should be ws websocket different protocol local host 8000 and then this part i forgot the trailing slash here it will cause an exception so paste it here please don't forget trailing slashes then i have to define an on message attribute it will be the method the function that gets the event from the browser event it's an object that browser will generate and then i want to get the incoming data so i'm creating a new variable data json parse and i get the data attribute of the event objects let's print it console.log data and then at last i want to get the h1 header by its id and change its text so document query selector app id and i need its inner text property and the value will be my data variable it's a dictionary it's a javascript object and it has the message key because i defined it here message key message let's test it let's restart our server doesn't work let's test it unexpected token instead of semicolon okay again f5 and it's working it's a very simple app but it's a real time app and it uses lab sockets so if you like the video please leave a like and subscribe to the channel thanks for watching you

Channel: Red Eyed Coder Club

Views: 27,558

Keywords: python, django, django channels, django channels tutorial, django real time, django websockets, django tutorial, django websockets tutorial, django websockets example, django real time application, real time application, websockets app, django real-time, django channels project, django websocket, websocket django, django channels 3, django channel, django celery, django advanced tutorial, celery django, django websocket example, django channels websocket, red eyed coder club

Id: R4-XRK6NqMA

Length: 20min 49sec (1249 seconds)

Published: Tue Dec 22 2020