溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“Django如何使用channels+websocket打造在線聊天室”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Django如何使用channels+websocket打造在線聊天室”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，并進行雙向數據傳輸。
很多網站為了實現推送技術，所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP請求，然后由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。Websocket能更好的節省服務器資源和帶寬，并且能夠更實時地進行通訊，早已成為一種非常流行必須掌握的技術。
首先在虛擬環境中安裝django和channels(本項目使用了最新版本，均為3.X版本), 新建一個名為myproject的項目，新建一個app名為chat。如果windows下安裝報錯，如何解決自己網上去找吧。
pip install django==3.2.3
pip install channels==3.0.3
修改settings.py, 將channels和chat加入到INSTALLED_APPS里，并添加相應配置，如下所示：
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'channels', # channels應用
'chat',
]
# 設置ASGI應用
ASGI_APPLICATION = 'myproject.asgi.application'
# 設置通道層的通信后臺 - 本地測試用
CHANNEL_LAYERS = {
"default": {
"BACKEND": "channels.layers.InMemoryChannelLayer"
}
}注意 ：本例為了簡化代碼，使用了InMemoryChannelLayer做通道層(channel_layer)的通信后臺，實際生產環境中應該需要使用redis作為后臺。這時你還需要安裝redis和channels_redis，然后添加如下配置：
# 生產環境中使用redis做后臺，安裝channels_redis
CHANNEL_LAYERS = {
"default": {
"BACKEND": "channels_redis.core.RedisChannelLayer",
"CONFIG": {
"hosts": [("127.0.0.1", 6379)],
#或"hosts": [os.environ.get('REDIS_URL', 'redis://127.0.0.1:6379/1')],
},
},
}最后將chat應用的urls.py加入到項目urls.py中去，這和常規Django項目無異。
# myproject/urls.py
from django.conf.urls import include
from django.urls import path
from django.contrib import admin
urlpatterns = [
path('chat/', include('chat.urls')),
path('admin/', admin.site.urls),
]我們需要利用django普通視圖函數編寫兩個頁面，一個用于展示首頁(index), 通過表單讓用戶輸入聊天室的名稱(room_name)，然后跳轉到相應聊天室頁面；一個頁面用于實時展示聊天信息記錄，并允許用戶發送信息。
這兩個頁面對應的路由及視圖函數如下所示：
# chat/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('<str:room_name>/', views.room, name='room'),
]
# chat/views.py
from django.shortcuts import render
def index(request):
return render(request, 'chat/index.html', {})
def room(request, room_name):
return render(request, 'chat/room.html', {
'room_name': room_name
})接下來我們編寫兩個模板文件index.html和room.html。它們的路徑位置如下所示：
chat/
__init__.py
templates/
chat/
index.html
room.html
urls.py
views.pyindex.html內容如下所示。它也基本不涉及websocket，就是讓用戶輸入聊天室后進行跳轉。
<!-- chat/templates/chat/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Chat Rooms</title>
</head>
<body>
請輸入聊天室名稱：
<input id="room-name-input" type="text" size="100">
<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>room.html內容如下所示。為了幫助你理解前后端是怎么實現websocket實時通信的，我給每行js代碼添加了注釋，這對于你理解前端如何發送websocket的請求，如果處理后端發過來的websocket消息至關重要。
<script>
// 獲取房間名
const roomName = JSON.parse(document.getElementById('room-name').textContent);
// 根據roomName拼接websocket請求地址，建立長連接
// 請求url地址為/ws/chat/<room_name>/
const wss_protocol = (window.location.protocol == 'https:') ? 'wss://': 'ws://';
const chatSocket = new WebSocket(
wss_protocol + window.location.host + '/ws/chat/' + roomName + '/'
);
// 建立websocket連接時觸發此方法，展示歡迎提示
chatSocket.onopen = function(e) {
document.querySelector('#chat-log').value += ('[公告]歡迎來到' + roomName + '討論群。請文明發言!
')
}
// 從后臺接收到數據時觸發此方法
// 接收到后臺數據后對其解析，并加入到聊天記錄chat-log
chatSocket.onmessage = function(e) {
const data = JSON.parse(e.data);
document.querySelector('#chat-log').value += (data.message + '
');
};
// websocket連接斷開時觸發此方法
chatSocket.onclose = function(e) {
console.error('Chat socket closed unexpectedly');
};
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();
}
};
// 每當點擊發送消息按鈕，通過websocket的send方法向后臺發送信息。
document.querySelector('#chat-message-submit').onclick = function(e) {
const messageInputDom = document.querySelector('#chat-message-input');
const message = messageInputDom.value;
//注意這里:先把文本數據轉成json格式,然后調用send方法發送。
chatSocket.send(JSON.stringify({
'message': message
}));
messageInputDom.value = '';
};
</script>此時如果你使用python manage.py runserver命令啟動測試服務器，當你訪問一個名為/hello/的房間時
到這里你看不到任何聊天記錄，也不能發送任何消息，因為我們還沒有在后端編寫任何代碼用于處理前端發來的消息，并返回數據。在終端你還會看到如下報錯, 說Django只能處理http連接，不能處理websocket。
到目前為止，我們所寫的就是一個普通的django應用，還沒有用到channels庫處理websocket請求。接下來我們就要正式開始使用channels了。
當 Django 接受 HTTP 請求時, 它會根據根 URLconf 以查找視圖函數, 然后調用視圖函數來處理請求。同樣, 當 channels 接受 WebSocket 連接時, 它也會根據根路由配置去查找相應的處理方法。只不過channels的路由不在urls.py中配置，處理方法也不寫在views.py。在channels中，這兩個文件分別變成了routing.py和consumers.py。這樣的好處是不用和django的常規應用混在一起。
routing.py：websocket路由文件，相當于django的urls.py。它根據websocket請求的url地址觸發consumers.py里定義的方法。
consumers.py：相當于django的視圖views.py，負責處理通過websocket路由轉發過來的請求和數據。
在chat應用下新建routing.py, 添加如下代碼。它的作用是將發送至ws/chat/<room_name>/的websocket請求轉由ChatConsumer處理。
# chat/routing.py
from django.urls import re_path
from . import consumers
websocket_urlpatterns = [
re_path(r'ws/chat/(?P<room_name>w+)/$', consumers.ChatConsumer.as_asgi()),
]注意：定義websocket路由時，推薦使用常見的路徑前綴 (如/ws) 來區分 WebSocket 連接與普通 HTTP 連接， 因為它將使生產環境中部署 Channels 更容易，比如nginx把所有/ws的請求轉給channels處理。
與Django類似，我們還需要把這個app的websocket路由加入到項目的根路由中去。編輯myproject/asgi.py, 添加如下代碼：
# myproject/asgi.py
import os
from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
from django.core.asgi import get_asgi_application
import chat.routing
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "myproject.settings")
application = ProtocolTypeRouter({
# http請求使用這個
"http": get_asgi_application(),
# websocket請求使用這個
"websocket": AuthMiddlewareStack(
URLRouter(
chat.routing.websocket_urlpatterns
)
),
})在這里，channels的ProtocolTypeRouter會根據請求協議的類型來轉發請求。AuthMiddlewareStack將使用對當前經過身份驗證的用戶的引用來填充連接的scope, 類似于 Django 的request對象，我們后面還會講到。
接下來在chat應用下新建consumers.py, 添加如下代碼:
import json
from asgiref.sync import async_to_sync
from channels.generic.websocket import WebsocketConsumer
import datetime
class ChatConsumer(WebsocketConsumer):
# websocket建立連接時執行方法
def connect(self):
# 從url里獲取聊天室名字，為每個房間建立一個頻道組
self.room_name = self.scope['url_route']['kwargs']['room_name']
self.room_group_name = 'chat_%s' % self.room_name
# 將當前頻道加入頻道組
async_to_sync(self.channel_layer.group_add)(
self.room_group_name,
self.channel_name
)
# 接受所有websocket請求
self.accept()
# websocket斷開時執行方法
def disconnect(self, close_code):
async_to_sync(self.channel_layer.group_discard)(
self.room_group_name,
self.channel_name
)
# 從websocket接收到消息時執行函數
def receive(self, text_data):
text_data_json = json.loads(text_data)
message = text_data_json['message']
# 發送消息到頻道組，頻道組調用chat_message方法
async_to_sync(self.channel_layer.group_send)(
self.room_group_name,
{
'type': 'chat_message',
'message': message
}
)
# 從頻道組接收到消息后執行方法
def chat_message(self, event):
message = event['message']
datetime_str = datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')
# 通過websocket發送消息到客戶端
self.send(text_data=json.dumps({
'message': f'{datetime_str}:{message}'
}))每個自定義的Consumer類一般繼承同步的WebsocketConsumer類或異步的AysncWebSocketConsumer類，它自帶 self.channel_name 和self.channel_layer 屬性。前者是獨一無二的長連接頻道名，后者提供了 send(), group_send()和group_add() 3種方法, 可以給單個頻道或一個頻道組發信息，還可以將一個頻道加入到組。
每個頻道(channel)都有一個名字。擁有頻道名稱的任何人都可以向頻道發送消息。
一個組(group)有一個名字。具有組名稱的任何人都可以按名稱向組添加/刪除頻道，并向組中的所有頻道發送消息。
注意：雖然異步Consumer類性能更優，channels推薦使用同步consumer類 , 尤其是調用Django ORM或其他同步程序時，以保持整個consumer在單個線程中并避免ORM查詢阻塞整個event。調用channel_layer提供的方法時需要用async_to_sync轉換一下。
除此以外，我們還使用了self.scope['url_route']['kwargs']['room_name']從路由中獲取了聊天室的房間名，在channels程序中，scope是個很重要的對象，類似于django的request對象，它代表了當前websocket連接的所有信息。你可以通過scope['user']獲取當前用戶對象，還可以通過scope['path']獲取當前當前請求路徑。
連續運行如下命令，就可以看到我們文初的效果啦。
python manage.py makemigrations
python manage.py migrate
python manage.py runserver
讀到這里，這篇“Django如何使用channels+websocket打造在線聊天室”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
