자세한 코드를 보려면 버튼을 클릭하세요
버튼을 클릭하세요구현할 화면 및 기능
•
채팅룸의 메시지 정보
◦
데이터베이스에 저장된 메시지는 시간 순으로 표시됩니다.
◦
내가 보낸 메시지는 우측으로 띄어집니다.
◦
상대가 보낸 메시지는 좌측으로 띄어집니다.
필요 라이브러리 설치
•
daphne : django용 asgi middleware
•
channel : django에서 채팅 websocket을 구현할 수 있게 해주는 라이브러리
•
channel-redis : redis와 연결해주는 라이브러리
설치 순서 (3, 4는 생략해도 됨)
settings.py
daphne를 사용할 수 있도록 INSTALLED_APPS에 추가 (가장 위쪽에 추가!)
비동기 통신을 위한 ASGI 애플리케이션 지정
실시간 통신을 처리할 레이어 지정
asgi.py
•
이 부분은 아래와 같은 역할을 한다고 합니다. (chatgpt)
import os
from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
from channels.security.websocket import AllowedHostsOriginValidator
from django.core.asgi import get_asgi_application
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "mysite.settings")
# Initialize Django ASGI application early to ensure the AppRegistry
# is populated before importing code that may import ORM models.
django_asgi_app = get_asgi_application()
import carrotapp.routing
application = ProtocolTypeRouter(
{
"http": django_asgi_app,
"websocket": AllowedHostsOriginValidator(
AuthMiddlewareStack(URLRouter(carrotapp.routing.websocket_urlpatterns))
),
}
)
Python
복사
◦
이후 작성할 routing.py를 참조할 수 있도록 정확한 앱 이름(carrotapp)을 입력해주어야 합니다.
routing.py 정의
프로젝트 앱 디렉토리(carrotapp) 아래에 routing.py 파일을 생성하고 webSocket 경로를 정의합니다.
urls.py와 routing.py는 비슷한 것 같지만 아래와 같이 차이가 있습니다.
•
urls.py : 단방향 통신인 HTTP 요청을 처리하기 위한 규칙을 정의합니다.
•
routing.py : WebSocket과 같은 실시간 통신, 비동기 작업을 처리하기 위한 라우팅 규칙을 정의합니다.
consumers.py (websocket의 서버측)
•
앱 레벨 하위에 consumers.py 생성하고 webSocket 서버 단에서 작업해줄 내용을 작성합니다.
•
ChatConsumer 클래스에 아래와 같은 메서드를 작성해주었습니다.
1. connect 메서드 : 웹소켓 연결 요청 처리
2. disconnect 메서드 : 웹소켓 해제 요청 처리
3. receive 메서드 : 클라이언트로부터 메시지를 받을 때 호출
4. chat_message 메서드 : 그룹 내 모든 사용자에게 메시지를 브로드캐스트 합니다.
전체 코드
‘consumer’는 클라이언트와 서버 간의 WebSocket 연결을 통한 실시간 통신을 “소비”한다는 의미라고 합니다.
javascript (websocket의 클라이언트측)
•
chat.html에서 작동하기 위한 스크립트 코드를 작성해주었습니다.
1. websocket 객체 생성
2. websocket 연결, 해제 이벤트 리스너
3. 메시지 ‘전송’ 버튼을 눌렀을 때 이벤트 (메시지 발신)
4. 웹소켓을 통해 새로운 메시지를 받았을 때 이벤트 (메시지 수신)