本项目的选题为项目六:聊天程序,具体项目任务如下所示:

经过开发,本项目最终实现了项目任务 2. 的大体功能,实现了多用户之间的在线聊天室。
本项目采用 Django 框架,后端以 Python 为语言搭建 Web 界面作为聊天室的载体。通过借助Django的channels插件,在Django框架中实现基于Websocket 协议的数据传输,实现项目要求的具体任务。
进入本地虚拟环境,启动 Django 服务器:

访问 进入项目主页面:

在输入框内输入聊天室名称“test”,进入名为 test 的聊天室:

新开两个网页,分别进入”test”和“anothertest”两个聊天室。在聊天室中发送内容“Hello world!”,检查不同聊天室的收到情况:



可以看到,处在同一聊天室的两个客户端实现了在线聊天,处在不同聊天室的客户端之间无法进行在线聊天。
项目目录:


核心代码: consumers.py: 负责处理通过 websocket 路由转发过来的请求和数据,类似于
“views.py”的功能。
import json from asgiref.sync import async_to_sync from channels.generic.websocket import WebsocketConsumer import datetime
class ChatConsumer(WebsocketConsumer): def connect(self):
self.room_name = self.scope['url_route']['kwargs']['room_name'] self.room_group_name = 'chat_%s' % self.room_name
async_to_sync(self.channel_layer.group_add)( self.room_group_name, self.channel_name
)
self.accept()
def disconnect(self, close_code):
async_to_sync(self.channel_layer.group_discard)( self.room_group_name, self.channel_name
)
def receive(self, text_data):
text_data_json = json.loads(text_data) message = text_data_json['message']
async_to_sync(self.channel_layer.group_send)( self.room_group_name,
{
'type': 'chat_message',
'message': message
}
)
def chat_message(self, event): message = event['message']
datetime_str = datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')
self.send(text_data=json.dumps({
'message': f'{datetime_str}:{message}'
}))
room.html:前端关于即时通信的实现。
<!DOCTYPE html>
{%load static%}
<html>
<head>
<meta charset="utf-8"/>
<title>Chat Room</title>
<link rel="stylesheet" type="text/css" href="{% static
'room.css' %}" charset="utf-8"/>
</head>
<body>
<div class="header">
<h1>在线聊天室 By SJZ</h1>
</div>
<br></br>
<textarea id="chat-log" cols="100" rows="20" readonly="readonly"></textarea><br>
<input id="chat-message-input" type="text" size="100">
<input id="chat-message-submit" type="button" value="Send">
{{ room_name|json_script:"room-name" }}
<script> const roomName = JSON.parse(document.getElementById('roomname').textContent);
const wss_protocol = (window.location.protocol == 'https:') ?
'wss://': 'ws://'; const chatSocket = new WebSocket( wss_protocol + window.location.host + '/ws/chat/' + roomName + '/' );
chatSocket.onopen = function(e) { document.querySelector('#chat-log').value += ('[公告]欢迎来到' + roomName + '聊天室。请遵守国家法律法规,文明发言!\n')
document.querySelector(‘#chat-log’).value += (‘[公告]欢迎来到’ + roomName + ‘聊天室。请遵守国家法律法规,文明发言!\n’)