什么是 Server-Sent-Events?
Server-Sent-Events (SSE) 是一种基于 HTTP 的协议,用于服务器向客户端推送实时事件流。SSE 通过一个单向连接,服务器可以向客户端发送任意数量的事件、内容和数据,而客户端也可以监听这个连接,从而实时获取服务器端的数据。
相较于 WebSocket,SSE 的实现更加简单,易于部署,对于一些实时性不是很高的情况非常适合使用。
为什么要使用 SSE?
SSE 能够提供更好的用户体验,因为它可以在客户端无需任何交互的情况下实时更新数据,而且 SSE 并不像其他技术那样需要客户端建立持久连接,这样也会减少服务器端的压力。
在某些场景下,像即时聊天、股票市场报价等需要实时交互的应用,使用 SSE 是非常合适的。
如何使用 SSE?
使用 SSE 在服务器端需要以下几个步骤:
- 在 HTTP 头中设置 content-type 为 "text/event-stream",这样浏览器就知道接收到的是 SSE 数据。
- 把数据按照 SSE 的格式返回给浏览器:
response = HttpResponse(content_type='text/event-stream') response.write('data: {}\n\n'.format(data))
'{}\n\n'.format(data) 表示在 data 的基础上添加两个换行符,这是因为 SSE 事件流中每个事件的结尾需要分别包含一个空行。 3. 在数据行末尾加上 "\n\n" 表示这个 SSE 事件已经结束,浏览器收到这个事件后会在接下来的事件中显示新的数据。
在客户端中,我们需要使用 JavaScript 来监听 SSE 事件流,代码如下:
const source = new EventSource('/stream/') source.addEventListener('message', function(event) { console.log(event.data); })
其中,EventSource 是 SSE 对象,source.addEventListener 监听 SSE 事件流的 message 事件,当服务器端有数据推送到客户端,该事件将会被触发。
如何在 Django 中使用 SSE?
使用 Django 实现 SSE,我们需要用到 Django 的 StreamingHttpResponse 类。
首先,我们需要在 views.py 里创建一个推送数据的视图函数(流函数):
// javascriptcn.com 代码示例 from django.views.decorators.http import require_http_methods from django.http import StreamingHttpResponse import time @require_http_methods(["GET"]) def stream(request): def event_stream(): while True: data = "Real-time data" yield 'data: {}\n\n'.format(data) time.sleep(1) response = StreamingHttpResponse(event_stream(), content_type='text/event-stream') return response
其中,我们定义了一个 event_stream 函数,它会无限地往客户端推送实时数据,每秒钟推送一次。
接下来,我们需要在 urls.py 中添加一个 URL 规则:
from django.urls import path from . import views urlpatterns = [ path('stream/', views.stream, name='stream'), ]
最后,我们需要在前端 JavaScript 中使用 EventSource 来监听 SSE 事件流:
const source = new EventSource('/stream/') source.addEventListener('message', function(event) { console.log(event.data); })
运行代码,即可在控制台实时观察到浏览器端收到的实时数据。
总结
本文介绍了 Server-Sent-Events 协议的基本原理和使用方法,在 Django 中实现 SSE 通信也被详细讲解。相信读者已经对 SSE 有了更加深入的理解,可在实际项目中使用 SSE 实现实时通信,提升应用的交互效果和用户体验。同样的,SSE 也存在一定的限制性,比如一次只能发送一条数据,每个事件之间必须空一行等,需要根据实际业务需求选择合适的技术实现。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6527f1a17d4982a6eba84af0