Giter Site home page Giter Site logo

alexmhack / django_channels Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 1.58 MB

using django and web sockets to create a simple yet elegant project

Python 0.33% CSS 24.09% HTML 0.19% JavaScript 75.38%
django channels python3 tutorial beginner-friendly beginners-tutorial-series

django_channels's Introduction

django_channels

using django and web sockets to create a simple yet elegant project

Objective

  1. Create django project with support for web sockets using django channels
  2. Setup a connection between django and redis server
  3. Django app with basic user authentication
  4. Using django signals send a message whenever a user logins

Initial setup

  1. Create virtualenv using any package, I will be using virtualenvwrapper

    > mkvirtualenv channels
    > workon channels
    (channels)> deactivate
    > 
    
  2. Installing django, channels, asgi redis

    (channels)> pip install django channels asgi_redis
    
  3. Starting project

    (channels)> django-admin startproject channel_dj .
    (channels)> python manage.py runserver
    
  4. Creating app

    (channels)> python manage.py startapp display
    
  5. Running migrations

    (channels)> python manage.py migrate
    (channels)> python manage.py runserver
    

Errors

On installing channels package from pip I got an error saying

building 'twisted.test.raiser' extension
    error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build 
    Tools": https://visualstudio.microsoft.com/downloads/

I solved this problem by installing channels outside of my virtualenv.

Project

Add channels and our display app in the project settings

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

Configure the CHANNEL_LAYERS by setting a default backend and routing

Running the ubuntu app on windows 10 install the app from windows store and run the command

cmd

C:/users/--/--> ubuntu1804 

Start redis server

Install redis using

tar xvzf redis-stable.tar.gz

Ubuntu1804 on windows 10

$ sudo apt-get install redis-server
$ redis-server

If the redis-server command shows error saying port already in use you can run,

Ubuntu1804

$ redis-cli shutdown
$ redis-server

Creating Consumers

Create a file named consumers.py in the display app which will handle the basic connection between the client and server

from channels import Group

def ws_connect(message):
	Group('users').add(message.reply_channel)

Any user connecting to our app will be added to the users group and will receive message sent by the server.

def ws_disconnect(message):
	Group('users').discard(message.reply_channel)

Any users if disconnects from the app will be removed from the users group and the user will stop receiving messages.

Creating Routes

We will setup routes the same way django uses urls by creating a new file in main project folder named routes.py

channel_dj/routes.py

from channels.routing import route
from display.consumers import ws_connect, ws_disconnect


channel_routing = [
	route('websocket.connect', ws_connect),
	route('websocket.disconnect', ws_disconnect)
]

We have defined channel_routing instead of url_patterns and route() instead of path() and we have connected our consumer functions to websockets.

In our user_list.html template we have a block tag for our javascript code which simply uses the WebSocket instance and prints a message whenever a new socket connection is opened.

templates/display/user_list.html

<script type="text/javascript">
	var socket = new Websocket('ws://' + window.location.host + '/users/');
	socket.onopen = function open() {
		console.log("WEBSOCKET CONNECTION CREATED");
	}

	if (socket.readyState == WebSocket.OPEN) {
		socket.onopen();
	}
</script>

on socket open we call a function which prints a message.

Views & Urls

In this section we setup a django views to render our template using our display app views

display/views.py

from django.shortcuts import render


def user_list(request):
	return render(request, 'display/user_list.html')

display/urls.py

from django.urls import path

from .views import user_list

urlpatterns = [
	path('', user_list, name='user-list'),
]

Now add url for display app in main project urls

channels_jd/urls.py

from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('display.urls', namespace='display')),
]

Namespace avoid same name collisions when your project has a lot of apps with a lot of views

Changes in channels version 2

Settings are still similar to before, but there is no longer a ROUTING key (the base routing is instead defined with ASGI_APPLICATION):

project/settings.py

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels_redis.core.RedisChannelLayer",
        "CONFIG": {
            "hosts": [("redis-server-name", 6379)],
        },
    },
}

Function based views no longer exists and you have to use the class based views Refer to the docs or the use the channels official [tutorial](https://channels.readthedocs.io /en/latest/tutorial/part_1.html)

django_channels's People

Contributors

alexmhack avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.