您好,登錄后才能下訂單哦!
要在 Flask 和 Django 中集成 WebSocket 聊天功能,你可以使用 Django Channels 擴展。Django Channels 是一個基于 ASGI(Asynchronous Server Gateway Interface)的擴展,它允許 Django 項目處理 WebSocket、HTTP/2 和其他異步協議。
以下是在 Flask 和 Django 中集成 WebSocket 聊天功能的步驟:
pip install 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.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
)
),
})
在 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()),
]
在 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>
在 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 聊天。請注意,這里的示例僅用于演示目的,實際項目中可能需要根據需求進行調整。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。