[django] 본격 장고 웹소켓

이번엔 장고를 활용하여 웹소켓을 설치해보겠습니다.

먼저 터미널에서 가상환경을 활성화 합니다.

source ../myvenv/bin/activate

다음으로 웹소켓에 사용될 redis와 channels를 설치합니다.

*brew없으면 설치

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

1	brew install redis

pip install channels asgi_redis

버전을 지정 안하면 최신버전으로 설치됩니다.

다음은 settings.py에 channels를 추가하고, 설정도 추가해줍니다.

INSTALLED_APPS = [
    ...
    'channels',
    ...
]

CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'asgi_redis.RedisChannelLayer',
        'CONFIG': {
            'hosts': [('localhost', 6379)],
        },
        'ROUTING': 'example_channels.routing.channel_routing',
    }
}

다음으로 routing.py파일도 생성합니다.

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


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

일반적으로 장고는 클라이언트와 서버가 통신할때 HTTP프로토콜을 사용합니다.

이는 보통 클라이언트의 요청이 있어야 응답응답을 하는 형태지만,

웹소켓은 ws:// 프로토콜을 사용하여 양방향으로 동작할 수 있기때문에 별도의 클라이언트의 요청이 없어도 

서버에서 접속한 모든 클라이언트로 푸시가 가능합니다. 

일단 연결을 제어하기위해 웹소켓연결을 소비할때 사용할 consumers.py 파일을 만들어 보겠습니다. 

from channels import Group


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


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

이후 통신할 html파일에 클라이언트 측 js코드를 삽입합니다.

var socket = new WebSocket('ws://' + window.location.host + '/users/');

    socket.onopen = function open() {
      console.log('WebSockets connection created.');
    };

    if (socket.readyState == WebSocket.OPEN) {
      socket.onopen();
    }