Colin's Blog
[파이썬] Django를 이용한 웹소켓 통신

소개

이번 포스트에서는 Django 프레임워크를 사용하여 웹소켓 통신을 구현하는 방법을 알아보겠습니다. 웹소켓은 실시간 통신을 위해 설계된 프로토콜로, 클라이언트와 서버 간 양방향 통신이 가능합니다.

Django Channels 소개

Django Channels는 Django 프레임워크의 확장 기능으로, 웹소켓 통신을 지원하며 비동기 작업을 처리할 수 있도록 해줍니다. 이를 통해 Django 애플리케이션에서 실시간 데이터를 전송하고 처리할 수 있습니다.

Django Channels의 설치는 다음과 같이 pip를 이용하여 진행할 수 있습니다:

pip install channels

웹소켓 통신 구현하기

먼저, Django Channels를 사용하려면 Django 프로젝트 설정에 Channels 관련 설정을 추가해주어야 합니다. settings.py 파일에 다음과 같이 추가해주세요:

# settings.py

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

CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels.layers.InMemoryChannelLayer',
    },
}

이제 웹소켓 통신을 구현할 애플리케이션을 생성해보겠습니다. 다음 명령어를 통해 애플리케이션을 생성합니다:

python manage.py startapp chat

chat이라는 이름의 애플리케이션이 생성되었으면, 해당 애플리케이션의 디렉토리로 이동하여 consumers.py 파일을 생성합니다. 그리고 다음과 같이 코드를 작성합니다:

# chat/consumers.py

import json
from channels.generic.websocket import WebsocketConsumer

class ChatConsumer(WebsocketConsumer):
    def connect(self):
        self.accept()

    def disconnect(self, close_code):
        pass

    def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']

        self.send(text_data=json.dumps({
            'message': message
        }))

위 코드는 웹소켓 연결을 받는 ChatConsumer 클래스를 정의한 것입니다. connect 메서드는 웹소켓 연결을 수락하고, disconnect 메서드는 연결이 종료될 때 호출됩니다. receive 메서드는 클라이언트로부터 메시지를 받았을 때 호출되며, 해당 메시지를 다시 클라이언트로 보냅니다.

이제 위 consumers.py 파일을 참조하도록 라우팅을 설정해야 합니다. 애플리케이션의 디렉토리에 routing.py 파일을 생성하고 다음과 같이 코드를 작성합니다:

# chat/routing.py

from django.urls import re_path

from . import consumers

websocket_urlpatterns = [
    re_path(r'ws/chat/(?P<room_name>\w+)/$', consumers.ChatConsumer.as_asgi()),
]

이제 프로젝트의 최상위 URL 설정(urls.py)에 다음 코드를 추가하여 웹소켓 라우팅을 설정합니다:

# urls.py

from django.urls import path
from django.urls import include
from chat import routing

urlpatterns = [
    # ...
    path('chat/', include(routing.websocket_urlpatterns)),
    # ...
]

클라이언트 측 코드

이제 웹소켓 통신을 사용하기 위한 클라이언트 측 코드를 작성해보겠습니다. JavaScript를 사용하여 웹소켓을 생성하고 메시지를 주고받는 코드입니다. 다음과 같이 작성합니다:

// chat.js

const chatSocket = new WebSocket(
    'ws://localhost:8000/chat/{room_name}/'
);

chatSocket.onmessage = function(e) {
    const data = JSON.parse(e.data);
    console.log(data.message);
};

chatSocket.onclose = function(e) {
    console.error('Chat socket closed unexpectedly');
};

// 메시지 전송 예제
const messageInput = document.querySelector('#message-input');
const messageForm = document.querySelector('#message-form');

messageForm.addEventListener('submit', function(e) {
    e.preventDefault();
    const message = messageInput.value;
    chatSocket.send(JSON.stringify({
        'message': message
    }));
    messageInput.value = '';
});

위 코드는 웹소켓 연결을 생성하고 메시지를 주고받는 코드입니다. onmessage 이벤트 핸들러를 통해 받은 메시지를 콘솔에 출력하고, 메시지 전송은 messageForm 폼이 서밋되었을 때 발생하는 submit 이벤트 핸들러 내에서 처리합니다.

마치며

이번 포스트에서는 Django 프레임워크를 사용하여 웹소켓 통신을 구현하는 방법을 알아보았습니다. Django Channels를 이용하면 Django 애플리케이션에서 웹소켓을 쉽게 구현할 수 있습니다. 웹소켓은 실시간 통신이 필요한 애플리케이션 개발에 유용하게 활용될 수 있습니다. Django Channels를 통해 웹소켓을 구현해보세요!

© 2018 Colin. All rights reserved.