Giới thiệu
Channels kết hợp hỗ trợ chế độ xem không đồng bộ gốc của Django, cho phép các dự án của Django xử lý không chỉ HTTP mà còn các giao thức yêu cầu kết nối lâu dài - WebSockets, MQTT, chatbots, đài nghiệp dư, v.v.
Nó thực hitện điều này rong khi vẫn bảo toàn tính chất đồng bộ và dễ sử dụng của Django, cho phép bạn chọn cách bạn viết mã của mình - đồng bộ theo phong cách như chế độ xem Django, hoàn toàn không đồng bộ hoặc kết hợp cả hai. Trên hết, nó cung cấp tích hợp với hệ thống xác thực của Django, hệ thống phiên và hơn thế nữa, giúp việc mở rộng dự án chỉ HTTP của bạn sang các giao thức khác dễ dàng hơn bao giờ hết.
Channels cũng kết hợp kiến trúc hướng sự kiện này với các lớp kênh , một hệ thống cho phép bạn dễ dàng giao tiếp giữa các quy trình và tách dự án của bạn thành các quy trình khác nhau.
Cài đặt
start app
django-admin startproject myapp
python3 manage.py startapp chat
Sau đó create urls.py trong app chat. thêm thư mục templates và tạo file chat.html trong templates
myapp
├─ myapp
│ ├─ __init__.py
│ ├─ asgi.py
│ ├─ settings.py
│ ├─ urls.py
│ └─ wsgi.py
├─ chat
│ ├─ __init__.py
│ ├─ admin.py
│ ├─ apps.py
│ ├─ models.py
│ ├─ tests.py
│ ├─ urls.py
│ └─ views.py
├─ templates
│ └─ chat.html
└─ manage.py
Tiếp đết chúng ta thêm app chat vào setting.py
# mysite/settings.py
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'chat',
]
Sửa file chat.html
<!DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <title>Chat Rooms</title>
</head> <body> What chat room would you like to enter?<br> <input id="room-name-input" type="text" size="100"><br> <input id="room-name-submit" type="button" value="Enter"> <script> document.querySelector('#room-name-input').focus(); document.querySelector('#room-name-input').onkeyup = function (e) { if (e.keyCode === 13) { // enter, return document.querySelector('#room-name-submit').click(); } }; document.querySelector('#room-name-submit').onclick = function (e) { var roomName = document.querySelector('#room-name-input').value; window.location.pathname = '/chat/' + roomName + '/'; }; </script>
</body>
</html>
chỉnh sửa file urls.py trong app chat
# chat/urls.py
from django.urls import path
from . import views
urlpatterns = [ path('chat/', views.chat), path('chat/<str:room_name>/', views.chat_room),
]
chỉnh sửa views.py trong app chat
def chat(request): return render(request, 'chat.html') def chat_room(request, room_name): return render(request, 'room.html', {"room_name": room_name})
Chỉnh sửa file urls.py trong myapp
# myapp/urls.py
from django.conf.urls import include
from django.urls import path
from django.contrib import admin urlpatterns = [ path('admin/', admin.site.urls), path('', include('chat.urls')),
]
channels
pip install channels
Tiếp tục chỉnh sửa file setting.py
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'chat', 'channels',
] ASGI_APPLICATION = 'myapp.asgi.application' CHANNEL_LAYERS = { "default": { "BACKEND": "channels.layers.InMemoryChannelLayer", }
}
Tạo routing.py và consumers.py trong myapp
myapp
├─ myapp
│ ├─ __init__.py
│ ├─ asgi.py
│ ├─ consumers.py
│ ├─ routing.py
│ ├─ settings.py
│ ├─ urls.py
│ └─ wsgi.py
├─ chat
│ ├─ __init__.py
│ ├─ admin.py
│ ├─ apps.py
│ ├─ models.py
│ ├─ tests.py
│ ├─ urls.py
│ └─ views.py
├─ templates
│ └─ chat.html
└─ manage.py
Chỉnh sửa fie asgi.py trong myapp
from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter from myapp import routing os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'myapp.settings') application = ProtocolTypeRouter({ "http": get_asgi_application(), "websocket": AuthMiddlewareStack( URLRouter( routing.ws_urlpatterns ) )
}) Chỉnh sửa file routing.py tron myapp
from django.urls import path from . import consumers ws_urlpatterns = [ path('ws/chat/<str:room_name>/', consumers.ChatConsumer.as_asgi()),
]
Chỉnh sửa file consumers.py trong myapp
import json
from channels.generic.websocket import AsyncWebsocketConsumer class ChatConsumer(AsyncWebsocketConsumer): async def connect(self): print('connect') await self.accept() room_name = self.scope['url_route']['kwargs']['room_name'] await self.channel_layer.group_add(room_name, self.channel_name) print(f"Kết nối vào nhóm {self.channel_name}") async def receive(self, text_data): text_data_json = json.loads(text_data) message = text_data_json['message'] room_name = self.scope['url_route']['kwargs']['room_name'] await self.channel_layer.group_send( room_name, { 'type': 'chat_message', "message": message } ) async def chat_message(self, event): message = event['message'] await self.send(text_data=json.dumps({ 'message': message, })) async def disconnect(self, close_code): room_name = self.scope['url_route']['kwargs']['room_name'] await self.channel_layer.group_discard(room_name, self.channel_name) print(f"Thoát khỏi nhóm {self.channel_name}")
Tạo và chỉnh sửa file room.html trong templates
myapp
├─ myapp
│ ├─ __init__.py
│ ├─ asgi.py
│ ├─ consumers.py
│ ├─ routing.py
│ ├─ settings.py
│ ├─ urls.py
│ └─ wsgi.py
├─ chat
│ ├─ __init__.py
│ ├─ admin.py
│ ├─ apps.py
│ ├─ models.py
│ ├─ tests.py
│ ├─ urls.py
│ └─ views.py
├─ templates
│ ├─ chat.html
│ └─ room.html
└─ manage.py
<!DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <title>Chat Room</title>
</head> <body> <textarea id="chat-log" cols="100" rows="20"></textarea><br> <input id="chat-message-input" type="text" size="100"><br> <input id="chat-message-submit" type="button" value="Send"> {{ room_name|json_script:"room_name" }} <script> const roomName = JSON.parse(document.getElementById('room_name').textContent); const chat = `ws://127.0.0.1:8000/ws/chat/${roomName}/` const chatSocket = new WebSocket(chat) chatSocket.onopen = function (e) { console.log("open", e); } chatSocket.onmessage = function(e) { const data = JSON.parse(e.data); document.querySelector('#chat-log').value += (data.message + '\n'); }; chatSocket.onerror = function (e) { console.log("error", e) } chatSocket.onclose = function (e) { console.log("close", e) } document.querySelector('#chat-message-input').focus(); document.querySelector('#chat-message-input').onkeyup = function (e) { if (e.keyCode === 13) { // enter, return document.querySelector('#chat-message-submit').click(); } }; document.querySelector('#chat-message-submit').onclick = function (e) { const messageInputDom = document.querySelector('#chat-message-input'); const message = messageInputDom.value; chatSocket.send(JSON.stringify({ 'message': message })); messageInputDom.value = ''; }; </script>
</body> </html>
Run app
python manage.py makemigrations
python manage.py migrate
python manage.py runserver
Chúc các bạn thành công!