Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
For Django web application developers, creating the frontend to handle websockets and respond to changes is often the most troublesome part. In this video, we’ll walk you through a simple setup that will work with websockets and update your dashboard.
You can read the Channels documentation. If you'd like a Git repository for the project, here you go!
We now have channels sending updates from
our server to our client over WebSockets.
0:00
We need to set up our client's
front end to receive these events.
0:04
So be warned, this video has a lot of
HTML, and even some JavaScript in it.
0:07
Now I said we were going to
be working on the front end,
0:12
the client side with this video.
0:13
And we are, but
we need to make a couple of small back
0:15
end editions to give the front
end somewhere to live.
0:18
We'll start by adding a new
route to our urls.py.
0:21
So I'm gonna add from votes.views,
0:26
import DashboardView
which doesn't exist yet.
0:30
We'll have to make that in a second.
0:36
And a lot of new URL here
which is dashboard and
0:39
we'll go to DashboardView.as_View
name=dashboard.
0:45
All right, and now we need to edit
the views.py here in the votes app,
0:54
which is completely empty.
0:59
Let's clear that out
from django.views.generic
1:03
import TemplateView and
from .models import Voter.
1:09
And this will make class DashboardView
which is a TemplateView.
1:14
The template_name will be
votes/dashboard.html and
1:21
in the get_context_data we'll say that
1:28
context_data = super.get_context_data
1:33
with whatever the kwargs are.
1:39
And then we'll say context_data'voters'
= Voter.objects.all.
1:43
And we'll return the context data.
1:52
Now the dashboard view doesn't do much
because well, it doesn't need to.
1:57
It's mostly just fetching the voters so
we'll have some nice labels or
2:01
our dashboard.
2:03
Now speaking of that dashboard in our
votes app we need to add a new directory,
2:05
named templates.
2:11
And then inside of templates we need to
add another new directory named votes.
2:14
And inside of there you
all know this drill.
2:19
We need to add a new file which
we're gonna called dashboard.html.
2:23
And I already have some code generated for
that.
2:30
So let me copy and paste this in.
2:33
And then we'll talk about what's there.
2:35
For the most part it's fairly simple.
2:36
And it's just some HTML
to show the dashboard.
2:40
Couple of things to note about this
though, we're using tables the way that
2:45
they are intended for actual tabular
data instead of the layout of a page.
2:48
And two, we have these spans that
are down here and we're creating these so
2:55
that our JavaScript has like a handle
to grab onto to the update values.
3:00
And we're prefacing them with this js-, so
3:04
that we know, by looking at it,
that this is for JavaScript not for CSS.
3:08
This is a somewhat common
practice nowadays for prefix and
3:11
class names based on what they're doing.
3:16
Okay, so if we make sure that our server
is running, and we come over here to
3:19
the dashboard page, we should see
a pretty basic dashboard here.
3:26
Now it doesn't look great, all right.
3:32
It's not super pretty.
3:35
We can make it look better and we can also
bring in a library that we're gonna need
3:36
with the jQuery library
by bringing in bootstrap.
3:41
Now bootstrap as you're probably
aware is a collection of CSS and
3:44
JavaScript that lets you add a bit
of polish and interactivity or
3:47
just a clean default look to your website.
3:51
And it's often a really
good starting place
3:53
if you're not sure how to
make your site look great.
3:56
Your site will look okay using dashboard.
3:59
A benefit is that it depends on jQuery,
which is a good fit for our needs.
4:02
Now you could of course use a more
specific JavaScript library if you wanted
4:06
to, but jQuery's plenty for
this workshop and it's, you know,
4:10
what I often reach for.
4:13
So let's bring in the bootstrap CSS,
4:14
which this goes right here in the head.
4:19
And then let's bring in the bootstrap
JavaScript and jQuery itself.
4:27
Now we don't necessarily need
the bootstrap JavaScript,
4:32
simply because I'm not gonna be
doing any bootstrappy JavaScript.
4:39
But it never hurts to
have things available,
4:43
just in case you need them later on.
4:46
So I'm gonna save both of those and all of
this is going to be in the repo of course,
4:50
so you can check it out from the repo.
4:54
And we've added this
class="table" to the table so
4:58
that bootstrap applies some nice styling,
and let's refresh and see how this looks.
5:01
Yeah, that's a lot better.
5:06
That looks a lot nicer.
5:07
We can see who's doing want
everything's lined up pretty nicely.
5:08
Okay, so now let's add in some JavaScript
to handle all the WebSocket stuff.
5:13
So down here, below all of the other
script tags, I'm gonna add a new script
5:20
tag and on document.ready,
5:26
we're going to run a function.
5:32
So first off we're gonna
make a socket which is
5:35
a new WebSocket and
it's gonna go to WS:// and
5:40
it will bring in window.location.host.
5:45
So that way it will work regardless
of what our host name is and
5:49
then we'll do socket.onmessage.
5:54
We're gonna run a function,
which takes an event.
5:59
Or rather some data like a message.
6:02
We'll say var data = JSON.parse(e.data).
6:06
And then for (var voter in data).
6:13
And for (var category in data voter).
6:18
And now we're gonna bring
in our bet of jQuery.
6:26
So we'll do (*.js- " +_voter + "- "
6:29
+_category + "-yes", and
6:36
that text is gonna be updated to
6:42
(data[voter][category]["yes"].
6:47
So whatever the value is that's in there.
6:55
And let's just copy that and
let's change this yes to a no.
6:58
And this yes to a no.
7:04
All right, so those two lines are exactly
the same with the exception of yes and no.
7:07
So let's go over this just for a second.
7:11
So we're waiting here until the page
is ready to be acted on and
7:14
then we're creating this
websocket connection.
7:18
Now when that WebSocket connection
receives data which is on this on message.
7:21
We go through the JSON dictionary
that we send over a websockets and
7:26
we update the table cells
with the right values.
7:29
Our dashboard should now be ready.
7:31
So I'm gonna reconnect here,
7:34
I'm gonna refresh this just to
make sure the WebSockets are done.
7:36
And I'm gonna open up the admin over here,
and I'm gonna go change this housing vote.
7:40
So let's save it like it is right now,
so I'm gonna choose save and
7:45
continue editing.
7:49
And we see this page immediately update,
these all got yeses.
7:50
And we've got a no there,
and that stuff there.
7:54
So let's say that on this vote,
let's say only Chairperson Tompkins and
7:56
Bello voted yes.
8:01
And that Adamson and Perez both voted no.
8:03
So I'm gonna save and update these again.
8:06
And we should see these housing
values right here change.
8:08
And they did immediately,
I didn't have to do anything,
8:10
that's just, it's real time,
it's amazing that, that works.
8:15
So congratulations, we've built a real
time WebSockets Power Data dashboard
8:19
powered Channels and Django.
8:24
All that's left is getting it deployed and
we'll touch on that in the next video.
8:26
You need to sign up for Treehouse in order to download course files.
Sign up