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

2024-06-07 08:52
文章标签 channels 使用 构建 应用 django websocket 聊天

本文主要是介绍使用Django Channels和WebSocket构建聊天应用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述

一、引言

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 osimport django
from django.core.asgi import get_asgi_application
from channels.routing import ProtocolTypeRouter, URLRouter
from channels.auth import AuthMiddlewareStackfrom application.routings import websocket_urlpatternsos.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 AsyncWebsocketConsumerclass 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 groupawait self.channel_layer.group_add(self.room_group_name,self.channel_name)await self.accept()async def disconnect(self, close_code):# Leave room groupawait self.channel_layer.group_discard(self.room_group_name,self.channel_name)# Receive message from WebSocketasync def receive(self, text_data):text_data_json = json.loads(text_data)message = text_data_json['message']# Send message to room groupawait self.channel_layer.group_send(self.room_group_name,{'type': 'chat_message','message': message})# 控制台输出print(message)# Receive message from room groupasync def chat_message(self, event):message = event['message']# Send message to WebSocketawait 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 AsyncWebsocketConsumerclass 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 groupawait self.channel_layer.group_add(self.room_group_name,self.channel_name)await self.accept()async def disconnect(self, close_code):# Leave room groupawait self.channel_layer.group_discard(self.room_group_name,self.channel_name)# Receive message from WebSocketasync 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 informationawait 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 outputprint(message)# Receive message from room groupasync def chat_message(self, event):message = event['message']room_origin = event['room_origin']# Send message to WebSocket with origin informationawait 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创建一个基本的聊天应用。你可以在此基础上添加更多功能，如用户认证、消息存储等，来丰富你的应用。

这篇关于使用Django Channels和WebSocket构建聊天应用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1038714。

相关文章

Python结合PyWebView库打造跨平台桌面应用

Python结合PyWebView库打造跨平台桌面应用

《Python结合PyWebView库打造跨平台桌面应用》随着Web技术的发展,将HTML/CSS/JavaScript与Python结合构建桌面应用成为可能,本文将系统讲解如何使用PyWebView... 目录一、技术原理与优势分析1.1 架构原理1.2 核心优势二、开发环境搭建2.1 安装依赖2.2 验
阅读更多...
Java使用ANTLR4对Lua脚本语法校验详解

Java使用ANTLR4对Lua脚本语法校验详解

《Java使用ANTLR4对Lua脚本语法校验详解》ANTLR是一个强大的解析器生成器,用于读取、处理、执行或翻译结构化文本或二进制文件,下面就跟随小编一起看看Java如何使用ANTLR4对Lua脚本... 目录什么是ANTLR？第一个例子ANTLR4 的工作流程Lua脚本语法校验准备一个Lua Gramm
阅读更多...
Java字符串操作技巧之语法、示例与应用场景分析

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字
阅读更多...
Java Optional的使用技巧与最佳实践

Java Optional的使用技巧与最佳实践

《JavaOptional的使用技巧与最佳实践》在Java中,Optional是用于优雅处理null的容器类,其核心目标是显式提醒开发者处理空值场景,避免NullPointerExce... 目录一、Optional 的核心用途二、使用技巧与最佳实践三、常见误区与反模式四、替代方案与扩展五、总结在 Java
阅读更多...
使用Java将DOCX文档解析为Markdown文档的代码实现

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown（MD）因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析
阅读更多...
Qt中QUndoView控件的具体使用

Qt中QUndoView控件的具体使用

《Qt中QUndoView控件的具体使用》QUndoView是Qt框架中用于可视化显示QUndoStack内容的控件,本文主要介绍了Qt中QUndoView控件的具体使用,具有一定的参考价值,感兴趣的... 目录引言一、QUndoView 的用途二、工作原理三、 如何与 QUnDOStack 配合使用四、自
阅读更多...
C++使用printf语句实现进制转换的示例代码

C++使用printf语句实现进制转换的示例代码

《C++使用printf语句实现进制转换的示例代码》在C语言中,printf函数可以直接实现部分进制转换功能,通过格式说明符（formatspecifier）快速输出不同进制的数值,下面给大家分享C+... 目录一、printf 原生支持的进制转换1. 十进制、八进制、十六进制转换2. 显示进制前缀3. 指
阅读更多...
使用Python构建一个Hexo博客发布工具

使用Python构建一个Hexo博客发布工具

《使用Python构建一个Hexo博客发布工具》虽然Hexo的命令行工具非常强大,但对于日常的博客撰写和发布过程,我总觉得缺少一个直观的图形界面来简化操作,下面我们就来看看如何使用Python构建一个... 目录引言Hexo博客系统简介设计需求技术选择代码实现主框架界面设计核心功能实现1. 发布文章2. 加
阅读更多...
shell编程之函数与数组的使用详解

shell编程之函数与数组的使用详解

《shell编程之函数与数组的使用详解》：本文主要介绍shell编程之函数与数组的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录shell函数函数的用法俩个数求和系统资源监控并报警函数函数变量的作用范围函数的参数递归函数shell数组获取数组的长度读取某下的
阅读更多...
使用Python开发一个带EPUB转换功能的Markdown编辑器

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2