devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

一文教你实战构建消息通知系统Django

作者：2023面试高手 | 2024-04-05 23:14:05

赞

踩

一文教你实战构建消息通知系统Django

本文分享自华为云社区《构建实时消息通知系统：Django实战指南》，作者：柠檬味拥抱。

在Web应用程序中，实现消息通知系统是至关重要的，它可以帮助用户及时了解到与其相关的事件或动态。Django提供了信号机制，可以用于实现这样的通知系统。本文将介绍如何使用Django的信号机制来构建一个简单但功能强大的消息通知系统，并提供相应的代码和实例。

1. 安装 Django

首先，确保你已经安装了 Django。你可以通过 pip 安装它：

pip install django

2. 创建 Django 项目和应用

创建一个 Django 项目，并在其中创建一个应用：

  1. django-admin startproject notification_system
  2. cd notification_system
  3. python manage.py startapp notifications

3. 定义模型

在 notifications/models.py 文件中定义一个模型来存储通知信息：

  1. from django.db import models
  2. from django.contrib.auth.models import User
  3.  
  4. class Notification(models.Model):
  5.     user = models.ForeignKey(User, on_delete=models.CASCADE)
  6.     message = models.CharField(max_length=255)
  7.     created_at = models.DateTimeField(auto_now_add=True)
  8.     read = models.BooleanField(default=False)

4. 创建信号

在 notifications/signals.py 文件中创建信号，该信号将在需要发送通知时触发：

  1. from django.dispatch import Signal
  2.  
  3. notification_sent = Signal(providing_args=["user", "message"])

5. 编写信号处理器

在 notifications/handlers.py 文件中编写信号处理器，处理信号并创建相应的通知：

  1. from django.dispatch import receiver
  2. from .signals import notification_sent
  3. from .models import Notification
  4.  
  5. @receiver(notification_sent)
  6. def create_notification(sender, **kwargs):
  7.     user = kwargs['user']
  8.     message = kwargs['message']
  9.     Notification.objects.create(user=user, message=message)

6. 发送通知

在你的应用程序中的适当位置，发送信号以触发通知：

  1. from django.contrib.auth.models import User
  2. from notifications.signals import notification_sent
  3.  
  4. # 例如，发送通知给特定用户
  5. user = User.objects.get(username='username')
  6. notification_sent.send(sender=None, user=user, message='你有一个新消息')

7. 显示通知

在你的应用程序中，可以通过查询通知模型来显示用户的通知：

  1. from notifications.models import Notification
  2.  
  3. # 例如，在视图中查询并显示通知
  4. def notifications_view(request):
  5.     user_notifications = Notification.objects.filter(user=request.user)
  6.     return render(request, 'notifications.html', {'notifications': user_notifications})

8. 标记通知为已读

当用户查看通知时，你可能需要将它们标记为已读。你可以在视图中执行此操作：

  1. def mark_as_read(request, notification_id):
  2.     notification = Notification.objects.get(pk=notification_id)
  3.     notification.read = True
  4.     notification.save()
  5.     return redirect('notifications_view')

9. 定义通知模板

创建一个 HTML 模板来呈现通知信息。在 templates/notifications.html 文件中定义：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Notifications</title>
  7. </head>
  8. <body>
  9.     <h1>Notifications</h1>
  10.     <ul>
  11.         {% for notification in notifications %}
  12.         <li{% if notification.read %} style="color: grey;"{% endif %}>
  13.             {{ notification.message }}
  14.             {% if not notification.read %}
  15.             <a href="{% url 'mark_as_read' notification.id %}">Mark as Read</a>
  16.             {% endif %}
  17.         </li>
  18.         {% endfor %}
  19.     </ul>
  20. </body>
  21. </html>

10. 配置 URL

配置 URL 来处理通知相关的请求。在 notification_system/urls.py 文件中：

  1. from django.urls import path
  2. from notifications.views import notifications_view, mark_as_read
  3.  
  4. urlpatterns = [
  5.     path('notifications/', notifications_view, name='notifications_view'),
  6.     path('notifications/mark_as_read/<int:notification_id>/', mark_as_read, name='mark_as_read'),
  7. ]

11. 运行服务器

运行 Django 服务器以查看效果：

python manage.py runserver

现在，你可以访问 http://127.0.0.1:8000/notifications/ 查看通知页面，并且点击“标记为已读”链接来标记通知。

12. 集成前端框架

为了提升通知页面的用户体验，我们可以使用一些流行的前端框架来美化页面并添加一些交互功能。这里以Bootstrap为例。

首先，安装Bootstrap：

pip install django-bootstrap4

在 settings.py 中配置：

  1. INSTALLED_APPS = [
  2.     ...
  3.     'bootstrap4',
  4.     ...
  5. ]

修改通知模板 notifications.html，引入Bootstrap的样式和JavaScript文件，并使用Bootstrap的组件来美化页面：

  1. {% load bootstrap4 %}
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Notifications</title>
  9.     {% bootstrap_css %}
  10. </head>
  11. <body>
  12.     <div class="container">
  13.         <h1 class="mt-5">Notifications</h1>
  14.         <ul class="list-group mt-3">
  15.             {% for notification in notifications %}
  16.             <li class="list-group-item{% if notification.read %} list-group-item-light{% endif %}">
  17.                 {{ notification.message }}
  18.                 {% if not notification.read %}
  19.                 <a href="{% url 'mark_as_read' notification.id %}" class="btn btn-sm btn-primary ml-2">Mark as Read</a>
  20.                 {% endif %}
  21.             </li>
  22.             {% endfor %}
  23.         </ul>
  24.     </div>
  25.     {% bootstrap_javascript %}
  26. </body>
  27. </html>

13. 使用 Ajax 实现标记为已读功能

我们可以使用 Ajax 技术来实现标记通知为已读的功能，这样可以避免刷新整个页面。修改模板文件和视图函数如下：

在模板中，使用 jQuery 来发送 Ajax 请求：

  1. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  2. <script>
  3.     $(document).ready(function() {
  4.         $('.mark-as-read').click(function(e) {
  5.             e.preventDefault();
  6.             var url = $(this).attr('href');
  7.             $.ajax({
  8.                 type: 'GET',
  9.                 url: url,
  10.                 success: function(data) {
  11.                     if (data.success) {
  12.                         window.location.reload();
  13.                     }
  14.                 }
  15.             });
  16.         });
  17.     });
  18. </script>

修改视图函数 mark_as_read：

  1. from django.http import JsonResponse
  2.  
  3. def mark_as_read(request, notification_id):
  4.     notification = Notification.objects.get(pk=notification_id)
  5.     notification.read = True
  6.     notification.save()
  7.     return JsonResponse({'success': True})

14. 添加通知计数功能

为了让用户可以清晰地知道有多少未读通知，我们可以添加一个通知计数的功能，将未读通知的数量显示在页面上。

首先，在 notifications/views.py 中修改 notifications_view 视图函数：

  1. def notifications_view(request):
  2.     user_notifications = Notification.objects.filter(user=request.user)
  3.     unread_count = user_notifications.filter(read=False).count()
  4.     return render(request, 'notifications.html', {'notifications': user_notifications, 'unread_count': unread_count})

然后，在通知模板中显示未读通知的数量：

  1. <div class="container">
  2.     <h1 class="mt-5">Notifications</h1>
  3.     <div class="alert alert-info mt-3" role="alert">
  4.         You have {{ unread_count }} unread notification(s).
  5.     </div>
  6.     <ul class="list-group mt-3">
  7.         {% for notification in notifications %}
  8.         <li class="list-group-item{% if notification.read %} list-group-item-light{% endif %}">
  9.             {{ notification.message }}
  10.             {% if not notification.read %}
  11.             <a href="{% url 'mark_as_read' notification.id %}" class="btn btn-sm btn-primary ml-2 mark-as-read">Mark as Read</a>
  12.             {% endif %}
  13.         </li>
  14.         {% endfor %}
  15.     </ul>
  16. </div>

15. 实时更新通知计数

为了使通知计数实时更新，我们可以使用 Ajax 技术定期请求服务器以获取最新的未读通知数量。

在通知模板中添加 JavaScript 代码：

  1. <script>
  2.     function updateUnreadCount() {
  3.         $.ajax({
  4.             type: 'GET',
  5.             url: '{% url "unread_count" %}',
  6.             success: function(data) {
  7.                 $('#unread-count').text(data.unread_count);
  8.             }
  9.         });
  10.     }
  11.     $(document).ready(function() {
  12.         setInterval(updateUnreadCount, 5000); // 每5秒更新一次
  13.     });
  14. </script>

在 notifications/urls.py 中添加一个新的 URL 路由来处理未读通知数量的请求：

  1. from django.urls import path
  2. from .views import notifications_view, mark_as_read, unread_count
  3.  
  4. urlpatterns = [
  5.     path('notifications/', notifications_view, name='notifications_view'),
  6.     path('notifications/mark_as_read/<int:notification_id>/', mark_as_read, name='mark_as_read'),
  7.     path('notifications/unread_count/', unread_count, name='unread_count'),
  8. ]

最后，在 notifications/views.py 中定义 unread_count 视图函数：

  1. from django.http import JsonResponse
  2.  
  3. def unread_count(request):
  4.     user_notifications = Notification.objects.filter(user=request.user, read=False)
  5.     unread_count = user_notifications.count()
  6.     return JsonResponse({'unread_count': unread_count})

16. 添加通知删除功能

除了标记通知为已读之外，有时用户还可能希望能够删除一些通知，特别是一些不再需要的通知。因此，我们可以添加一个删除通知的功能。

首先，在模板中为每个通知添加一个删除按钮：

  1. <ul class="list-group mt-3">
  2.     {% for notification in notifications %}
  3.     <li class="list-group-item{% if notification.read %} list-group-item-light{% endif %}">
  4.         {{ notification.message }}
  5.         <div class="btn-group float-right" role="group" aria-label="Actions">
  6.             {% if not notification.read %}
  7.             <a href="{% url 'mark_as_read' notification.id %}" class="btn btn-sm btn-primary mark-as-read">Mark as Read</a>
  8.             {% endif %}
  9.             <a href="{% url 'delete_notification' notification.id %}" class="btn btn-sm btn-danger delete-notification">Delete</a>
  10.         </div>
  11.     </li>
  12.     {% endfor %}
  13. </ul>

然后，在 notifications/urls.py 中添加一个新的 URL 路由来处理删除通知的请求：

  1. urlpatterns = [
  2.     ...
  3.     path('notifications/delete/<int:notification_id>/', delete_notification, name='delete_notification'),
  4. ]

接着，在 notifications/views.py 中定义 delete_notification 视图函数：

  1. def delete_notification(request, notification_id):
  2.     notification = Notification.objects.get(pk=notification_id)
  3.     notification.delete()
  4.     return redirect('notifications_view')

最后，为了使用户可以通过 Ajax 删除通知，我们可以修改模板中的 JavaScript 代码：

  1. <script>
  2.     $(document).ready(function() {
  3.         $('.delete-notification').click(function(e) {
  4.             e.preventDefault();
  5.             var url = $(this).attr('href');
  6.             $.ajax({
  7.                 type: 'GET',
  8.                 url: url,
  9.                 success: function(data) {
  10.                     if (data.success) {
  11.                         window.location.reload();
  12.                     }
  13.                 }
  14.             });
  15.         });
  16.     });
  17. </script>

17. 添加异步任务处理

在实际应用中，通知系统可能需要处理大量的通知，而生成和发送通知可能是一个耗时的操作。为了避免阻塞用户请求，我们可以使用异步任务处理来处理通知的生成和发送。

17.1 安装 Celery

首先，安装 Celery 和 Redis 作为消息代理：

pip install celery redis

17.2 配置 Celery

在 Django 项目的根目录下创建一个名为 celery.py 的文件，并添加以下内容：

  1. import os
  2. from celery import Celery
  3.  
  4. os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'notification_system.settings')
  5.  
  6. app = Celery('notification_system')
  7. app.config_from_object('django.conf:settings', namespace='CELERY')
  8. app.autodiscover_tasks()

在 settings.py 中添加 Celery 配置：

CELERY_BROKER_URL = 'redis://localhost:6379/0'

17.3 创建异步任务

在 notifications/tasks.py 中定义异步任务来处理通知的生成和发送：

  1. from celery import shared_task
  2. from .models import Notification
  3.  
  4. @shared_task
  5. def send_notification(user_id, message):
  6.     user = User.objects.get(pk=user_id)
  7.     Notification.objects.create(user=user, message=message)

17.4 触发异步任务

在你的应用程序中，当需要发送通知时，使用 Celery 的 delay() 方法触发异步任务：

  1. from notifications.tasks import send_notification
  2.  
  3. send_notification.delay(user_id, '你有一个新消息')

总结：

本文介绍了如何使用 Django 构建一个功能强大的消息通知系统，其中涵盖了以下主要内容：

  1. 通过定义模型、创建信号、编写信号处理器，实现了通知系统的基本框架。
  2. 集成了前端框架 Bootstrap，并使用 Ajax 技术实现了标记通知为已读的功能，以及实时更新未读通知数量的功能，提升了用户体验。
  3. 添加了通知删除功能，使用户可以更灵活地管理通知。
  4. 引入了异步任务处理技术 Celery，将通知的生成和发送操作转换为异步任务，提高了系统的性能和响应速度。

通过这些步骤，我们建立了一个功能完善的消息通知系统，用户可以及时了解到与其相关的重要信息，并且可以自由地管理和处理通知，从而增强了应用的交互性、可用性和性能。

点击关注，第一时间了解华为云新鲜技术~

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/368427
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号