Django에서 WebSocket Consumer 구현 및 DRF와 연결

1. WebSocket Consumer란?

WebSocket 요청을 처리하려면 Consumer를 구현해야 합니다. Django의 views.py에서 HTTP 요청을 처리하는 것처럼, WebSocket 요청은 consumers.py에서 처리됩니다.

Consumer의 역할

• 클라이언트(WebSocket)와 서버 간의 연결/해제 관리
• 클라이언트가 보낸 메시지를 받아 처리하고, 필요한 응답을 보냄
• 여러 개의 클라이언트와 데이터를 주고받을 수 있도록 비동기 지원

2. Django Channels에서 Consumer 생성

이제 Django에서 WebSocket을 처리하는 Consumer를 만들어 볼 것입니다.

2.1. consumers.py 파일 생성

chat 앱 내부에 consumers.py 파일을 만듭니다.

# chat/consumers.py

import json
from channels.generic.websocket import AsyncWebsocketConsumer

class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        await self.accept()
        await self.send(text_data=json.dumps({
            'message': 'WebSocket 연결 성공'
        }))

    async def disconnect(self, close_code):
        print("WebSocket 연결 종료")

    async def receive(self, text_data):
        data = json.loads(text_data)
        message = data['message']
        
        # 메시지 응답 처리
        await self.send(text_data=json.dumps({
            'message': message
        }))

이 코드의 역할

• connect(): 클라이언트가 WebSocket에 연결되었을 때 실행됨
• disconnect(): 연결이 종료될 때 실행됨
• receive(): 클라이언트가 메시지를 보냈을 때 실행됨

이제 클라이언트가 연결되면 연결 성공 메시지를 보내고, 클라이언트가 메시지를 보내면 그대로 반환하는 간단한 WebSocket Consumer가 완성되었습니다.

3. WebSocket 라우팅 설정

이제 만든 ChatConsumer를 WebSocket 요청과 연결해야 합니다.

3.1. routing.py 파일 수정

# chat/routing.py

from django.urls import re_path
from .consumers import ChatConsumer

websocket_urlpatterns = [
    re_path(r'ws/chat/$', ChatConsumer.as_asgi()),
]

이제 WebSocket 요청이 ws/chat/ 경로로 들어오면 ChatConsumer가 처리합니다.

3.2. asgi.py 파일 수정

이제 asgi.py에서 WebSocket 라우팅을 적용해야 합니다.

# asgi.py

from channels.routing import ProtocolTypeRouter, URLRouter
from chat.routing import websocket_urlpatterns
from channels.auth import AuthMiddlewareStack

application = ProtocolTypeRouter({
    "http": get_asgi_application(),
    "websocket": AuthMiddlewareStack(
        URLRouter(websocket_urlpatterns)
    ),
})

AuthMiddlewareStack을 추가하면 WebSocket에서도 Django 인증 시스템을 사용할 수 있습니다.

4. WebSocket 연결 테스트

이제 WebSocket 서버를 실행하고, WebSocket 연결이 잘 되는지 확인합니다.

4.1. Django 서버 실행

python manage.py runserver

4.2. WebSocket 클라이언트 연결 (JavaScript 활용)

const socket = new WebSocket("ws://localhost:8000/ws/chat/");

socket.onopen = function(event) {
    console.log("WebSocket 연결 성공");
    socket.send(JSON.stringify({"message": "안녕하세요"}));
};

socket.onmessage = function(event) {
    console.log("서버로부터 받은 메시지: ", event.data);
};

socket.onclose = function(event) {
    console.log("WebSocket 연결 종료");
};

웹 브라우저 개발자 도구(F12) → Console 탭에서 WebSocket 통신을 확인할 수 있습니다.

5. 다음 단계

이제 Django에서 WebSocket Consumer를 구현하고, WebSocket 요청을 처리하는 방법을 배웠습니다. 하지만 아직 메시지를 여러 사용자에게 전달하지 못하는 한계가 있습니다.

다음 글: React에서 WebSocket을 활용한 실시간 채팅 UI 구현

• React에서 WebSocket 연결하는 방법
• WebSocket을 활용한 실시간 채팅 UI 구성
• 메시지 상태 관리 및 Redux 연동

정리 Django에서 WebSocket 요청을 처리하는 Consumer 구현 완료
WebSocket 라우팅 설정 및 asgi.py 수정 완료
JavaScript에서 WebSocket 연결 테스트 성공