편집
1,408
번
바뀜
둘러보기로 가기
검색하러 가기
410번째 줄:
410번째 줄: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 424번째 줄:
458번째 줄: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
→Consumer.py
=== routing.py ===
=== routing.py ===
들어온 경로와 컨슈머를 연결해준다. urls.py와 view.py의 관계.
들어온 경로와 컨슈머를 연결해준다. urls.py와 view.py의 관계.
다음과 같은 형태로 컨슈머를 연결한다.<syntaxhighlight lang="python">
websocket_urlpatterns = [
re_path(r'ws/notification/(?P<center_name>\w+)/$', consumers.NotificationConsumer.as_asgi()),
]
</syntaxhighlight>
=== Consumer.py ===
=== Consumer.py ===
컨슈머는 클래스로 구현되어 connect, disconnect 등으로 구성된다.
{| class="wikitable"
!항목
!설명
!예시
|-
| 컨슈머 정의
|클래스로 구현한다.
|<syntaxhighlight lang="python">
from channels.generic.websocket import WebsocketConsumer
class 컨슈머이름(WebsocketConsumer):
</syntaxhighlight>비동기식으로 구성한 경우<syntaxhighlight lang="python">
from channels.generic.websocket import AsyncWebsocketConsumer
class 컨슈머이름(AsyncWebsocketConsumer):
</syntaxhighlight>
|}
==== connect ====
{| class="wikitable"
!항목
!설명
!예시
|-
| 사전 설정
|각종 변수들의 조작을 먼저 한다.
스코프로 받아서 변수들을 조작하는데, 그 구조는 다음과 같다.
{| class="wikitable"
{| class="wikitable"
!항목
!항목
|self.scope["url_route"]["kargs"]["변수키"]
|self.scope["url_route"]["kargs"]["변수키"]
|변수의 값을 얻어온다.
|변수의 값을 얻어온다.
|}
|self.group_name = self.scope["url_route"]["kwargs"]["room_name"]
|-
|그룹 참여
|그룹을 지정하여 참여시킨다.
|<syntaxhighlight lang="python">
async_to_sync(self.channel_layer.group_add)(
self.group_name, # 위에서 설정하여 넣어준다.
self.channel_name # 자동으로 고유하게 지정된다.
)
</syntaxhighlight>비동기식으로 구성한 경우<syntaxhighlight lang="python">
await self.channel_layer.group_add(self.group_name, self.channel_name)
</syntaxhighlight>
|-
|연결
|위 설정을 토대로 연결한다.
연결 이후 필요한 명령을 넣기도 한다.
연결과 동시에 다음과 같이 신호를 보내기도 한다.<syntaxhighlight lang="python">
notifications = get_notification()
if notifications:
async_to_sync(self.channel_layer.group_send)(
"center_name", {
"type": "notify",
"data": notifications
}
)
</syntaxhighlight>
|<syntaxhighlight lang="python">
self.accept()
</syntaxhighlight>비동기식으로 구성한 경우<syntaxhighlight lang="python">
await self.accept()
</syntaxhighlight>
|}
==== disconnect ====
{| class="wikitable"
!항목
!설명
!예시
|-
|정의
|연결을 끊기만 할 테니, 기본 설정은 간단하다.
적당히 끊어질 때의 명령을 넣기도 한다.
|<syntaxhighlight lang="python">
def disconnect(self, close_code):
async_to_sync(self.channel_layer.group_discard)(
self.group_name,
self.channel_name
)
</syntaxhighlight>비동기식으로 구성한 경우<syntaxhighlight lang="python">
async def disconnect(self, close_code):
await self.channel_layer.group_discard(self.group_name, self.channel_name)
</syntaxhighlight>
|}
==== receive ====
타인으로부터 메시지를 받는 게 아니라, 자바스크립트로부터 받는 메시지와 관련된 함수이다.(웹소켓에서 메시지를 받을 때.)
{| class="wikitable"
!항목
!설명
!예시
|-
|정의
|본인의 자바스크립트에서 웹소켓으로 메시지를 보낸 경우.
자바스크립트에서 데이터가 넘어올 땐 json으로 변환되어 오기 때문에 우측과 같이 구성해야 한다.
메시지를 보낼 때 type는 받는 함수를 지정할 때 쓰인다.(없어도 되긴 함.)
type의 이름이 chat.message 라면 chat_message로 변경되어 처리된다.
|<syntaxhighlight lang="python">
def receive(self, text_data):
text_data_json = json.loads(text_data)
message = text_data_json['message']
# 나 뿐 아니라 다른 사람들도 보게끔.
self.send(text_data=json.dumps({
'message': message
}))
</syntaxhighlight>비동기식으로 구성한 경우<syntaxhighlight lang="python">
async def receive(self, text_data):
text_data_json = json.loads(text_data)
message = text_data_json["message"]
# 나 뿐만 아니라 다른사람들도 보도록.
await self.channel_layer.group_send(
self.room_group_name, {"type": "chat_message",
"message": message}
)
</syntaxhighlight>
|}
==== 이벤트 ====
다른 사용자들로부터 메시지를 받는 등의 이벤트가 나타났을 때.
{| class="wikitable"
!항목
!설명
!예시
|-
|정의
|함수의 이름은 메시지를 보낼 때의 type와 동일하게 짓는다.
type에 따라 다른 함수가 실행된다.
(event가 들어오면 자동으로 실행되는 듯하다.)
웹소켓(자바스크립트)으로 보낼 땐 json으로 변환하여 보내주어야 한다.
|<syntaxhighlight lang="python">
def chat_message(self, event):
message = event['message']
# Send message to WebSocket
self.send(text_data=json.dumps({
'message': message
}))
</syntaxhighlight>비동기식으로 구성한 경우<syntaxhighlight lang="python">
async def chat_message(self, event):
message = event["message"]
# Send message to WebSocket
await self.send(text_data=json.dumps({"message": message}))
</syntaxhighlight>
|-
|
|보내는 함수의 차이.
|
|}
==== 자바스크립트에서 ====
{| class="wikitable"
!항목
!설명
!예시
|-
|웹소켓 생성
|스크립트의 초반에 우측과 같이 주소를 지정하여 소켓을 생성한다.
roomname과 같은 변수는 위에서 받아 넘겨주어야 한다.
웹소켓이 만들어지면 아래 4개의 이벤트 사용이 가능해진다.
* open – 커넥션이 제대로 만들어졌을 때 발생함
* message – 데이터를 수신하였을 때 발생함
* error – 에러가 생겼을 때 발생함
* close – 커넥션이 종료되었을 때 발생
이벤트의 활용은 아래 예시를 참고하자.
|<syntaxhighlight lang="python">
const chatSocket = new WebSocket(
'ws://' + window.location.host
+ '/ws/chat/'
+ roomName
+ '/'
);
</syntaxhighlight>
|-
|message
|웹소켓이 데이터를 수신할 때 발생
|<syntaxhighlight lang="python">
chatSocket.onmessage = function(e) {
const data = JSON.parse(e.data);
document.querySelector('#chat-log').value += (data.message + '\n');
};
</syntaxhighlight>
|-
|close
|
|<syntaxhighlight lang="python">
chatSocket.onclose = function(e) {
console.error('Chat socket closed unexpectedly');
};
</syntaxhighlight>
|-
|메시지 보내기
|만든 소켓으로 메시지 보낼 때.
JavaScript 값이나 객체를 JSON 문자열로 변환해야만 한다.
|<syntaxhighlight lang="python">
chatSocket.send(JSON.stringify({
'message': message
}));
</syntaxhighlight>
|}
|}
[[분류:장고 웹소켓]]
[[분류:장고 웹소켓]]