"분류:장고 웹소켓"의 두 판 사이의 차이
둘러보기로 가기
검색하러 가기
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까지] |
+ | |||
+ | = 작동방식 = | ||
+ | |||
+ | === 처음 접속 === | ||
+ | {| 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> | ||
+ | |} | ||
[[분류:장고 기능구현(중급)]] | [[분류:장고 기능구현(중급)]] |
2022년 10월 24일 (월) 18:58 판
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개 가운데 3개입니다.