AI 助理
备案控制台
开发者社区 大数据 文章 正文

使用Django构建即时通讯应用的最简单方法

2024-06-14 60
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 使用Django构建即时通讯应用的最简单方法

使用Django构建即时通讯应用的最简单方法

原文:《The simplest way to build an instant messaging app with Django》

https://www.photondesigner.com/articles/instant-messenger

利用 Server-Sent Events（见参考1）实现通信。

效果如下：

0. 设置Django和Daphne

创建项目和应用：

pip install django daphne
django-admin startproject core .
python manage.py startapp sim

修改core/settings.py：

# core/settings.py

INSTALLED_APPS = [
    'daphne',  # Add this at the top.
    # ...
    'sim',
    # ...
]

ASGI_APPLICATION = 'core.asgi.application'

1. 在Django view中以流式传输数据

sim/views.py

from datetime import datetime

from typing import AsyncGenerator
from django.shortcuts import render, redirect
from django.http import HttpRequest, StreamingHttpResponse, HttpResponse
from . import models
import json
import random

# 大厅
def lobby(request: HttpRequest) -> HttpResponse:
    if request.method == 'POST':
        username = request.POST.get('username')
        if username:
            request.session['username'] = username
        else:
            names = [
                "Horatio", "Benvolio", "Mercutio", "Lysander", "Demetrius", "Sebastian", "Orsino",
                "Malvolio", "Hero", "Bianca", "Gratiano", "Feste", "Antonio", "Lucius", "Puck", "Lucio",
                "Goneril", "Edgar", "Edmund", "Oswald"
            ]
            request.session['username'] = f"{random.choice(names)}-{hash(datetime.now().timestamp())}"

        return redirect('chat')
    else:
        return render(request, 'lobby.html')


# 聊天页面
def chat(request: HttpRequest) -> HttpResponse:
    if not request.session.get('username'):
        return redirect('lobby')
    return render(request, 'chat.html')


# 创建消息
def create_message(request: HttpRequest) -> HttpResponse:
    content = request.POST.get("content")
    username = request.session.get("username")

    if not username:
        return HttpResponse(status=403)
    author, _ = models.Author.objects.get_or_create(name=username)

    if content:
        models.Message.objects.create(author=author, content=content)
        return HttpResponse(status=201)
    else:
        return HttpResponse(status=200)


async def stream_chat_messages(request: HttpRequest) -> StreamingHttpResponse:
    """
    当我们创建消息时，将聊天消息流式传输到客户端。
    """
    async def event_stream():
        """
        发送连续的数据流至已连接的客户端。
        """
        async for message in get_existing_messages():
            yield message

        last_id = await get_last_message_id()

        # 持续检查新消息
        while True:
            new_messages = models.Message.objects.filter(id__gt=last_id).order_by('created_at').values(
                'id', 'author__name', 'content'
            )
            async for message in new_messages:
                yield f"data: {json.dumps(message)}\n\n"
                last_id = message['id']

    async def get_existing_messages() -> AsyncGenerator:
        messages = models.Message.objects.all().order_by('created_at').values(
            'id', 'author__name', 'content'
        )
        async for message in messages:
            yield f"data: {json.dumps(message)}\n\n"

    async def get_last_message_id() -> int:
        last_message = await models.Message.objects.all().alast()
        return last_message.id if last_message else 0

    return StreamingHttpResponse(event_stream(), content_type='text/event-stream')

2. 为视图添加 URL

创建sim/urls.py并写入：

from django.urls import path
from . import views

urlpatterns = [
    path('lobby/', views.lobby, name='lobby'),
    path('', views.chat, name='chat'),
    path('create-message/', views.create_message, name='create-message'),
    path('stream-chat-messages/', views.stream_chat_messages, name='stream-chat-messages'),
]

更新core/urls.py包含sim.urls：

# core/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('sim.urls')),
]

3. 添加模板

模板中包括一个 EventSource 脚本，用于接收来自 Django 的服务器发送的事件。

在sim下创建templates文件夹，在templates下创建chat.html。写入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat</title>
</head>
<body>
<div class="header">
    <h1>Welcome {{ request.session.username }}</h1>
</div>

<div class="container">
    <div class="messages">
        <div id="sse-data"></div>
    </div>

    <form x-cloak
          @submit.prevent="submit" x-data="{state: 'composing', errors: {}}">
        <div>
            <textarea name="content" @input="state = 'composing'" autofocus placeholder="Your next message..."></textarea>
            <button class="button">
                Send
            </button>
        </div>

        <div x-show="state === 'error'">
            <p>
                Error sending your message ❌
            </p>
        </div>
    </form>

    <form action="/lobby/" method="get">
        <button type="submit">Return to Lobby</button>
    </form>
</div>

<script>
    let eventSource;
    const sseData = document.getElementById('sse-data');

    function startSSE() {
        eventSource = new EventSource('/stream-chat-messages/');
        eventSource.onmessage = event => {
            const data = JSON.parse(event.data);
            const messageHTML = `
                    <div class="message-box">
                        <div class="message-author">${data.author__name}</div>
                        <div class="message-content">${data.content}</div>
                    </div>`;
            sseData.innerHTML += messageHTML;
            const msg = document.getElementsByClassName('messages')[0];
            msg.scrollTo(0, msg.scrollHeight);
        };
    }

    // On load, start SSE if the browser supports it.
    if (typeof(EventSource) !== 'undefined') {
        startSSE();
    } else {
        sseData.innerHTML = 'Whoops! Your browser doesn\'t receive server-sent events.';
    }
</script>

<script>
    function submit(event) {
        event.preventDefault();
        const formData = new FormData(event.target);

        const endpointUrl = "/create-message/"
        fetch(endpointUrl, {
            method: "post",
            body: formData,
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
            },
        })
            .then(response => {
                this.state = response.ok ? 'success' : 'error';
                return response.json();
            })
            .then(data => {
                this.errors = data.errors || {};
            });
    }
</script>
<script defer="" src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.3/dist/cdn.min.js"></script>
</body>
</html>

在templates目录下创建lobby.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign-in Page</title>
    <style>
        body {
            font-family: 'Helvetica Neue', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #e8eff1;
            margin: 0;
            color: #333;
        }

        .sign-in-container {
            background: #ffffff;
            padding: 40px 50px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 300px;
        }

        .sign-in-container h2 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 24px;
            color: #0a3d62;
        }

        .sign-in-container form {
            display: flex;
            flex-direction: column;
        }

        .sign-in-container input {
            margin-bottom: 15px;
            padding: 15px;
            border: 1px solid #ced6e0;
            border-radius: 6px;
            font-size: 16px;
        }

        .sign-in-container button {
            padding: 15px;
            background-color: #2ecc71;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .sign-in-container button:hover {
            background-color: #27ae60;
        }
    </style>
</head>
<body>
    <div class="sign-in-container">
        <h2>Enter your chat name:</h2>
        <form method="post">
            {% csrf_token %}
            <input type="text" name="username" placeholder="Username" required>
            <button type="submit">Join the chat</button>
        </form>
    </div>
</body>
</html>

4. 创建 Django 模型来存储要实时发送的数据

将以下内容添加到 sim/models.py ：

from django.db import models


class Author(models.Model):
    name = models.CharField(max_length=500)


class Message(models.Model):
    author = models.ForeignKey(Author, on_delete=models.CASCADE)
    content = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)

应用模型：

python manage.py makemigrations
python manage.py migrate

5. 运行

python manage.py runserver

访问http://127.0.0.1:8000，用另一个浏览器作为第二个用户访问。

6. 奖励：为您的聊天界面添加样式

向chat.html模板添加样式以包含聊天界面和样式。以下是完整模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #e8eff1;
            margin: 0;
            padding: 0;
            color: #333;
        }
        .header {
            color: #022c22;
            font-size: 14px;
            text-align: center;
        }
        .container {
            max-width: 60%;
            margin: auto;
        }
        .messages {
            background: #ffffff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            font-size: 16px;
            height: 50vh;
            overflow-y: scroll;
        }
        .message {
            border-bottom: 1px solid #ced6e0;
            padding: 15px 0;
        }
        .message:last-child {
            border-bottom: none;
        }
        form {
            display: flex;
            flex-direction: column;
        }
        textarea, input, button {
            margin-bottom: 15px;
            padding: 15px;
            border: 1px solid #ced6e0;
            border-radius: 6px;
            font-size: 16px;
        }
        .button {
            background-color: #2ecc71;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .button:hover {
            background-color: #27ae60;
        }

        .message-box {
            background: rgba(247, 248, 245, 0.42);
            border-left: 4px solid rgba(51, 177, 104, 0.42);
            margin-bottom: 15px;
            padding: 10px 15px;
            border-radius: 6px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .message-author {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .message-content {
            font-size: 16px;
            line-height: 1.4;
        }

        textarea {
            background: #f8f9fa;
            border: 1px solid #ced4da;
            box-sizing: border-box;
            width: 100%;
            padding: 12px 20px;
            border-radius: 6px;
            min-height: 100px;
            font-size: 16px;
            line-height: 1.5;
            resize: none;
            outline: none;
        }
    </style>
    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>Welcome {{ request.session.username }}</h1>
</div>

<div class="container">
    <div class="messages">
        <div id="sse-data"></div>
    </div>

    <form x-cloak
          @submit.prevent="submit" x-data="{state: 'composing', errors: {}}">
        <div>
            <textarea name="content" @input="state = 'composing'" autofocus placeholder="Your next message..."></textarea>
            <button class="button">
                Send
            </button>
        </div>

        <div x-show="state === 'error'">
            <p>
                Error sending your message ❌
            </p>
        </div>
    </form>

    <form action="/lobby/" method="get">
        <button type="submit">Return to Lobby</button>
    </form>
</div>

<script>
    let eventSource;
    const sseData = document.getElementById('sse-data');

    function startSSE() {
        eventSource = new EventSource('/stream-chat-messages/');
        eventSource.onmessage = event => {
            const data = JSON.parse(event.data);
            const messageHTML = `
                    <div class="message-box">
                        <div class="message-author">${data.author__name}</div>
                        <div class="message-content">${data.content}</div>
                    </div>`;
            sseData.innerHTML += messageHTML;
        };
    }

    // On load, start SSE if the browser supports it.
    if (typeof(EventSource) !== 'undefined') {
        startSSE();
    } else {
        sseData.innerHTML = 'Whoops! Your browser doesn\'t receive server-sent events.';
    }
</script>

<script>
    function submit(event) {
        event.preventDefault();
        const formData = new FormData(event.target);

        const endpointUrl = "/create-message/"
        fetch(endpointUrl, {
            method: "post",
            body: formData,
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
            },
        })
            .then(response => {
                this.state = response.ok ? 'success' : 'error';
                return response.json();
            })
            .then(data => {
                this.errors = data.errors || {};
            });
    }
</script>
<script defer="" src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.3/dist/cdn.min.js"></script>
</body>
</html>

参考

Server-Sent Events 教程：https://www.ruanyifeng.com/blog/2017/05/server-sent_events.html

严格地说，HTTP 协议无法做到服务器主动推送信息。但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。

也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端不会关闭连接，会一直等着服务器发过来的新的数据流，视频播放就是这样的例子。本质上，这种通信就是以流信息的方式，完成一次用时很长的下载。


Django文档StreamingHttpResponse： https://docs.djangoproject.com/zh-hans/4.2/ref/request-response/#streaminghttpresponse-objects

StreamingHttpResponse 用于从 Django 向浏览器流式传输响应。在 WSGI 下的一个示例用法是在生成响应时需要太长时间或使用太多内存的情况下进行流式传输内容。例如，在 生成大型 CSV 文件 时非常有用。


https://deepinout.com/django/django-questions/222_django_django_31_streaminghttpresponse_with_an_async_generator.html

StreamingHttpResponse的使用方法与常规的HttpResponse类似，只需将生成数据的逻辑写入一个生成器函数，并将该函数作为StreamingHttpResponse的参数传入即可。在每次迭代时，StreamingHttpResponse都会将生成器函数的返回值作为响应内容的一部分发送给客户端，直到生成器结束。

from django.http import StreamingHttpResponse
import time

def async_generator():
    for i in range(5):
        yield str(i)
        time.sleep(1)

def streaming_view(request):
    response = StreamingHttpResponse(async_generator())

    return response

from django.http import StreamingHttpResponse
import asyncio

async def async_generator():
    for i in range(5):
        await asyncio.sleep(1)
        yield str(i)

def streaming_view(request):
    response = StreamingHttpResponse(async_generator())

    return response
文章标签：
CDN
Python
流计算
存储
关键词：
Django应用
Django构建
Django方法
Django构建应用
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
一只大鸽子
目录
相关文章
东方睿赢
|
1月前
|
前端开发 JavaScript UED
探索Python Django中的WebSocket集成：为前后端分离应用添加实时通信功能
通过在Django项目中集成Channels和WebSocket，我们能够为前后端分离的应用添加实时通信功能，实现诸如在线聊天、实时数据更新等交互式场景。这不仅增强了应用的功能性，也提升了用户体验。随着实时Web应用的日益普及，掌握Django Channels和WebSocket的集成将为开发者开启新的可能性，推动Web应用的发展迈向更高层次的实时性和交互性。
东方睿赢
75 1
java冯坚持
|
1月前
|
IDE 关系型数据库 MySQL
Django学习一：创建Django框架，介绍Django的项目结构和开发逻辑。创建应用，编写主包和应用中的helloworld
这篇文章是关于如何创建一个Django框架，介绍Django的项目结构和开发逻辑，并指导如何创建应用和编写“Hello, World!”程序的教程。
java冯坚持
37 3
Django学习一：创建Django框架，介绍Django的项目结构和开发逻辑。创建应用，编写主包和应用中的helloworld
跃@sir
|
1月前
|
开发框架 前端开发 数据库
使用Django框架构建一个完整的Web应用
【10月更文挑战第2天】使用Django框架构建一个完整的Web应用
跃@sir
32 1
qa浪涛
|
1月前
|
存储 Python
使用django构建一个多级评论功能
使用django构建一个多级评论功能
qa浪涛
20 0
qa浪涛
|
1月前
|
监控 应用服务中间件 网络安全
部署Django应用：使用Gunicorn和Nginx构建高效的生产环境
部署Django应用：使用Gunicorn和Nginx构建高效的生产环境
qa浪涛
105 0
qa浪涛
|
1月前
|
存储 开发框架 JSON
【查漏补缺】Django模型字段类型及其应用
【查漏补缺】Django模型字段类型及其应用
qa浪涛
18 0
qa浪涛
|
1月前
|
存储 安全 UED
GitHub OAuth认证的Django应用
GitHub OAuth认证的Django应用
qa浪涛
22 0
小白学大数据
|
2月前
|
数据处理 Python
Django视图：构建动态Web页面的核心技术
Django视图：构建动态Web页面的核心技术
小白学大数据
82 0
土木林森
|
3月前
|
中间件 数据库连接 UED
Django中间件秘籍：如何用几行代码让你的应用变得超级强大？
【8月更文挑战第31天】中间件是Django框架的核心特性，位于视图与HTTP服务器之间，允许全局处理请求和响应，增强Web应用功能。通过实现`MiddlewareMixin`类的方法，如`process_request`和`process_response`，可以轻松实现请求预处理或响应后处理。中间件应用场景广泛，包括用户认证、CSRF防护和数据库连接管理等。创建并配置中间件需将其加入`settings.py`的`MIDDLEWARE`列表，顺序决定执行优先级。合理利用中间件能提高代码重用性和应用性能，带来更好的用户体验。
土木林森
52 0
土木林森
|
3月前
|
JSON API 数据安全/隐私保护
哇塞！Django REST framework 太逆天啦！构建 API 服务从未如此轻松，你还不来试试？
【8月更文挑战第31天】Django REST framework（DRF）是基于Django框架的高效Web API开发工具，提供序列化、视图集、路由等功能，简化API构建流程。使用DRF可轻松实现数据的序列化与反序列化，并支持权限管理和认证机制以保障API安全。安装DRF只需通过`pip install djangorestframework`命令。要创建基本项目，先安装Django并创建新应用，定义模型、序列化器及视图集，最后配置路由。测试API时，可通过Postman发送HTTP请求验证功能。无论项目大小，DRF均能提供强大支持。
土木林森
40 0

热门文章

最新文章

  • 1
    Python的Django框架的运行方式及处理流程
  • 2
    Python基于Django的电影推荐系统和论坛项目完整源码
  • 3
    Django学习（1）一首情诗
  • 4
    django 1.8 官方文档翻译： 2-4-4 编写迁移
  • 5
    第18天，Django进阶
  • 6
    Django模型简介
  • 7
    Django Session通用配置
  • 8
    django 1.8 官方文档翻译： 3-1-4 视图装饰器
  • 9
    django命令
  • 10
    python virtualenv环境运行django
  • 1
    Django/Flask深度揭秘：揭秘那些让程序员爱不释手的神奇功能！
    35
  • 2
    为什么聪明人都选择Django/Flask？看完这篇，你也会有答案！
    69
  • 3
    从零到一，Django/Flask带你走进Web开发的梦幻世界！
    51
  • 4
    Django/Flask不只是框架，它们是你Web开发路上的超级英雄！
    33
  • 5
    深度剖析Django/Flask：解锁Web开发新姿势，让创意无限延伸！
    39
  • 6
    逆袭之路！Django/Flask助你成为Web开发界的璀璨新星！
    50
  • 7
    告别迷茫，Django/Flask深入应用指南，让你的Web梦想照进现实！
    50
  • 8
    从菜鸟到大神，Django/Flask 让你秒变 Web 开发界的‘头号玩家’！
    57
  • 9
    Django使用django-apscheduler实现定时任务
    446
  • 10
    Django项目同时连接多个不同的数据库(7)
    189

    • 相关课程

    更多
  • Python Web 框架 Django 快速入门
  • Python Web 框架 Flask 快速入门
  • Python Web开发基础

    • 相关电子书

    更多
  • 使用TensorFlow搭建智能开发系统自劢生成App UI代码
  • 使用TensorFlow搭建智能开发系统自动生成App UI
  • 面向Web应用的三维建模实战

    • 相关实验场景

    更多
  • 零基础部署一个Django Blog到Serverless架构
  • 基于函数计算快速搭建Zblog等传统应用框架
    • 下一篇
    阿里云OSS设置跨域访问