자세한 코드를 보려면 버튼을 클릭하세요
버튼을 클릭하세요채팅방 연결에도 http가 필요한 이유
•
채팅은 실시간으로 이뤄지기 때문에 WebSocket만 이용하면 될 것이라 생각하였지만,
•
실제로는 채팅방에 참여하고 있는 상대의 정보, 어떤 상품에 대한 채팅방인지, 기존에 오고갔던 메시지 내용 등 실시간성이 필요 없는 데이터도 많이 있습니다.
•
이러한 정적인 정보를 표현해주기 위해 http 연결을 해주어야 합니다.
•
필요한 정적인 정보는 아래와 같습니다.
◦
채팅 상대방 정보 (상대방 아이디, 매너온도)
◦
거래 상품에 대한 정보 (상품명, 상품 이미지, 상품 가격, 거래 상태)
◦
기존에 오고갔던 대화 내용
chat.html → urls.py
•
채팅방 목록 중 특정 채팅방을 클릭하면 아래와 같이 selected_chatroom 경로로 이동하도록 설정해놓았습니다.
•
채팅 목록에서 채팅방 각각의 컨테이너는 div 태그로 되어 있는데, 아래와 같이 작성하여 a 태그처럼 새로운 주소로 이동시킬 수 있습니다.
<div
class="flex-box chat-box between"
style="cursor: pointer;"
onclick='location.href="{% url 'dangun_app:selected_chatroom' chatroom.chatroom.id%}";'>
Python
복사
•
selected_chatroom의 경로는 아래와 같이 chatroom_id가 포함된 주소로 설정하였습니다.
path('chat/<int:chatroom_id>/', views.chatroom, name='selected_chatroom'),
Python
복사
채팅방에 참여하지 않은 다른 사용자가 주소를 통해 채팅방에 접근할 수 있는 문제가 발생할 수 있습니다. 이 문제는 테스트 및 보완이 필요할 것으로 보입니다.
views.py
•
채팅방 상세 내용을 불러오는 메서드는 chatroom 함수입니다.
•
chatroom 함수는 아래 순서로 실행됩니다.
1.
채팅 목록을 불러옵니다.
@login_required
def chatroom(request, chatroom_id):
user = request.user
# 참여하고 있는 채팅방 목록 및 관련 정보 불러오기
chatrooms_context = get_chatrooms_context(user)
Python
복사
2.
클라이언트에서 선택한 채팅방에 대한 정보를 불러온다.
# 클릭한 채팅방 및 채팅 상대방에 대한 정보
selected_chatroom = ChatRoom.objects.get(id=chatroom_id)
if selected_chatroom.chat_host == user.id:
chat_partner = CustomUser.objects.get(id=selected_chatroom.chat_guest)
# 채팅 상대 정보
chatroom = ChatRoom.objects.get(id=chatroom_id)
if chatroom.chat_host == user.id:
chat_partner = CustomUser.objects.get(id=chatroom.chat_host)
else:
chat_partner = CustomUser.objects.get(id=selected_chatroom.chat_host)
# 어떤 상품에 대한 채팅방인지
product = PostProduct.objects.get(id=selected_chatroom.product_id)
# 주고받은 채팅(메시지) 기록
messages = Message.objects.filter(chatroom=chatroom_id).order_by('sent_at')
# WebSocket 연결을 위한 주소
ws_path = f"/ws/chat/{selected_chatroom.id}"
Python
복사
3.
불러온 정보를 context로 취합하여 템플릿(dangun_app/chat.html)로 넘겨준다.
# 템플릿에 전달할 데이터 정의
context = {
'chatrooms' : chatrooms_context,
"selected_chatroom" : selected_chatroom,
"product" : product,
"chat_partner" : chat_partner,
"messages" : messages,
"ws_path" : ws_path,
}
return render(request, "dangun_app/chat.html", context)
Python
복사
chat.html
•
views.py에서 넘겨 받은 context에서 필요한 데이터를 사용하여 html에 표현해줍니다.
채팅방의 상대에 대한 정보, 물품에 대한 정보
이미 오고갔던 채팅 메시지
