如何基於Django中的WebSockets和異步視圖來實現實時通信功能

本文分享自華爲雲社區《結合Django中的WebSockets和異步視圖實現實時通信功能的完整指南》，作者：檸檬味擁抱。

在現代Web應用程序中，實時通信已經成爲了必不可少的功能之一。無論是在線聊天、實時數據更新還是實時通知，都需要通過實時通信技術來實現。Django作爲一個強大的Web框架，提供了許多工具來構建各種類型的Web應用程序，但是在實時通信方面，傳統的請求-響應模式顯然無法滿足需求。在這篇文章中，我們將探討如何利用Django中的WebSockets和異步視圖來實現實時通信功能。

WebSockets簡介

WebSockets是一種在單個TCP連接上提供全雙工通信的協議。與HTTP請求-響應模式不同，WebSockets允許服務器和客戶端之間進行持續的雙向通信，從而實現了實時性。在Django中，我們可以使用第三方庫django-channels來實現WebSocket的支持。

異步視圖

Django 3.1引入了異步視圖的支持，使得我們可以編寫異步處理請求的視圖函數。這對於處理長時間運行的任務或需要等待外部資源響應的請求非常有用。

結合WebSockets與異步視圖

下面我們將通過一個案例來演示如何在Django中結合WebSockets和異步視圖來實現實時通信功能。假設我們正在開發一個簡單的實時聊天應用。

安裝依賴

首先，我們需要安裝django-channels庫：

pip install channels

配置項目

在項目的settings.py中，添加channels應用：

INSTALLED_APPS = [
    ...
    'channels',
    ...
]

然後，創建一個名爲routing.py的新文件，在其中定義WebSocket路由：

# routing.py

from channels.routing import ProtocolTypeRouter, URLRouter
from channels.auth import AuthMiddlewareStack
from django.urls import path
from myapp.consumers import ChatConsumer

websocket_urlpatterns = [
    path('ws/chat/', ChatConsumer.as_asgi()),
]

application = ProtocolTypeRouter({
    'websocket': AuthMiddlewareStack(
        URLRouter(
            websocket_urlpatterns
        )
    ),
})

創建Consumer

接下來，我們創建一個消費者（Consumer）來處理WebSocket連接：

# consumers.py

import json
from channels.generic.websocket import AsyncWebsocketConsumer

class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.room_name = 'chat_room'
        self.room_group_name = f'chat_{self.room_name}'

        # 加入聊天室羣組
        await self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )

        await self.accept()

    async def disconnect(self, close_code):
        # 離開聊天室羣組
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    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
            }
        )

    async def chat_message(self, event):
        message = event['message']

        # 發送消息給WebSocket連接
        await self.send(text_data=json.dumps({
            'message': message
        }))

編寫前端代碼

在前端頁面中，我們需要使用JavaScript來連接WebSocket並處理消息的發送和接收：

// chat.js

const chatSocket = new WebSocket('ws://localhost:8000/ws/chat/');

chatSocket.onmessage = function(e) {
    const data = JSON.parse(e.data);
    const message = data['message'];
    // 處理收到的消息
    console.log(message);
};

chatSocket.onclose = function(e) {
    console.error('Chat socket closed unexpectedly');
};

document.querySelector('#chat-message-input').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        const messageInputDom = document.querySelector('#chat-message-input');
        const message = messageInputDom.value;
        chatSocket.send(JSON.stringify({
            'message': message
        }));
        messageInputDom.value = '';
    }
});

集成到模板

最後，我們在Django模板中集成JavaScript代碼：

<!-- chat.html -->

<!DOCTYPE html>
<html>
<head>
    <title>Chat</title>
</head>
<body>
    <textarea id="chat-message-input"></textarea>
    <script src="{% static 'chat.js' %}"></script>
</body>
</html>

引入異步視圖

在Django 3.1之前，視圖函數都是同步執行的，這意味着一個視圖函數中的代碼會一直執行直到返回一個HTTP響應給客戶端。然而，有些任務可能是耗時的，比如調用外部API或者執行復雜的計算。在這種情況下，同步視圖會阻塞整個應用程序，導致性能下降。

爲了解決這個問題，Django引入了異步視圖，它們使用Python的async和await語法來支持異步編程模式。異步視圖允許在處理請求時掛起執行，等待IO操作完成而不會阻塞整個應用程序。

結合WebSockets與異步視圖的優勢

結合WebSockets與異步視圖可以使得實時通信應用具備更高的性能和可擴展性。當有大量連接同時進行通信時，異步視圖可以有效地管理這些連接，而不會因爲一個連接的阻塞而影響其他連接的處理。這種方式下，應用程序能夠更好地應對高併發情況，保持穩定性和高效性。

完善實時聊天應用

除了上述示例中的基本聊天功能之外，我們還可以對實時聊天應用進行一些擴展，比如：

用戶認證：在連接WebSocket時進行用戶認證，確保只有已登錄的用戶可以進入聊天室。
聊天室管理：創建多個聊天室，並允許用戶選擇加入不同的聊天室。
消息存儲：將聊天記錄保存到數據庫中，以便用戶在斷線重連後可以查看歷史消息。
消息通知：實現消息通知功能，當用戶收到新消息時，通過瀏覽器通知或郵件提醒用戶。
實時在線用戶列表：顯示當前在線用戶列表，並在用戶進入或離開聊天室時實時更新。

實時地理位置共享

假設我們正在開發一個實時地理位置共享應用，用戶可以在地圖上實時看到其他用戶的位置。以下是一個簡單的示例代碼：

後端代碼

# consumers.py

import json
from channels.generic.websocket import AsyncWebsocketConsumer

class LocationConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.room_name = 'location_room'
        self.room_group_name = f'location_{self.room_name}'

        # 加入地理位置共享房間
        await self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )

        await self.accept()

    async def disconnect(self, close_code):
        # 離開地理位置共享房間
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        latitude = text_data_json['latitude']
        longitude = text_data_json['longitude']

        # 發送位置信息到地理位置共享房間
        await self.channel_layer.group_send(
            self.room_group_name,
            {
                'type': 'location_message',
                'latitude': latitude,
                'longitude': longitude
            }
        )

    async def location_message(self, event):
        latitude = event['latitude']
        longitude = event['longitude']

        # 發送位置信息給WebSocket連接
        await self.send(text_data=json.dumps({
            'latitude': latitude,
            'longitude': longitude
        }))

前端代碼

// location.js

const locationSocket = new WebSocket('ws://localhost:8000/ws/location/');

locationSocket.onmessage = function(e) {
    const data = JSON.parse(e.data);
    const latitude = data['latitude'];
    const longitude = data['longitude'];
    // 在地圖上顯示用戶位置
    updateMap(latitude, longitude);
};

locationSocket.onclose = function(e) {
    console.error('Location socket closed unexpectedly');
};

function sendLocation(latitude, longitude) {
    locationSocket.send(JSON.stringify({
        'latitude': latitude,
        'longitude': longitude
    }));
}

在這個示例中，用戶通過前端界面在地圖上選擇或移動位置，然後通過WebSocket發送位置信息到服務器。服務器接收到位置信息後，將其廣播給所有連接的用戶，前端界面接收到位置信息後，在地圖上實時更新其他用戶的位置。

這樣的實時地理位置共享功能可以應用在社交應用、實時導航應用等場景中，爲用戶提供更好的交互體驗。

實時數據可視化

假設我們有一個數據監控系統，需要實時展示各種傳感器的數據。以下是一個簡單的示例代碼：

後端代碼

# consumers.py

import json
from channels.generic.websocket import AsyncWebsocketConsumer

class SensorDataConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.room_name = 'sensor_data_room'
        self.room_group_name = f'sensor_data_{self.room_name}'

        # 加入傳感器數據共享房間
        await self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )

        await self.accept()

    async def disconnect(self, close_code):
        # 離開傳感器數據共享房間
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        sensor_id = text_data_json['sensor_id']
        sensor_value = text_data_json['sensor_value']

        # 發送傳感器數據到傳感器數據共享房間
        await self.channel_layer.group_send(
            self.room_group_name,
            {
                'type': 'sensor_data_message',
                'sensor_id': sensor_id,
                'sensor_value': sensor_value
            }
        )

    async def sensor_data_message(self, event):
        sensor_id = event['sensor_id']
        sensor_value = event['sensor_value']

        # 發送傳感器數據給WebSocket連接
        await self.send(text_data=json.dumps({
            'sensor_id': sensor_id,
            'sensor_value': sensor_value
        }))

前端代碼

// sensor_data.js

const sensorDataSocket = new WebSocket('ws://localhost:8000/ws/sensor_data/');

sensorDataSocket.onmessage = function(e) {
    const data = JSON.parse(e.data);
    const sensorId = data['sensor_id'];
    const sensorValue = data['sensor_value'];
    // 更新傳感器數據圖表
    updateChart(sensorId, sensorValue);
};

sensorDataSocket.onclose = function(e) {
    console.error('Sensor data socket closed unexpectedly');
};

function sendSensorData(sensorId, sensorValue) {
    sensorDataSocket.send(JSON.stringify({
        'sensor_id': sensorId,
        'sensor_value': sensorValue
    }));
}

在這個示例中，傳感器設備通過WebSocket將實時數據發送到服務器，服務器接收到數據後將其廣播給所有連接的用戶，前端界面接收到數據後，使用JavaScript圖表庫將實時數據實時展示在圖表中。

這樣的實時數據可視化功能可以應用在數據監控、實時分析等場景中，爲用戶提供實時的數據展示和監控功能。

高級功能和進階應用

除了基本的實時聊天功能之外，結合WebSockets和異步視圖還可以實現一系列高級功能和進階應用。以下是一些示例：

1. 實時地理位置共享

利用WebSocket和異步視圖，可以實現用戶之間實時的地理位置共享。當用戶移動時，前端應用可以將用戶的位置信息發送到服務器，服務器再將這些信息廣播給其他用戶。這種功能在社交應用、地圖導航應用等場景中非常有用。

2. 實時數據可視化

在數據分析和監控領域，實時數據可視化是一項重要的任務。通過WebSocket和異步視圖，可以實時將數據傳輸到前端，並利用JavaScript圖表庫（如Highcharts、Chart.js等）實時展示數據變化趨勢、實時監控系統狀態等。

3. 在線協作編輯

利用WebSocket和異步視圖，可以實現多人在線協作編輯功能，類似於Google Docs。當一個用戶編輯文檔時，其餘用戶可以實時看到編輯內容的變化，從而實現多人實時協作編輯。

4. 實時遊戲

實時遊戲對於實時通信的需求非常高。結合WebSocket和異步視圖，可以實現實時的多人在線遊戲，比如棋牌遊戲、實時戰略遊戲等，提供流暢的遊戲體驗。

5. 實時搜索和過濾

在網站和應用中，用戶可能需要實時搜索和過濾數據。通過WebSocket和異步視圖，可以實時向服務器發送搜索關鍵詞或過濾條件，並實時獲取服務器返回的搜索結果或過濾後的數據，從而提高用戶體驗。

6. 實時投票和問卷調查

在線投票和問卷調查通常需要實時獲取投票結果或問卷填寫情況。結合WebSocket和異步視圖，可以實時更新投票結果圖表或問卷統計數據，讓用戶實時瞭解當前的投票情況或問卷填寫進度。

總結

本文介紹瞭如何利用Django中的WebSockets和異步視圖來實現實時通信功能。我們首先了解了WebSockets的基本概念和工作原理，以及Django中使用django-channels庫來支持WebSockets的方法。接着，我們深入探討了異步視圖的概念和用法，以及如何結合WebSockets和異步視圖來實現實時通信功能。

通過一個簡單的實時聊天應用的示例，我們演示瞭如何創建WebSocket消費者（Consumer）來處理WebSocket連接，並利用異步視圖來處理WebSocket連接中的事件。我們還介紹瞭如何在前端頁面中使用JavaScript來連接WebSocket，並實時處理接收到的消息。

隨後，我們進一步探討了結合WebSockets和異步視圖的優勢，並提供了一系列高級功能和進階應用的示例，包括實時地理位置共享、實時數據可視化等。這些功能和應用可以爲開發者提供更多的創新和可能性，從而滿足不同場景下的實時通信需求

點擊關注，第一時間瞭解華爲雲新鮮技術~

如何基於Django中的WebSockets和異步視圖來實現實時通信功能

WebSockets簡介

異步視圖

結合WebSockets與異步視圖

安裝依賴

配置項目

創建Consumer

編寫前端代碼

集成到模板

引入異步視圖

結合WebSockets與異步視圖的優勢

完善實時聊天應用

實時地理位置共享

後端代碼

前端代碼

實時數據可視化

後端代碼

前端代碼

高級功能和進階應用

1. 實時地理位置共享

2. 實時數據可視化

3. 在線協作編輯

4. 實時遊戲

5. 實時搜索和過濾

6. 實時投票和問卷調查

總結

北歐瑞典挪威芬蘭瑞士TikTok海外網紅與YouTube博主的合作模式

歐洲英國德國法國TikTok與YouTube海外網紅達人的完美合作策略

意大利西班牙羅馬尼亞葡萄牙海外網紅達人：探索廣告媒介公司的資源與合作機會

官網對業務推廣的好處有哪些？

Java集合中的Set

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結