Tutorial: Create a real-time web game with Django Channels and React

Jan 20, 2017
Django
dj-react

Would you like to learn how to create a “real-time” game with the Django web framework? Here is my Django Channels tutorial on how to create a two-player game of Obstruction with a React front-end.


TL;DR

If you just want to see the code, Git it here.


Django is great web development framework. It’s far and away my “go-to” when starting a new web project,  but like all frameworks and languages,  it isn’t a fit for all types of apps. For apps that require “real-time” collaboration or interactive single page applications that lean heavily on AJAX or web socket calls, Django can be worked out to handle it with socket.io or even a DDP implementation, but you may regret it as you dig in.

Recently other great frameworks like Meteor and FeathersJS and “real-time” backends like Firebase have come along to make this kind of development easy and enjoyable. In most cases these are stacked by Node + Javascript + Mongo (or other NoSQL db). Many times they are very quick to get started using, but in my experience, become annoying and quirky as the project grows.

Enter Django Channels

Django Channels is a fairly new project by Andrew Godwin that extends Django to make it easy to work with WebSockets in a way that should already be familiar to those that use Django. Recently, Channels has been adopted as an official Django Project, so it’s here to stay and will continue to see love from the Django core team and community going forward.

So, let’s dig into Channels and make a simple game of Obstruction. What is Obstruction? Well it’s a simple two-player pencil-n-paper game where each player takes turns claiming squares on a grid. When there are no available squares left, the last player to make a move wins the game. You can read more about it here, but it’s not critical for this tutorial.

What we’ll use in this tutorial:

  1. Django >= 1.9
  2. React
  3. Node Package Manager (npm)
  4. webpack
  5. Django Channels

This tutorial also assumes that you have experience working with Django, but not so much with React.

Let’s get started…

1 2 3 4 5 6 7 8 9

Comments
  • Thanks for this django/react tutorial. It is awesome helping me get my head around React and putting all the pieces together!!

    johnedstone 08/12/2017 8:05 am Reply
    • Great to hear! I’m glad you found it useful. Thanks for letting me know.

      codyparker 08/12/2017 4:21 pm Reply
  • Thank you so much for writing this tutorial!
    From your description, it seems like moves and player messages should update automatically, however when I run it, they only update after a manual refresh of the page. Am I misunderstanding how the website works?
    Thanks

    Missa 07/26/2017 12:58 pm Reply
    • The log should update when new chat messages are created or moves are made. I would check to make sure the game.send_game_update() method is being called at the appropriate times. Also, check the browser console for any errors on the client-side. That may give you more of a clue to the issue as well.

      codyparker 07/26/2017 1:48 pm Reply
  • Thanks for writing this tutorial! However, some things that may be confusing to a beginner: startapp game is going to create a game/views.py by default, and anyone that forgets to move views.py is going to have a package conflict. Also, from views import * inside __init__.py should be from .views import * just to avoid any namespace mismatches. I recommend you keep the default views.py.

    Daniel 06/11/2017 2:41 pm Reply
    • Thanks for your comments, Daniel. Yes, I thought that splitting the views could be confusing, but it’s something I like to do to organize views of different types. So here, I didn’t want to combine the DRF API views with the “standard” Django views. Also, the tutorial wasn’t exactly intended for beginners, but maybe I can clarify the views split a little more in the post. Also, thanks for catching the import fix. I had already updated the imports in the git project, but missed it in the post.

      codyparker 06/13/2017 10:11 am Reply
  • Hello! Great tutorial! I have a question, I want to use foundation-sites in my project. I am following you tutorial and instead of using bootstrap precompiled css I would like to install foundation with bower maybe? I know how to use the “foundation new” command to create a new project but I would like not to create a new project but integrate foundation sites with mine!

    David Anchorena 06/05/2017 8:45 am Reply
    • Hey David, sorry I haven’t worked with Foundation yet. But it looks like you can just use the CSS itself and avoid the CLI site generation: http://foundation.zurb.com/sites/download/

      You could just include this as you would any other CSS, and my guess is that if you install the full Foundation package with NPM, you could just reference the CSS there as well.

      codyparker 06/06/2017 2:38 pm Reply
  • not sure if it’s a django versioning thing or what, but on page 1 of this tutorial you are no longer allowed to specify views with strings and they must be callable, suggested edit follows:

    original:

    from django.conf.urls import url
    from django.contrib import admin
    from game.views import *

    urlpatterns = [
    url(r’^admin/’, admin.site.urls),
    url(r’^register/’, CreateUserView.as_view()),
    url(r’^login/$’, ‘django.contrib.auth.views.login’, {‘template_name’: ‘login.html’}),
    url(r’^logout/$’, ‘django.contrib.auth.views.logout’, {‘next_page’: ‘/’}),

    url(r’^$’, HomeView.as_view())
    ]

    edit:

    from django.conf.urls import url
    from django.contrib import admin
    from django.contrib.auth.views import login, logout
    from game.views import *

    urlpatterns = [
    url(r’^admin/’, admin.site.urls),
    url(r’^register/’, CreateUserView.as_view()),
    url(r’^login/$’, login, {‘template_name’: ‘login.html’}),
    url(r’^logout/$’, logout, {‘next_page’: ‘/’}),

    url(r’^$’, HomeView.as_view())
    ]

    will 05/23/2017 9:21 am Reply
    • Yep – you’re right, thanks for letting me know! I’ve updated the urls.py code.

      codyparker 05/23/2017 12:30 pm Reply
  • Thank you so much, one of the most complete tutorials I have seen. Not all persons are willing to teach this things together, and the complexity of the scenario gives us good bases. This types of tutorials (even paid) are hard to find. Again, thank you.

    Pepe 05/07/2017 9:14 pm Reply
    • Thank you for the nice comments! I’m glad you found the tutorial helpful.

      codyparker 05/08/2017 8:35 am Reply
  • Can you please show one example on how I can make api post call from react to django drf?

    Is there any reason why all “post” calls are done via sockets not api in this tutorial?

    Said 02/07/2017 3:47 am Reply
    • You can see a few examples of calls from React to the DRF backend in my post. For example, take a look at the getGame() method on the GameBoard.jsx component. That method calls the DRF SingleGameViewSet endpoint to get game details.

      And as I mentioned in the post, I tried to mix up different ways of getting data from the Django backend to the React frontend. I wanted to show different ways of achieving the same thing: sending data through the standard Django response via context, DRF calls to the backend, and Django Channels websocket calls. In reality, this isn’t how I would structure a production app, but I was hoping it would be informative. Hopefully not confusing at the same time.

      codyparker 02/07/2017 2:40 pm Reply
  • Wow! Thanks again for sharing this tutorial. I am amazed by your generosity. The tutorial is intense.

    Let me give some suggesting for how you can improve it. I found that very often the flow of tutorial is going from big concepts (code snippets) to a smaller ones. For example several times you are first putting together some views, react components or api_views and then go to show some serializers, consumers, routers, urls and so on. This can be sometimes confusing, since a student can receive error messages that those small parts are not yet existed. I think going from small concepts to bigger would be more easily to understand. Also, please check your github code. I think it does not work if you just download it and want to use. Several imports are configured improperly (signal in apps.py, for instance)

    Thank you again!

    Said 02/07/2017 3:44 am Reply
    • Thanks for suggestions. Yes this was my first large tutorial so it definitely could be optimized and improved. I did the GitHub project well before the post, but it worked for me when I last tried it. It could be a python2/python3 import issue. I’ll update that tonight and get it working.

      codyparker 02/07/2017 1:16 pm Reply
  • not sure if the instruction on page 8 is correct

    class ClaimSquareView(APIView):

    def get_object(self, pk):
    try:
    return Game.objects.get(pk=pk)
    except Game.DoesNotExist:
    raise Http404

    def put(self, request, pk):
    game = self.get_object(pk)
    # update the owner
    print(game)
    return Response(serializer.errors)

    – no import for Http404
    – serializer is not defined

    Said 02/07/2017 1:36 am Reply
    • You’re right! That view isn’t even needed… I think I started going that direction to claim a square, but moved it to a Channels call using the consumer instead. I’ve removed that reference and the url reference.

      Thank you very much for your suggestions and bug reports! I’ve added you to the “Thank you” section at the bottom of the post.

      codyparker 02/07/2017 3:50 pm Reply
  • on page 7 views.py also should import

    from django.contrib import messages

    Said 02/07/2017 12:31 am Reply
    • Added it, thank you.

      codyparker 02/07/2017 3:51 pm Reply
  • Also, in my setup in view/__init__.py instead of

    from views import *
    from api_views import *

    I need to enter

    from .views import *
    from .api_views import *

    Said 02/06/2017 10:34 pm Reply
    • Yes this is probably because you’re on Python 3 and implicit relative imports like that won’t work. I’m on 2.7 and they work with it. Thanks for pointing that out. I’ll update the post to note this.

      codyparker 02/07/2017 1:12 pm Reply
  • on the page 2, it is very important to highlights this setting in the settings.py

    STATICFILES_DIRS = [
    os.path.join(BASE_DIR, “static”),
    ]

    it is not something that is added by default if start project with django-admin tools

    Said 02/06/2017 9:37 pm Reply
    • Thanks, yes when I first talk about the settings file, I recommended overwriting all of the default code with what I show in the post. I’ll make sure that it’s more clear.

      codyparker 02/07/2017 5:17 pm Reply
  • Thanks, confirm MIDDLEWARE_CLASSES fixed the issue with ‘AsgiRequest’ object has no attribute ‘session’

    Said 02/06/2017 9:23 pm Reply
  • after following all instruction on the page 4, cannot login, getting this error

    AttributeError at /login/
    ‘AsgiRequest’ object has no attribute ‘session’
    Request Method: POST
    Request URL: http://127.0.0.1:8080/login/
    Django Version: 1.9.12
    Exception Type: AttributeError
    Exception Value:
    ‘AsgiRequest’ object has no attribute ‘session’
    Exception Location: /home/gideon/virtualenvs/vEnv_my_obstruct_game/lib/python3.4/site-packages/django/contrib/auth/__init__.py in login, line 101
    Python Executable: /home/gideon/virtualenvs/vEnv_my_obstruct_game/bin/python
    Python Version: 3.4.3
    Python Path:
    [‘/home/gideon/PycharmProjects/my_obstruct_game’,
    ‘/home/gideon/virtualenvs/vEnv_my_obstruct_game/lib/python3.4/site-packages/setuptools-18.1-py3.4.egg’,
    ‘/home/gideon/virtualenvs/vEnv_my_obstruct_game/lib/python3.4/site-packages/pip-7.1.0-py3.4.egg’,
    ‘/home/gideon/PycharmProjects/my_obstruct_game’,
    ‘/usr/lib/python3.4’,
    ‘/usr/lib/python3.4/plat-x86_64-linux-gnu’,
    ‘/usr/lib/python3.4/lib-dynload’,
    ‘/home/gideon/virtualenvs/vEnv_my_obstruct_game/lib/python3.4/site-packages’]
    Server time: Mon, 6 Feb 2017 15:53:42 +0000
    Traceback Switch to copy-and-paste view

    /home/gideon/virtualenvs/vEnv_my_obstruct_game/lib/python3.4/site-packages/django/core/handlers/base.py in get_response
    response = self.process_exception_by_middleware(e, request) …
    ▶ Local vars
    /home/gideon/virtualenvs/vEnv_my_obstruct_game/lib/python3.4/site-packages/channels/handler.py in process_exception_by_middleware
    return super(AsgiHandler, self).process_exception_by_middleware(exception, request)

    Said 02/06/2017 9:55 am Reply
    • One thing that could cause this with Django 1.9+ is if you have MIDDLEWARE instead of MIDDLEWARE_CLASSES in your settings.py file. Can you check that?

      codyparker 02/06/2017 10:28 am Reply
  • It seems there is an error in this instruction

    npm install –save-dev react react-dom webpack webpack-bundle-tracker babel-core babel babel-loadernpm babel-preset-es2015 react-websocket babel-preset-es2015 babel-preset-react jquery

    “babel-loadernpm” should read “babel-loader”

    Said Akhmedbayev 02/05/2017 11:28 pm Reply
    • Yep, you’re right – a little copy-paste issue on my part. It’s fixed now. Thanks for letting me know!

      codyparker 02/06/2017 9:06 am Reply
  • I have not yet finished your tutorial, but for what I see I can tell you huge THANK YOU!

    Said 02/05/2017 10:33 am Reply
    • Thank you, I hope it you find it useful. Please let me know if you have any issues!

      codyparker 02/06/2017 9:07 am Reply

Leave a Comment

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