当前位置：首页 > news >正文

Django实时通信应用：Django 3 by Example第十三章WebSocket聊天功能实现

news 2026/7/27 14:58:15

Django实时通信应用：Django 3 by Example第十三章WebSocket聊天功能实现

【免费下载链接】Django-3-by-ExampleDjango 3 by Example (3rd Edition) published by Packt项目地址: https://gitcode.com/gh_mirrors/dj/Django-3-by-Example

Django 3 by Example中的第十三章提供了一个完整的实时聊天功能实现方案，通过WebSocket技术为在线教育平台构建了高效的课程讨论系统。这个功能允许学生和教师在课程页面内进行即时交流，极大提升了在线学习的互动性和参与感。

📌 核心技术栈解析

Django实现实时通信主要依赖以下组件：

Channels框架：扩展Django以支持WebSocket协议，实现异步通信
ASGI服务器：替代传统WSGI服务器，处理异步请求
JavaScript WebSocket API：客户端与服务器建立持久连接

项目中负责聊天功能的核心模块位于Chapter13/educa/chat/目录，包含完整的消费者、路由和视图实现。

🔨 实现步骤详解

1. 聊天应用结构设计

Django Channels采用"消费者"(Consumer)概念处理WebSocket连接，类似传统Django视图处理HTTP请求。项目的聊天应用结构如下：

chat/ ├── consumers.py # WebSocket连接处理器 ├── routing.py # WebSocket路由配置 ├── views.py # 聊天页面视图 ├── urls.py # 页面URL路由 └── templates/chat/room.html # 聊天界面模板

2. WebSocket连接处理核心代码

Chapter13/educa/chat/consumers.py实现了聊天功能的核心逻辑，包括连接建立、消息接收和广播：

class ChatConsumer(AsyncWebsocketConsumer): async def connect(self): self.user = self.scope['user'] self.id = self.scope['url_route']['kwargs']['course_id'] self.room_group_name = 'chat_%s' % self.id # 加入房间组 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 ) # 从WebSocket接收消息 async def receive(self, text_data): text_data_json = json.loads(text_data) message = text_data_json['message'] now = timezone.now() # 发送消息到房间组 await self.channel_layer.group_send( self.room_group_name, { 'type': 'chat_message', 'message': message, 'user': self.user.username, 'datetime': now.isoformat(), } ) # 从房间组接收消息 async def chat_message(self, event): # 发送消息到WebSocket await self.send(text_data=json.dumps(event))

3. 前端实时通信实现

聊天界面模板Chapter13/educa/chat/templates/chat/room.html包含了完整的JavaScript客户端代码，负责建立WebSocket连接并处理消息收发：

<div id="chat"></div> <div id="chat-input"> <input id="chat-message-input" type="text"> <input id="chat-message-submit" type="submit" value="Send"> </div> <script> var url = 'ws://' + window.location.host + '/ws/chat/room/' + '{{ course.id }}/'; var chatSocket = new WebSocket(url); chatSocket.onmessage = function(e) { var data = JSON.parse(e.data); var message = data.message; var datetime = new Date(data.datetime).toLocaleString('en', {hour: 'numeric', minute: 'numeric'}); var isMe = data.user === '{{ request.user }}'; var source = isMe ? 'me' : 'other'; var name = isMe ? 'Me' : data.user; $('#chat').append('<div class="message ' + source + '">' + '<strong>' + name + '</strong> ' + '<span class="date">' + datetime + '</span><br>' + message + '</div>'); $('#chat').scrollTop($('#chat')[0].scrollHeight); }; $('#chat-message-submit').click(function() { var message = $('#chat-message-input').val(); if(message) { chatSocket.send(JSON.stringify({'message': message})); $('#chat-message-input').val('').focus(); } }); $('#chat-message-input').keyup(function(e) { if (e.which === 13) $('#chat-message-submit').click(); }); </script>

4. 路由配置

WebSocket路由配置在Chapter13/educa/chat/routing.py中定义：

from django.urls import re_path from . import consumers websocket_urlpatterns = [ re_path(r'ws/chat/room/(?P<course_id>\d+)/$', consumers.ChatConsumer), ]

HTTP页面路由在Chapter13/educa/chat/urls.py中定义：

from django.urls import path from . import views app_name = 'chat' urlpatterns = [ path('room/<int:course_id>/', views.course_chat_room, name='course_chat_room'), ]