Real-time web with Django channels

PythonPH Meetup

June 23, 2016

Mark Steve Samson

real-time web

The real-time web is a network web using technologies and practices that enable users to receive information as soon as it is published by its authors, rather than requiring that they or their software check a source periodically for updates.

From (you guessed right) Wikipedia

real-time web

The real-time web is a network web using technologies and practices that enable users to receive information as soon as it is published by its authors, rather than requiring that they or their software check a source periodically for updates.

From (you guessed right) Wikipedia

real-time web

Examples of real-time web are Facebook's newsfeed, and Twitter, implemented in social networking, search, and news sites. Benefits are said to include increased user engagement ("flow") and decreased server loads.

From (you guessed right) Wikipedia

real-time web

Examples of real-time web are Facebook's newsfeed, and Twitter, implemented in social networking, search, and news sites. Benefits are said to include increased user engagement ("flow") and decreased server loads.

From (you guessed right) Wikipedia

channels

Developer-friendly asynchrony for Django

channels

Channels is a project to make Django able to handle more than just plain HTTP requests, including WebSockets and HTTP2, as well as the ability to run code after a response has been sent for things like thumbnailing or background calculation.

Concepts
Channel

Concepts
Consumer

Concepts
GROUP

Layers
Interface Server

Layers
Worker Server

Layers
Channel Backend

#THROWBACKTHURSDAY

Raise your ✋ if you know what a SHOUTBOX is

Let's make one USING CHANNELS!

Install channels

INSTALLED_APPS = [
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'channels',
]

+CHANNEL_LAYERS = {
+    'default': {
+        'BACKEND': 'asgiref.inmemory.ChannelLayer',
+        'ROUTING': 'app.routing.channel_routing',
+    },
+}

channels_shoutbox/settings.py

+from app.consumers import ShoutboxConsumer
+from channels.routing import route_class
+
+channel_routing = [
+    route_class(ShoutboxConsumer, path=r"^/shoutbox"),
+]
+

app/routing.py

+from channels.generic.websockets import JsonWebsocketConsumer
+
+
+class ShoutboxConsumer(JsonWebsocketConsumer):
+    pass

app/consumers.py

Old-School Django

+class Message(models.Model):
+    name = models.CharField(max_length=255)
+    text = models.TextField(blank=True)
+    sent_at = models.DateTimeField(auto_now_add=True)

app/models.py

+from app.models import Message
 from django.shortcuts import render
 
 
 def index(request):
-    return render(request, 'index.html')
+    messages = Message.objects.order_by('-sent_at').all()
+    return render(request, 'index.html', {'messages': messages})

app/views.py

Consumer

+from app.models import Message
 from channels.generic.websockets import JsonWebsocketConsumer
+from django.template.defaultfilters import date
 
 
 class ShoutboxConsumer(JsonWebsocketConsumer):
-    pass
+
+    def connection_groups(self):
+        return ['all']
+
+    def receive(self, content):
+        message = Message.objects.create(**content)
+        content.update(sent_at=date(message.sent_at, 'r'))
+        self.group_send('all', content)

app/consumers.py

Javascript

+var ws = new WebSocket('ws://' + location.host + '/shoutbox')
+var messages = $('.messages')
+var form = $('form')
+
+function sendMessage(e) {
+  e.preventDefault()
+  var name = form.name.value
+  if (!name) {
+    return
+  }
+  var text = form.text.value
+  ws.send(JSON.stringify({
+    name: name,
+    text: text,
+  }))
+  form.text.value = null
+}
+
+function recvMessage(e) {
+  var data = JSON.parse(e.data)
+  // Render message in DOM
+}
+
+form._.events({submit: sendMessage})
+ws.onmessage = recvMessage

app/static/app.js

http://channels-shoutbox.herokuapp.com/

Demo

https://github.com/marksteve/channels-shoutbox

Source

Questions?

For announcements join our Facebook group:

https://www.facebook.com/groups/pythonph/

For meetup news join our Meetup page:
https://www.meetup.com/pythonph/