편집
1,419
번
바뀜
둘러보기로 가기
검색하러 가기
1번째 줄:
1번째 줄: − + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
편집 요약 없음
== 개요 ==
== 개요 ==
웹소켓의 역사적 맥락은 다름 글을 참고하자. [https://medium.com/@chullino/http%EC%97%90%EC%84%9C%EB%B6%80%ED%84%B0-websocket%EA%B9%8C%EC%A7%80-94df91988788 HTTP에서부터 WEBSOCKET까지]
웹소켓의 역사적 맥락은 다음 글을 참고하자. [https://medium.com/@chullino/http%EC%97%90%EC%84%9C%EB%B6%80%ED%84%B0-websocket%EA%B9%8C%EC%A7%80-94df91988788 HTTP에서부터 WEBSOCKET까지]
= 작동방식 =
=== 처음 접속 ===
{| class="wikitable"
!과정
!설명
!비고
|-
|웹소켓 생성
|자바스크립트에서 웹소켓을 생성한다.
|<code>const ws = new WebSocket(SOCKET_HOST + `/ws/users/`);</code>
|-
|신호 전달
|<code>/ws</code>로 시작하는 요청은 asgi > routing을 거쳐 컨슈머의 connect()에 전달된다.
|
|-
|컨슈머
connect()
|인증과정을 거쳐 해당 유저를 적절한 그룹, 레이어에 속하게 한다.
|
|}
=== 메시지 전달 ===
{| class="wikitable"
!과정
!설명
!비고
|-
|컨슈머
receive()
|자바스크립트에서 웹소켓을 통해 전동한 메시지를 받는다.
|<syntaxhighlight lang="python">
async def receive(self, text_data):
text_data_json = json.loads(text_data) # 받은 객체를 변환해야 한다.
message = text_data_json['message']
</syntaxhighlight>
|-
|장고에서 프론트로 전송
|
|<syntaxhighlight lang="python">
# 현재 소켓으로 접속한 유저에게 전송
await self.send(text_data=json.dumps({
'message': message,
}))
# 현재 소켓으로 접속한 유저와 그가 속한 층에 전송
await self.channel_layer.group_send(
self.room_group_name,
{
'type': 'chat_message',
'message': message,
}
)
</syntaxhighlight>
|}
=== 웹소켓 종료 ===
{| class="wikitable"
!과정
!설명
!비고
|-
|컨슈머
disconnect()
|웹소켓 종료 신호를 받으면 응답받는 메소드.
자바스크립트에서 웹소켓 종료신호를 받았을 때 어떻게 할지 편집이 가능하다.<syntaxhighlight lang="javascript+django">
ws.onclose = function (e) {
console.log(e)
notification.open({
message: "채팅이 종료되었습니다.",
description: "새로운 채팅을 시작하세요",
icon: <CloseCircleOutlined style={{ color: "red" }} />,
});
};
</syntaxhighlight>
|django에서 프론트쪽으로 종료신호를 보내고 싶다면 <code>self.close()</code> 메소드
속한 그룹 모두를 종료시키고 싶다면 아래처럼.<syntaxhighlight lang="python">
await self.channel_layer.group_send(
GROUP_NAME,
{
'type': 'websocket.close',
}
)
</syntaxhighlight>
|}
[[분류:장고 기능구현(중급)]]
[[분류:장고 기능구현(중급)]]