使用Django Channels和WebSocket构建聊天应用

news2024/10/6 6:44:35

在这里插入图片描述

一、引言

WebSocket提供了一种在客户端和服务器之间进行实时双向通信的方式。结合Django Channels，我们可以轻松地在Django项目中实现WebSocket功能。本文将通过一个简单的聊天应用示例，展示如何使用Django Channels和WebSocket。

二、环境搭建

项目的目录结构大致如下：

my_project/
├── application/
│   ├── __init__.py
│   ├── asgi.py
│   ├── routings.py
│   ├── settings.py
│   ├── urls.py
│   ├── wsgi.py
├── apps/
│   ├── app03/
│   │   ├── __init__.py
│   │   ├── consumers.py
│   │   ├── models.py
│   │   ├── tests.py
│   │   ├── views.py
│   │   └── routings.py
│   └── __init__.py
├── templates/
│   ├── chat.html
│   ├── A.html
│   └── B.html
└── manage.py
1.首先，确保你的系统中已安装Python和Django。然后，通过pip安装Channels：
pip install channels
2.配置settings.py

在application/settings.py中，需要添加Channels相关的配置：

  1. 安装Channels
INSTALLED_APPS = [
    # ...
    'channels',
]
  1. 配置ASGI应用
ASGI_APPLICATION = 'application.asgi.application'
  1. Channels的Redis配置
CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels_redis.core.RedisChannelLayer',
        'CONFIG': {
            "hosts": [('127.0.0.1', 6379)],
        },
    },
}
3.确保您已安装channels_redis：
pip install channels_redis

并且有一个运行的Redis实例：（启动本地的redis）
在这里插入图片描述

在Django项目中，创建一个新的ASGI应用配置文件asgi.py：

import os

import django
from django.core.asgi import get_asgi_application
from channels.routing import ProtocolTypeRouter, URLRouter
from channels.auth import AuthMiddlewareStack

from application.routings import websocket_urlpatterns

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'application.settings')
django.setup()
application = ProtocolTypeRouter({
    'http': get_asgi_application(),
    "websocket": AuthMiddlewareStack(
        URLRouter(
            websocket_urlpatterns
        )
    ),
})

在application/routings.py中，导入你的WebSocket路由模式：

from apps.app03.routings import ws_urlpatterns
websocket_urlpatterns = []
websocket_urlpatterns += ws_urlpatterns

三、创建WebSocket Consumer

在application/views.py中，创建一个ChatConsumer类来处理WebSocket连接：

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 = 'chat_%s' % self.room_name

        # Join room group
        await self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )

        await self.accept()

    async def disconnect(self, close_code):
        # Leave room group
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    # Receive message from WebSocket
    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']

        # Send message to room group
        await self.channel_layer.group_send(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': message
            }
        )

        # 控制台输出
        print(message)

    # Receive message from room group
    async def chat_message(self, event):
        message = event['message']

        # Send message to WebSocket
        await self.send(text_data=json.dumps({
            'message': message
        }))

在app03/routings.py中：

# -*- coding: utf-8 -*-
from django.urls import path
from apps.app03.views import ChatConsumer

# 定义WebSocket路由模式
ws_urlpatterns = [
    path('ws/chat/<room_name>/', ChatConsumer.as_asgi()),
]

四、前端实现

创建一个HTML文件（例如chat.html）来作为聊天室的界面：

<!DOCTYPE html>
<html>
<head>
    <title>Chat Example</title>
</head>
<body>
    <h1>Chat Room</h1>
    <div id="chat-messages"></div>
    <!-- 添加输入框和发送按钮 -->
    <input type="text" id="chat-message-input" placeholder="Type your message...">
    <button id="chat-message-send">Send</button>

    <script>
        const chatSocket = new WebSocket('ws://127.0.0.1:8000/ws/chat/room_name/');

        chatSocket.onmessage = function(e) {
            const data = JSON.parse(e.data);
            console.log(data.message);
            const messageElement = document.createElement('p');
            messageElement.textContent = data.message;
            document.getElementById('chat-messages').appendChild(messageElement);
        };

        chatSocket.onclose = function(e) {
            console.error('Chat socket closed unexpectedly');
        };

        // 绑定发送按钮的点击事件
        document.getElementById('chat-message-send').onclick = function(e) {
            const messageInputDom = document.getElementById('chat-message-input');
            const message = messageInputDom.value;
            chatSocket.send(JSON.stringify({
                'message': message
            }));
            messageInputDom.value = '';
        };
    </script>
</body>
</html>

四、测试和运行

在完成所有必要的配置和编码之后，您需要测试您的聊天应用以确保其正常工作。以下是测试和运行聊天应用的详细步骤：

1. 启动Django开发服务器

在命令行中，运行以下命令以启动Django开发服务器：

python manage.py runserver 0.0.0.0:8001  # 这里使用8001端口
2. 启动Asgi服务器

要启动使用Django Channels的WebSocket服务，您可以使用daphne命令。daphne是一个ASGI服务器，专门用于运行Channels应用程序。以下是使用daphne启动WebSocket服务的步骤：

  1. 安装Daphne（如果尚未安装）：
    在命令行中运行以下命令：

    pip install daphne

  2. 启动Daphne服务器：

    • 导航到您的项目目录（例如my_project/）。

    • 运行以下命令：

      daphne application.asgi:application

      这个命令告诉daphne使用application.asgi模块中的application对象作为ASGI应用。这通常是您在application/asgi.py文件中定义的内容。

    • 启动成功效果：

      (lyadmin) D:\ProjectPython\Test\drf_test>daphne application.asgi:application
D:\ProjectPython\Test\drf_test
2024-06-06 11:23:21,620 INFO     Starting server at tcp:port=8000:interface=127.0.0.1
2024-06-06 11:23:21,620 INFO     HTTP/2 support enabled
2024-06-06 11:23:21,620 INFO     Configuring endpoint tcp:port=8000:interface=127.0.0.1
2024-06-06 11:23:21,620 INFO     Listening on TCP address 127.0.0.1:8000

  3. 确保Redis正在运行（如果使用Redis作为通道层）

2. 打开聊天室界面

在您的网络浏览器中，打开聊天室的界面。这通常是您的chat.html模板对应的URL。
在这里插入图片描述
在这里插入图片描述

3. 连接WebSocket

在浏览器中打开聊天室界面时，打开浏览器的开发者工具（通常是F12打开），使用Postman测试：

  1. 建立连接
    在这里插入图片描述
    在这里插入图片描述

  2. 发送简单消息
    在这里插入图片描述

  3. 聊天消息事件，用于在聊天应用中发送和接收消息
    在这里插入图片描述

  4. 断开连接
    在这里插入图片描述

示例二：测试聊天应用

1. 修改WebSocket Consumer
在application/views.py中，创建一个ChatConsumer类来处理WebSocket连接：

# ChatConsumer.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 = 'chat_%s' % self.room_name

        # Join room group
        await self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )

        await self.accept()

    async def disconnect(self, close_code):
        # Leave room group
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    # Receive message from WebSocket
    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']

        # Send message to both room groups with origin information
        await self.channel_layer.group_send(
            self.room_group_name,  # Send to the same room group
            {
                'type': 'chat_message',
                'message': message,
                'room_origin': self.room_group_name
            }
        )
        await self.channel_layer.group_send(
            'chat_room_b' if self.room_group_name == 'chat_room_a' else 'chat_room_a',
            # Send to the opposite room group
            {
                'type': 'chat_message',
                'message': message,
                'room_origin': self.room_group_name
            }
        )

        # Console output
        print(message)

    # Receive message from room group
    async def chat_message(self, event):
        message = event['message']
        room_origin = event['room_origin']

        # Send message to WebSocket with origin information
        await self.send(text_data=json.dumps({
            'message': message,
            'room_origin': room_origin
        }))

2. 前端实现
创建两个HTML文件（例如A.html\B.html）来作为聊天室的界面：

  • 聊天室A页面：
<!-- 聊天室A的HTML页面 -->
<!DOCTYPE html>
<html>
<head>
    <title>Chat Room A</title>
</head>
<body>
<h1>Chat Room A</h1>
<div id="chat-messages"></div>
<input type="text" id="chat-message-input" placeholder="Type your message...">
<button id="chat-message-send">Send</button>

<script>
    const chatSocket = new WebSocket('ws://127.0.0.1:8000/ws/chat/room_a/');

    chatSocket.onmessage = function (e) {
        const data = JSON.parse(e.data);
        const messageElement = document.createElement('p');
        // 根据消息来源格式化消息
        if (data.room_origin === 'chat_room_a') {
            messageElement.textContent = `[chat_room_a] ${data.message}`;
        } else {
            messageElement.textContent = `[chat_room_b] ${data.message}`;
        }
        document.getElementById('chat-messages').appendChild(messageElement);
    };


    chatSocket.onclose = function (e) {
        console.error('Chat socket closed unexpectedly');
    };

    document.getElementById('chat-message-send').onclick = function (e) {
        const messageInputDom = document.getElementById('chat-message-input');
        const message = messageInputDom.value;
        chatSocket.send(JSON.stringify({
            'message': message
        }));
        messageInputDom.value = '';
    };
</script>
</body>
</html>
  • 聊天室B页面：
<!-- 聊天室B的HTML页面 -->
<!DOCTYPE html>
<html>
<head>
    <title>Chat Room B</title>
</head>
<body>
<h1>Chat Room B</h1>
<div id="chat-messages"></div>
<input type="text" id="chat-message-input" placeholder="Type your message...">
<button id="chat-message-send">Send</button>

<script>
    const chatSocket = new WebSocket('ws://127.0.0.1:8000/ws/chat/room_b/');

    chatSocket.onmessage = function (e) {
        const data = JSON.parse(e.data);
        const messageElement = document.createElement('p');
        // 根据消息来源格式化消息
        if (data.room_origin === 'chat_room_a') {
            messageElement.textContent = `[chat_room_a] ${data.message}`;
        } else {
            messageElement.textContent = `[chat_room_b] ${data.message}`;
        }
        document.getElementById('chat-messages').appendChild(messageElement);
    };


    chatSocket.onclose = function (e) {
        console.error('Chat socket closed unexpectedly');
    };

    document.getElementById('chat-message-send').onclick = function (e) {
        const messageInputDom = document.getElementById('chat-message-input');
        const message = messageInputDom.value;
        chatSocket.send(JSON.stringify({
            'message': message
        }));
        messageInputDom.value = '';
    };
</script>
</body>
</html>

3. 功能测试：重启ASGI服务器，分别打开A.html、B.html测试

启动ASGI服务器命令：

 daphne application.asgi:application

在这里插入图片描述

结论

通过本文，你现在应该能够使用Django Channels和WebSocket创建一个基本的聊天应用。你可以在此基础上添加更多功能，如用户认证、消息存储等，来丰富你的应用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1796378.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Spring Boot 整合开源 Tess4J库 实现OCR图片文字识别

Spring Boot 整合开源 Tess4J库 实现OCR图片文字识别

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…
阅读更多...
Linux基础 （十二）：Linux 线程的创建与同步

Linux基础 （十二）：Linux 线程的创建与同步

本篇博客详细介绍与线程有关的内容&#xff0c;这部分也是笔试面试的重点&#xff0c;需要我们对线程有深刻的理解&#xff0c;尤其是线程的并发运行以及线程同步的控制&#xff01;接下来&#xff0c;让我们走进线程的世界&#xff0c;去理解线程&#xff0c;使用线程&#xf…
阅读更多...
修改west扩展命令的路径

修改west扩展命令的路径

west命令是zephyr工程中非常重要的工具。使用west命令&#xff0c;可以高效的创建工程&#xff0c;管理代码&#xff0c;此外&#xff0c;通过扩展命令&#xff0c;还可以支持编译&#xff0c;烧录等功能。 从下图中可以看出&#xff0c;extension commands from project mani…
阅读更多...
线性代数|机器学习-P8矩阵低秩近似eckart-young

线性代数|机器学习-P8矩阵低秩近似eckart-young

文章目录 1. SVD奇异值分解2. Eckart-Young2.1 范数 3. Q A Q U Σ V T QAQU\Sigma V^T QAQUΣVT4. 主成分分析图像表示 1. SVD奇异值分解 我们知道&#xff0c;对于任意矩阵A来说&#xff0c;我们可以将其通过SVD奇异值分解得到 A U Σ V T AU\Sigma V^T AUΣVT&#xff0…
阅读更多...
[ue5]建模场景学习笔记（4）——必修内容可交互的地形，交互沙（1）

[ue5]建模场景学习笔记（4）——必修内容可交互的地形，交互沙（1）

1.需求分析&#xff1a; 现在的沙漠场景仅仅只是一张贴图&#xff0c;人物走过不会留下任何痕迹&#xff0c;很不真实&#xff0c;尝试优化一下&#xff0c;做出可交互的沙漠效果。 2.操作实现&#xff1a; 1.思路&#xff1a;这是一个相对复杂的工程&#xff0c;要考虑玩家踩…
阅读更多...
深入理解C++三五零法则

深入理解C++三五零法则

三五零法则就是三法则&#xff08;The Rule of Three&#xff09;、五法则&#xff08;The Rule of Five&#xff09;、零法则&#xff08;The Rule of Zero&#xff09;。三五零法则是和C的特殊成员函数有关&#xff0c;特别是那些涉及对象如何被创建、复制、移动和销毁的函数…
阅读更多...
ESD防护SP3232E真+3.0V至+5.5V RS-232收发器

ESD防护SP3232E真+3.0V至+5.5V RS-232收发器

特征 采用3.0V至5.5V电源&#xff0c;符合真正的EIA/TIA-232-F标准 满载时最低 120Kbps 数据速率 1μA 低功耗关断&#xff0c;接收器处于活动状态 &#xff08;SP3222E&#xff09; 可与低至 2.7V 电源的 RS-232 互操作 增强的ESD规格&#xff1a; 15kV人体模型 15kV IEC1000…
阅读更多...
Java Web学习笔记17——Vue快速入门

Java Web学习笔记17——Vue快速入门

什么是Vue&#xff1f; Vue是一套前端框架&#xff0c;免除原生JavaScript中的DOM操作&#xff0c;简化书写。 基于MVVM&#xff08;Model-View-ViewModel&#xff09;思想&#xff0c;实现数据的双向绑定&#xff0c;将编程的关注点放在数据上。 官网&#xff1a;https://v…
阅读更多...
概率分析和随机算法

概率分析和随机算法

目录 雇佣问题 概率分析 随机算法 生日悖论 随机算法 概率分析 球与箱子 总结 雇佣问题 有n个候选人面试&#xff0c;如果面试者比目前雇佣者的分数高&#xff0c;评价更好&#xff0c;那么就辞掉当前雇佣者&#xff0c;而去聘用面试者&#xff0c;否则继续面试新的候…
阅读更多...
区块链简要介绍及运用的技术

区块链简要介绍及运用的技术

一、区块链的由来 区块链概念最早是从比特币衍生出来的。 比特币&#xff08;Bitcoin&#xff09;诞生于2008年&#xff0c;是由一个名叫中本聪&#xff08;Satoshi Nakamoto&#xff09;的人首次提出&#xff0c;这个人非常神秘&#xff0c;至今没有他的任何准确信息。在提出…
阅读更多...
三、【源码】Mapper XML的解析和注册使用

三、【源码】Mapper XML的解析和注册使用

源码地址&#xff1a;https://github.com/mybatis/mybatis-3/ 仓库地址&#xff1a;https://gitcode.net/qq_42665745/mybatis/-/tree/03-parse-mapperXML Mapper XML的解析和注册使用 流程&#xff1a; 1.Resources加载MyBatis配置文件生成Reader字符流 2.SqlSessionFact…
阅读更多...
Activity-＞Activity中动态添加Fragment-＞add和replace方式添加的区别

Activity-＞Activity中动态添加Fragment-＞add和replace方式添加的区别

XML文件 Activity布局文件R.layout.activity_main <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:id"id/root_ll"android:orientation"v…
阅读更多...
一个简单好用的 C# Animation Easing 缓动动画类库

一个简单好用的 C# Animation Easing 缓动动画类库

文章目录 1. 类库说明2.使用步骤2.1 创建一个Windows Form 项目2.2 安装类库2.3 编码效果3.代码下载1. 类库说明 App.Animations 类库是一个很精炼、好用的 csharp easing 动画库 基于 net-standard 2.0提供 Fluent API，写代码非常舒服。支持多个参数同时参与动画。自带了十几…
阅读更多...
Flutter基础 -- Flutter常用组件

Flutter基础 -- Flutter常用组件

目录 1. 文本组件 Text 1.1 基础用法 1.2 Text 定义 1.3 Text 示例 1.4 Text.rich、RichText 、TextSpan 1.5 RichText 示例 2. 导入资源 2.1 加入资源 2.2 加入图片 3. 图片组件 image 3.1 colorBlendMode 混合参数 3.2 fit 图片大小适配 3.3 ImageProvider 图片…
阅读更多...
【Python报错】已解决NameError: name ‘xxx‘ is not defined

【Python报错】已解决NameError: name ‘xxx‘ is not defined

解决Python报错&#xff1a;NameError: name ‘xxx’ is not defined 在Python编程中&#xff0c;NameError是一个非常常见的错误类型&#xff0c;它发生在你尝试访问一个未被定义的变量时。本文将介绍这种错误的原因&#xff0c;以及如何通过具体的代码示例来解决这个问题。 …
阅读更多...
深度学习笔记: 最详尽LinkedIn Feed 排名系统设计

深度学习笔记: 最详尽LinkedIn Feed 排名系统设计

欢迎收藏Star我的Machine Learning Blog:https://github.com/purepisces/Wenqing-Machine_Learning_Blog。如果收藏star, 有问题可以随时与我交流, 谢谢大家&#xff01; LinkedIn Feed 排名 1. 问题陈述 设计一个个性化的LinkedIn Feed&#xff0c;以最大化用户的长期参与度…
阅读更多...
【MMU】——ARM 一级页表

【MMU】——ARM 一级页表

文章目录 一级页表项即 entry 的格式如下 从上图可以看出 L1 页表项有四种可能类型 产生中止异常的故障条目。这可能是预取或数据中止、取决于访问类型。这实际上表示虚拟地址未映射 bit[1:0] = 00指向 L2 转换表的条目。这样就能将 1MB 的内存分页 bit[1:0] = 01。1MB 段转换…
阅读更多...
问题：8255A的端口A工作在方式2时，使用端口C的______作为与CPU和外部设备的联络信号。 #媒体#经验分享#其他

问题：8255A的端口A工作在方式2时，使用端口C的______作为与CPU和外部设备的联络信号。 #媒体#经验分享#其他

问题&#xff1a;8255A的端口A工作在方式2时&#xff0c;使用端口C的______作为与CPU和外部设备的联络信号。 参考答案如图所示
阅读更多...
《互联网政务应用安全管理规定》电子邮件安全如何整改？

《互联网政务应用安全管理规定》电子邮件安全如何整改？

继上篇文章&#xff08;解读《互联网政务应用安全管理规定》网络和数据安全中的身份认证和审计合规&#xff09;之后&#xff0c;本篇文章继续解读第五章“电子邮件安全”&#xff0c;为党政机关事业单位提供电子邮件系统整改思路。 “电子邮件安全”内容从第三十一条到第三十…
阅读更多...
vscode 离线下载指定版本插件和安装方法

vscode 离线下载指定版本插件和安装方法

1、背景 由于不同的vscode版本需要安装对应的插件版本&#xff0c;一般情况下&#xff0c;vscode版本会落后于vscode插件库提供的可以下载的插件版本&#xff0c;网页一般只会提供最新的插件下载版本&#xff0c;因此我们需要下载指定的版本需要采取一些措施。 2、获取需要安…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023