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

發(fā)布時間：2024-11-14 18:38:08 來源：億速云閱讀：78 作者：小樊欄目：編程語言

要在 Flask 和 Django 中集成 WebSocket 聊天功能，你可以使用 Django Channels 擴展。Django Channels 是一個基于 ASGI（Asynchronous Server Gateway Interface）的擴展，它允許 Django 項目處理 WebSocket、HTTP/2 和其他異步協(xié)議。

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

安裝 Django Channels：

pip install channels

在 Django 項目中配置 Channels：

在 settings.py 文件中，將 channels 添加到 INSTALLED_APPS 列表中，并配置 ASGI 應(yīng)用：

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

# 使用 channels 層作為默認(rèn)后端
CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels.layers.InMemoryChannelLayer',
    },
}

# 將 ASGI 應(yīng)用設(shè)置為默認(rèn)應(yīng)用
ASGI_APPLICATION = '<your_project_name>.asgi.application'

創(chuàng)建 ASGI 文件：

在你的項目根目錄下創(chuàng)建一個名為 asgi.py 的文件，內(nèi)容如下：

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

創(chuàng)建 WebSocket 路由：

在 chat 應(yīng)用目錄下創(chuàng)建一個名為 routing.py 的文件，內(nèi)容如下：

from django.urls import re_path
from . import consumers

websocket_urlpatterns = [
    re_path(r'ws/chat/(?P<room_name>\w+)/$', consumers.ChatConsumer.as_asgi()),
]

創(chuàng)建 WebSocket 消費者：

在 chat 應(yīng)用目錄下創(chuàng)建一個名為 consumers.py 的文件，內(nèi)容如下：

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']

        # 向房間發(fā)送消息
        await self.channel_layer.group_send(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': message
            }
        )

    async def chat_message(self, event):
        # 從房間接收消息并發(fā)送給客戶端
        message = event['message']

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

創(chuàng)建前端頁面：

在 chat 應(yīng)用目錄下創(chuàng)建一個名為 templates 的文件夾，并在其中創(chuàng)建一個名為 chat.html 的文件，內(nèi)容如下：

<!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) {  // 按回車鍵發(fā)送消息
                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>

創(chuàng)建視圖和 URL 配置：

在 chat 應(yīng)用目錄下創(chuàng)建一個名為 views.py 的文件，內(nèi)容如下：

from django.shortcuts import render

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

在 chat 應(yīng)用目錄下創(chuàng)建一個名為 urls.py 的文件，內(nèi)容如下：

from django.urls import path
from . import views

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

在項目的 urls.py 文件中包含 chat 應(yīng)用的 URL 配置：

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

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

現(xiàn)在，你可以在瀏覽器中訪問 /chat/your_room_name/ 來查看和參與 WebSocket 聊天。請注意，這里的示例僅用于演示目的，實際項目中可能需要根據(jù)需求進行調(diào)整。

向AI問一下細節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽