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

Pywiki
둘러보기로 가기 검색하러 가기
 
(같은 사용자의 중간 판 하나는 보이지 않습니다)
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"