Pywiki

"분류:장고 웹소켓"의 두 판 사이의 차이

(새 문서: == 개요 == 웹소켓의 역사적 맥락은 다름 글을 참고하자. [https://medium.com/@chullino/http%EC%97%90%EC%84%9C%EB%B6%80%ED%84%B0-websocket%EA%B9%8C%EC%A7%80-94df919887...)
 
 
(같은 사용자의 중간 판 2개는 보이지 않습니다)
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>
 +
|}
 +
 
 +
= 비고 =
 +
{| class="wikitable"
 +
!과정
 +
!설명
 +
!비고
 +
|-
 +
|runserver
 +
|어째서인지 비동기 기능을 사용하면 runserver가 느려진다.
 +
일반적인 개발환경에서 asgi를 계속 사용할 필요는 없으니, 다음의 코드로 실행하는 편이 좋다.
 +
|python manage.py runserver --noasgi
 +
|}
 +
[[분류:장고 기능구현(중급)]]

2023년 10월 4일 (수) 08:46 기준 최신판

1 개요편집

웹소켓의 역사적 맥락은 다음 글을 참고하자. HTTP에서부터 WEBSOCKET까지

2 작동방식편집

2.1 처음 접속편집

과정 설명 비고
웹소켓 생성 자바스크립트에서 웹소켓을 생성한다. const ws = new WebSocket(SOCKET_HOST + `/ws/users/`);
신호 전달 /ws로 시작하는 요청은 asgi > routing을 거쳐 컨슈머의 connect()에 전달된다.
컨슈머

connect()

인증과정을 거쳐 해당 유저를 적절한 그룹, 레이어에 속하게 한다.

2.2 메시지 전달편집

과정 설명 비고
컨슈머

receive()

자바스크립트에서 웹소켓을 통해 전동한 메시지를 받는다. 
async def receive(self, text_data):
  text_data_json = json.loads(text_data)  # 받은 객체를 변환해야 한다.
  message = text_data_json['message']
장고에서 프론트로 전송 
# 현재 소켓으로 접속한 유저에게 전송
await self.send(text_data=json.dumps({
  'message': message,
}))

# 현재 소켓으로 접속한 유저와 그가 속한 층에 전송
await self.channel_layer.group_send(
  self.room_group_name,
  {
    'type': 'chat_message',
    'message': message,
  }
)

2.3 웹소켓 종료편집

과정 설명 비고
컨슈머

disconnect()

웹소켓 종료 신호를 받으면 응답받는 메소드.


자바스크립트에서 웹소켓 종료신호를 받았을 때 어떻게 할지 편집이 가능하다.
ws.onclose = function (e) {
    console.log(e)
  notification.open({
    message: "채팅이 종료되었습니다.",
    description: "새로운 채팅을 시작하세요",
    icon: <CloseCircleOutlined style={{ color: "red" }} />,
  });
};
django에서 프론트쪽으로 종료신호를 보내고 싶다면 self.close() 메소드


속한 그룹 모두를 종료시키고 싶다면 아래처럼.
await self.channel_layer.group_send(
            GROUP_NAME,
            {
                'type': 'websocket.close',
            }
        )

3 비고편집

과정 설명 비고
runserver 어째서인지 비동기 기능을 사용하면 runserver가 느려진다.

일반적인 개발환경에서 asgi를 계속 사용할 필요는 없으니, 다음의 코드로 실행하는 편이 좋다.

python manage.py runserver --noasgi

"장고 웹소켓" 분류에 속하는 문서

다음은 이 분류에 속하는 문서 3개 가운데 3개입니다.

ㅈ

원본 주소 "http://id8436.iptime.org:2786/mediawiki/index.php?title=분류:장고_웹소켓&oldid=1589"