基于Python+Django框架的多人在线聊天程序

男娘i 2024-04-07 14:33 64阅读 0赞

## 基于Python的多人在线聊天程序 ##

### 项目简介 ###

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

![在这里插入图片描述][99abce7b23ba4a2ab9ee52cade02b32b.png_pic_center]

经过开发，本项目最终实现了项目任务 2. 的大体功能，实现了多用户之间的在线聊天室。

### 项目分析 ###

本项目采用 Django 框架，后端以 Python 为语言搭建 Web 界面作为聊天室的载体。通过借助Django的channels插件，在Django框架中实现基于Websocket 协议的数据传输，实现项目要求的具体任务。

### 实例展示 ###

进入本地虚拟环境，启动 Django 服务器：

![在这里插入图片描述][690b3d995e234118a0ffd542a6399ec4.png]

访问 进入项目主页面：

![在这里插入图片描述][9849ddcd82f44aad8506e3e8e06f563c.png]

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

![在这里插入图片描述][fb58b31f84b44806951e8b124dc43630.png]

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

![在这里插入图片描述][d9582d8552854d24bc868c51bfc0416e.png]  
![在这里插入图片描述][e8feff358d1e417780dff7493faff5fb.png]  
![在这里插入图片描述][00de76d8a5b34c51a3ac5e44cb956ad0.png]

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

项目目录：

![在这里插入图片描述][6cf1509195e44d4db50f06b37e5ec10d.png]  
![在这里插入图片描述][29fc2c2cd8b146908a2f408c53f5b4f9.png]

核心代码： 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’)

[99abce7b23ba4a2ab9ee52cade02b32b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/fae0b389e7074042bd844fb558066c3a.png
[690b3d995e234118a0ffd542a6399ec4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/dd756e18be254665a62170cd354c5bd0.png
[9849ddcd82f44aad8506e3e8e06f563c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/358a923943c74652927d67fef69df045.png
[fb58b31f84b44806951e8b124dc43630.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/edd0d41aa98842cc9c6f13f8546f925e.png
[d9582d8552854d24bc868c51bfc0416e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f83fb85aa92844de8a593871fc0931b5.png
[e8feff358d1e417780dff7493faff5fb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f8450bef90834d2b9e5bfcafd43866fb.png
[00de76d8a5b34c51a3ac5e44cb956ad0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/cf62f4e8af924303b25459c1f6fd721f.png
[6cf1509195e44d4db50f06b37e5ec10d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/1858884965044a85b009a1db769e808a.png
[29fc2c2cd8b146908a2f408c53f5b4f9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8417162c12a74cd089ce42e60724a381.png