实时交互新篇章：Django-Ninja与Django Channels携手打造高效WebSocket应用

Coderabo

于 2024-09-04 09:44:52 发布

阅读量420

点赞数 16

文章标签：交互 django websocket

本文链接：https://blog.csdn.net/tombosky/article/details/141885006

版权

Django-Ninja框架结合Django Channels应用实例

随着互联网应用的发展，用户对于实时交互的需求越来越高。无论是在线聊天室、实时通知系统还是股票市场数据更新，都需要一种高效的解决方案来实现实时数据推送。在Python Web开发领域，Django框架因其强大的ORM、模板系统和完善的生态系统而备受青睐。然而，传统的Django应用主要基于HTTP协议，对于需要实时数据交换的应用来说，存在一定的局限性。这时，Django Channels便应运而生，它为Django引入了异步支持，并且可以处理WebSocket等其他协议。

本文将详细介绍如何在使用Django-Ninja框架的基础上，结合Django Channels来构建一个简单的实时应用。我们将通过一个在线聊天室的例子来演示整个过程。

## 一、环境准备

首先，确保你有一个基本的Python虚拟环境，并且已经安装了Django和Django-Ninja。如果没有安装，可以通过以下命令进行安装：

pip install django djangorestframework ninja

假设我们已经有了一个名为myproject的Django项目，并且创建了一个名为chat的应用。

## 二、安装Django Channels

在我们的项目中安装Django Channels：

pip install channels

## 三、配置Django Channels

编辑myproject/settings.py文件，添加channels的相关配置：

INSTALLED_APPS = [
    # ...
    'channels',
    'rest_framework',
    'ninja',
    'chat',
]

ASGI_APPLICATION = 'myproject.routing.application'

CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels.layers.InMemoryChannelLayer',
    },
}

这里我们使用了内存层作为channel层，适用于开发阶段。生产环境中可能需要使用更可靠的channel层实现，比如Redis。

## 四、定义路由

在项目根目录下创建一个routing.py文件，用于定义WebSocket的路由：

from channels.routing import ProtocolTypeRouter, URLRouter
from django.urls import re_path
from chat.consumers import ChatConsumer

application = ProtocolTypeRouter({
    "websocket": URLRouter([
        re_path(r"^ws/chat/(?P<room_name>\w+)/$", ChatConsumer.as_asgi()),
    ]),
})

这里我们定义了一个WebSocket路由，指向chat应用中的ChatConsumer类，并且传入了房间名称参数。

## 五、编写Consumer

接下来，在chat应用中创建一个名为consumers.py的文件，用于处理WebSocket连接：

import json
from channels.generic.websocket import AsyncWebsocketConsumer

class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.room_name = self.scope['url_route']['kwargs']['room_name']
        self.room_group_name = f'chat_{self.room_name}'

        # Join room group
        await self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )

        await self.accept()

    async def disconnect(self, close_code):
        # Leave room group
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    # Receive message from WebSocket
    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']

        # Send message to room group
        await self.channel_layer.group_send(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': message
            }
        )

    # Receive message from room group
    async def chat_message(self, event):
        message = event['message']

        # Send message to WebSocket
        await self.send(text_data=json.dumps({
            'message': message
        }))

这个消费者实现了基本的WebSocket连接、断开和接收消息的功能。当接收到消息后，它会将其发送给同一房间组内的所有客户端。

## 六、前端集成

为了让前端能够与WebSocket通信，你可以使用任何WebSocket库。例如，使用JavaScript原生API：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>实时聊天室</title>
</head>
<body>
    <h1>欢迎来到实时聊天室</h1>
    <div id="messages"></div>
    <input type="text" id="messageInput" placeholder="输入消息...">
    <button onclick="sendMessage()">发送</button>

    <script>
        const roomName = 'example'; // 这里设置房间名
        var socket = new WebSocket(`ws://${window.location.host}/ws/chat/${roomName}/`);

        socket.onopen = function(e) {
            console.log("WebSocket连接已打开");
        };

        socket.onmessage = function(event) {
            var data = JSON.parse(event.data);
            var messagesDiv = document.getElementById('messages');
            messagesDiv.innerHTML += `<p>${data.message}</p>`;
        };

        function sendMessage() {
            var input = document.getElementById("messageInput");
            socket.send(JSON.stringify({message: input.value}));
            input.value = '';
        }

        socket.onerror = function(error) {
            console.error("WebSocket发生错误: ", error);
        };
    </script>
</body>
</html>

这段代码会在页面加载时建立WebSocket连接，并尝试发送一条消息到指定的房间。

完整代码示例

myproject/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'channels',
    'rest_framework',
    'ninja',
    'chat',
]

ASGI_APPLICATION = 'myproject.routing.application'

CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels.layers.InMemoryChannelLayer',
    },
}

myproject/routing.py

from channels.routing import ProtocolTypeRouter, URLRouter
from django.urls import re_path
from chat.consumers import ChatConsumer

application = ProtocolTypeRouter({
    "websocket": URLRouter([
        re_path(r"^ws/chat/(?P<room_name>\w+)/$", ChatConsumer.as_asgi()),
    ]),
})

chat/consumers.py

import json
from channels.generic.websocket import AsyncWebsocketConsumer

class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.room_name = self.scope['url_route']['kwargs']['room_name']
        self.room_group_name = f'chat_{self.room_name}'

        # Join room group
        await self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )

        await self.accept()

    async def disconnect(self, close_code):
        # Leave room group
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    # Receive message from WebSocket
    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']

        # Send message to room group
        await self.channel_layer.group_send(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': message
            }
        )

    # Receive message from room group
    async def chat_message(self, event):
        message = event['message']

        # Send message to WebSocket
        await self.send(text_data=json.dumps({
            'message': message
        }))

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>实时聊天室</title>
</head>
<body>
    <h1>欢迎来到实时聊天室</h1>
    <div id="messages"></div>
    <input type="text" id="messageInput" placeholder="输入消息...">
    <button onclick="sendMessage()">发送</button>

    <script>
        const roomName = 'example'; // 这里设置房间名
        var socket = new WebSocket(`ws://${window.location.host}/ws/chat/${roomName}/`);

        socket.onopen = function(e) {
            console.log("WebSocket连接已打开");
        };

        socket.onmessage = function(event) {
            var data = JSON.parse(event.data);
            var messagesDiv = document.getElementById('messages');
            messagesDiv.innerHTML += `<p>${data.message}</p>`;
        };

        function sendMessage() {
            var input = document.getElementById("messageInput");
            socket.send(JSON.stringify({message: input.value}));
            input.value = '';
        }

        socket.onerror = function(error) {
            console.error("WebSocket发生错误: ", error);
        };
    </script>
</body>
</html>

## 七、启动你的应用

现在可以启动你的Django开发服务器，并通过访问ws://localhost:8000/ws/chat/example/来测试WebSocket连接。

python manage.py runserver

以上就是如何在使用Django-Ninja框架的基础上，结合Django Channels来构建一个简单的实时聊天室应用的完整步骤。通过这个例子，你可以了解到如何在Django项目中引入WebSocket支持，并利用Django Channels实现简单的多用户实时通信。希望这篇教程能够帮助你在未来开发更加丰富的实时应用。

Coderabo

关注

16
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
实时交互新篇章：Django-Ninja与Django Channels携手打造高效WebSocket应用

在项目根目录下创建一个routing.py]),})这里我们定义了一个WebSocket路由，指向chat应用中的类，并且传入了房间名称参数。
复制链接

扫一扫