【Django DRF Apps】从零搭建一个Django SSE app应用

患得患失949

于 2025-01-20 20:44:02 发布

阅读量1.2k

点赞数 39

分类专栏： Django DRF 封装功能类文章标签： django sqlite python SSE app

本文链接：https://blog.youkuaiyun.com/qq_59344127/article/details/145268716

版权

Django DRF 封装功能类专栏收录该内容

7 篇文章

订阅专栏

一、从零开始搭建 Django SSE 应用

（一）创建 Django 项目

安装 Django
首先确保已经安装 Django。如果没有安装，可以使用以下命令进行安装：
```
pip install django
```

创建 Django 项目
创建一个新的 Django 项目：

django-admin startproject sse_project
cd sse_project

创建 Django 应用
创建一个新的应用来处理 SSE：
```
python manage.py startapp sse_app
```

（二）安装和配置跨域支持

安装 django-cors-headers
用于处理跨域问题：
```
pip install django-cors-headers
```

配置跨域支持
在 settings.py 中做如下配置：

在 INSTALLED_APPS 中添加 corsheaders：

INSTALLED_APPS = [
    # 其他应用
    'corsheaders',
]

在 MIDDLEWARE 中添加 CorsMiddleware：

MIDDLEWARE = [
    # 其他中间件
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

配置允许的跨域源：

CORS_ALLOWED_ORIGINS = [
    'http://localhost:5778',  # 允许的域名
    'http://127.0.0.1',
]

（三）安装并配置异步服务器

安装 daphne
用于支持异步请求：
```
pip install daphne
```
配置 ASGI 应用
在 settings.py 中配置 ASGI_APPLICATION：
```
ASGI_APPLICATION = "sse_project.asgi.application"
```

编辑 asgi.py 文件
配置 asgi.py，使其支持异步功能：

import os
from django.core.asgi import get_asgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'sse_project.settings')

application = get_asgi_application()

（四）创建 SSE 视图

修改 views.py
在 sse_app/views.py 文件中，创建一个 SSE 视图，利用 StreamingHttpResponse 来推送事件流。

from django.http import StreamingHttpResponse
import time

def event_stream():
    while True:
        # 发送当前时间作为事件数据
        yield f"data: {time.time()}\n\n"
        time.sleep(1)

def sse_view(request):
    return StreamingHttpResponse(event_stream(), content_type='text/event-stream')

添加 URL 路由
在 sse_app/urls.py 中，配置 SSE 路由：

from django.urls import path
from . import views

urlpatterns = [
    path('events/', views.sse_view, name='sse'),
]

然后在 sse_project/urls.py 中包含 sse_app 路由：

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('sse_app.urls')),  # 引入 sse_app 路由
]

（五）运行 Django 项目

运行开发服务器
启动 Django 项目：
```
python manage.py runserver
```
访问 SSE 流
打开浏览器，访问以下 URL，即可查看实时的时间数据流：
```
http://localhost:8000/events/
```
在浏览器的开发者工具中查看网络请求，您将看到数据每秒钟更新一次。

（六）前端实现

创建一个简单的前端页面
在 sse_app/templates/sse_app/ 目录下，创建一个 index.html 文件，监听 SSE 流并展示实时数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE Example</title>
</head>
<body>
    <h1>Real-time Events</h1>
    <div id="event-data"></div>

    <script>
        const eventSource = new EventSource('/events/');

        eventSource.onmessage = function(event) {
            const dataDiv = document.getElementById("event-data");
            const newData = document.createElement("p");
            newData.textContent = "Current time: " + event.data;
            dataDiv.appendChild(newData);
        };
    </script>
</body>
</html>

修改视图返回 HTML 页面
修改 views.py，使其返回 index.html 页面：

from django.shortcuts import render

def index(request):
    return render(request, 'sse_app/index.html')

同时在 urls.py 中添加主页路由：

urlpatterns = [
    path('', views.index, name='index'),
    path('events/', views.sse_view, name='sse'),
]

（七）总结

通过以上步骤，你就成功地搭建了一个 Django 项目，实现了基于 SSE（Server-Sent Events）的实时数据推送，并且配置了跨域支持和异步服务器。你可以在浏览器端实时获取由 Django 后端推送的数据流。

源码

已在github开源
Django封装高复用高可移植的app