要在 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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
