Django Channels로 실시간 알람 기능 만들기 (1)

배경

실시간 아동학대 알림 웹 서비스에서 가장 중요한 부분인 실시간 알림 기능을 구현해야합니다

 

우선 예상 시나리오를 보면

• 폭력행위 발생 -> DB에 해당 내용 저장 -> 해당 DB 내용을 클라이언트에게 전송

 

DB에 내용이 저장되면 해당 데이터를 바로 프론트로 날려줘야하는 실시간 기능이 필요했습니다

이를 위해 Websocket을 사용하기로 했습니다!

---

🤷 왜 Websocket?

클라이언트가 DB에 내용이 저장되었다는 것을 알려면 클라이언트와 서버가 양방향 통신을 해야하는건 알겠는데 왜 하필 웹소켓을 사용했을까요? 

 

양방향 통신에는 총 2가지가 있습니다.

 

1. polling

• 양방향 통신 중 하나로 n초마다 request를 날려서 response를 전달 받는 방식입니다.
• 이 방식은 n이 작아질 수록 서버의 부담이 증가하게 됩니다.
• 서버의 부담을 줄이기 위해 n을 늘리면 실시간성이 떨어지게 됩니다.

 

사실상 polling은 ✌️실시간✌️ 은 아니라는 뜻입니다

요청/응답을 빠르게해서 실시간처럼 보이는 방법입니다

 

 

2. websocket

polling보다 효율적인 방법을 찾게 되었고 실시간 통신이 가능한 웹소켓 방식을 사용하기로 했습니다!

웹소켓은 핸드쉐이크 방식으로 처음 연결을 한 뒤  데이터를 주고 받을 수 있습니다

 

Django에서는 Websocket을 사용하기 위한 Channels 라이브러리가 있습니다.

https://channels.readthedocs.io/en/stable/

Django Channels — Channels 3.0.5 documentation

---

🏃‍ 이제 구현해보자

개발환경 구성

• ubuntu
• docker
• redis
• channels
• channels-redis

 

이 프로젝트는 Djago와 Vue.js를 사용하고 있습니다.

 

channels 설치

pip install channels
pip install channels-redis

 

docker image로 redis 서버 띄우기

channel layer의 backing store로 redis가 필요합니다.

도커 이미지를 이용해서 redis 서버를 띄우고 django에서 연결합니다.

 

docker pull redis:alpine
docker network create redis-net
docker run --name djangoredisserver -p 6379:6379 --network redis-net -d redis:alpine redis-server --appendonly yes
docker run -it --network redis-net --rm redis:alpine redis-cli -h djangoredisserver

 

redis 도커 이미지를 pull 받아줍니다.

포트번호 6379번에 redis 네트워크를 연결해줍니다.

 

settings.py 설정

# settings.py

...

ASGI_APPLICATION = 'backend.asgi.application'

CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels_redis.core.RedisChannelLayer',
        'CONFIG': {
            "hosts": [('capstone_redis', 6379)]
        }
    }
}

...

 

 

python manage.py shell 로 shell을 실행 시킨 뒤 아래 명령어를 작성하면 channels와 redis가 제대로 연결되었는지 확인할 수 있다

>>> import channels.layers
>>> channel_layer = channels.layers.get_channel_layer()
>>> from asgiref.sync import async_to_sync
>>> async_to_sync(channel_layer.send)('test_channel', {'type': 'hello'})
>>> async_to_sync(channel_layer.receive)('test_channel')

실행 결과 {'type': 'hello'}가 출력되는 것을 볼 수 있다

 

---

프로젝트 폴더 구조는 이렇습니다

 

backend
...
├── backend               # 환경변수 및 설정
        ├── asgi.py
        ├── routing.py
        ├── settings.py
        ├── urlspy
        └── wsgi.py
..
├── notification          # 알림 관련 app
        ├── consumers.py
        ├── routing.py
        ├── models.py
        ├── serializers.py
        ├── urls.py
        └── views.py
...
├── Dockerfile(FILE)      # 도커 파일
├── manage.py(FILE)       # command line 유틸리티
└── requriements.txt(FILE)# 설치 목록

 

asgi.py

"""
ASGI config for backend project.
It exposes the ASGI callable as a module-level variable named ``application``.
For more information on this file, see
https://docs.djangoproject.com/en/3.1/howto/deployment/asgi/
"""

import os
import django
from .wsgi import *
from channels.auth import AuthMiddlewareStack
from channels.http import AsgiHandler
from channels.routing import ProtocolTypeRouter, URLRouter

import notification.routing

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'backend.settings')
django.setup()

application = ProtocolTypeRouter({
    "http": AsgiHandler(),
    "websocket": AuthMiddlewareStack(
        URLRouter(
            notification.routing.websocket_urlpatterns
        )
    ),
})

 

• 서버로 연결이 생성되면 먼저 ProtocolTypeRouter가 연결의 종류를 탐색합니다
• http 연결일 경우 AsginHandler() 가 실행되고
• websocket 연결(ws:// 혹은 wss://)일 경우 AuthMiddlewareStack으로 routing.py에 적어놓은 코드로 라우팅합니다

 

routing.py

settings.py와 같은 폴더 내에 있는 routing.py 입니다

from channels.routing import ProtocolTypeRouter, URLRouter
import notification.routing

application = ProtocolTypeRouter({
    # (http->django views is added by default)
    'websocket': URLRouter(
        notification.routing.websocket_urlpatterns
    )
})

 

웹소켓이 연결되면 라우팅할 notification.routing을 적어주었습니다

 

 

routing.py

app 폴더 내의 routing.py 입니다

from django.urls import re_path
from django.conf.urls import url

from . import consumers

websocket_urlpatterns = [
    re_path(r'ws/notification/(?P<center_name>\w+)/$', consumers.NotificationConsumer.as_asgi()),
]

 

TypeError: __call__() missing 1 required positional argument: 'send'

 

위 에러가 뜨는 경우에는 routing.py에 .as_asgi() 를 써주세요!

참고 https://github.com/django/channels/discussions/1736

 

그리고 코드가 변경될 때마다 python manage.py runserver를 해주셔야 코드가 반영이 됩니다!!!!!

이걸 까먹어서 고치고 나서도 계속 에러가 발생했던 .. 

 

consumers.py

from channels.generic.websocket import WebsocketConsumer
from channels.db import database_sync_to_async
from channels.layers import get_channel_layer
import json
from asgiref.sync import async_to_sync

from django.db.models.signals import post_save
from django.dispatch import receiver

from .models import Notification
from .serializers import NotificationSerializer

def get_notification():
    notifications = Notification.objects.all()
    serializer = NotificationSerializer(notifications, many=True)
    return serializer.data


class NotificationConsumer(WebsocketConsumer):
    def connect(self):
        self.center_name = self.scope['url_route']['kwargs']['center_name'] # notification/routing.py에 있는 center_name 
        
        async_to_sync(self.channel_layer.group_add)( # group 참여
            self.group_name,
            self.channel_name
        )
        self.accept() # websocket 연결 

        # notification이 있으면 알람 전송
        notifications = get_notification()
        if notifications:
            async_to_sync(self.channel_layer.group_send)(
                "center_name", {
                    "type": "notify",
                    "data": notifications
                }
            )


    def disconnect(self, close_code):
        # Leave group
        async_to_sync(self.channel_layer.group_discard)(
            self.group_name,
            self.channel_name
        )

    def notify(self, event):
        # Send message to WebSocket
        self.send(text_data=json.dumps(event))

 

• connect
  • group.add 로 group에 참여합니다
  • self.accept()로 websocket을 연결합니다
  • get_notification으로 notification의 모든 데이터를 가져옵니다
  • notification이 있는 경우, group_send로 해당 데이터들을 전송합니다

 

• disconnect
  • 연결을 끊을 때에는 group.discard로 해당 group과 연결을 끊습니다

 

---

websocket 연결하기

 

웹소켓 커넥션을 만들려면 new WebSocket 을 호출하면 됩니다

• const socket = new WebSocket(url)
• 이 때 url 에는 특수 프로토콜인 ws을 사용해야합니다.
• new WebSocket(url)을 호출해 소켓을 생성하면 즉시 연결이 시작됩니다.

 

소켓이 정상적으로 만들어지면 아래 네 개의 이벤트를 사용할 수 있게 됩니다.

• open – 커넥션이 제대로 만들어졌을 때 발생함
• message – 데이터를 수신하였을 때 발생함
• error – 에러가 생겼을 때 발생함
• close – 커넥션이 종료되었을 때 발생

 

<script>
const socket = new WebSocket(
  'ws://'
  + '127.0.0.1:8000'
  + '/ws/notification/'
  + 'center_name'
  + '/'
);

export default {
  name: "DashBoardAlarmCard",
  props: {
    alarmList: Array
  },
  methods: {
    createWebSocket () {
      socket.onopen = function(e) {
        console.log('서버와 연결되었습니다.')
      };
    },
  },
  created () {
    this.createWebSocket()
  }
}
</script>

DOM이 생성될 때(created) websocket에 연결되도록 구현하였습니다.

• url에는 백엔드 routing.py에서 설정해놓은 주소로 해주면 됩니다.

 

websocket 연결 성공!

 

연결 성공 후 콘솔