바뀜

2,202 바이트 추가됨 ,  2022년 10월 24일 (월) 18:58
편집 요약 없음
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>
 +
|}
 
[[분류:장고 기능구현(중급)]]
 
[[분류:장고 기능구현(중급)]]