Flask与Django如何集成WebSocket聊天功能

发布时间：2024-11-14 18:38:08 作者：小樊
来源：亿速云阅读：78

要在 Flask 和 Django 中集成 WebSocket 聊天功能，你可以使用 Django Channels 扩展。Django Channels 是一个基于 ASGI（Asynchronous Server Gateway Interface）的扩展，它允许 Django 项目处理 WebSocket、HTTP/2 和其他异步协议。

以下是在 Flask 和 Django 中集成 WebSocket 聊天功能的步骤：

安装 Django Channels：

pip install channels

在 Django 项目中配置 Channels：

在 settings.py 文件中，将 channels 添加到 INSTALLED_APPS 列表中，并配置 ASGI 应用：

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

# 使用 channels 层作为默认后端
CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels.layers.InMemoryChannelLayer',
    },
}

# 将 ASGI 应用设置为默认应用
ASGI_APPLICATION = '<your_project_name>.asgi.application'

创建 ASGI 文件：

在你的项目根目录下创建一个名为 asgi.py 的文件，内容如下：

import os
from django.core.asgi import get_asgi_application
from channels.routing import ProtocolTypeRouter, URLRouter
from channels.auth import AuthMiddlewareStack
import chat.routing

os.environ.setdefault('DJANGO_SETTINGS_MODULE', '<your_project_name>.settings')

application = ProtocolTypeRouter({
    "http": get_asgi_application(),
    "websocket": AuthMiddlewareStack(
        URLRouter(
            chat.routing.websocket_urlpatterns
        )
    ),
})

创建 WebSocket 路由：

在 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 消费者：

在 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}'

        # 加入房间
        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']

        await self.send(text_data=json.dumps({
            'message': message
        }))

创建前端页面：

在 chat 应用目录下创建一个名为 templates 的文件夹，并在其中创建一个名为 chat.html 的文件，内容如下：

<!DOCTYPE html>
<html>
<head>
    <title>Chat Room</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>
</head>
<body>
    <div id="chat-log"></div>
    <input id="chat-message-input" type="text" size="100">
    <input id="chat-message-submit" type="button" value="Send">

    <script>
        const socket = io('ws://' + document.domain + ':' + location.port + '/ws/chat/' + room_name + '/');

        socket.on('chat_message', function(msg) {
            const item = document.createElement('li');
            item.textContent = msg;
            document.getElementById('chat-log').appendChild(item);
        });

        document.getElementById('chat-message-input').focus();
        document.getElementById('chat-message-input').onkeyup = function(e) {
            if (e.keyCode === 13) {  // 按回车键发送消息
                document.getElementById('chat-message-submit').click();
            }
        };

        document.getElementById('chat-message-submit').onclick = function() {
            const input = document.getElementById('chat-message-input');
            const message = input.value;
            socket.send(JSON.stringify({
                'message': message
            }));
            input.value = '';
        };
    </script>
</body>
</html>

创建视图和 URL 配置：

在 chat 应用目录下创建一个名为 views.py 的文件，内容如下：

from django.shortcuts import render

def chat(request, room_name):
    return render(request, 'chat.html', {
        'room_name': room_name
    })

在 chat 应用目录下创建一个名为 urls.py 的文件，内容如下：

from django.urls import path
from . import views

urlpatterns = [
    path('<str:room_name>/', views.chat, name='chat'),
]

在项目的 urls.py 文件中包含 chat 应用的 URL 配置：

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('chat.urls')),
]

现在，你可以在浏览器中访问 /chat/your_room_name/ 来查看和参与 WebSocket 聊天。请注意，这里的示例仅用于演示目的，实际项目中可能需要根据需求进行调整。

Flask与Django如何集成WebSocket聊天功能

相关阅读