详解 HTML5 服务器发送事件(Server-Sent Events)

作者：System 时间：2024年08月23日分类：所有,html5 字数：1509

Server-Sent Events（SSE）提供了一种从服务器向客户端发送单向通信的机制。与 WebSockets 不同，SSE 使用标准的 HTTP 协议，并且非常简单易用。

以下是一个简单的 HTML5 服务器发送事件的例子：




<!DOCTYPE html>
<html>
<head>
    <title>Server-Sent Events Example</title>
    <script type="text/javascript">
        if(typeof(EventSource)!=="undefined") {
            // 检查浏览器是否支持 SSE
            var source=new EventSource("/path/to/your/sse");
            source.onmessage=function(event) {
                // 处理服务器发送的消息
                document.getElementById("result").innerHTML+=event.data + "<br>";
            };
 
            source.onerror=function(event) {
                // 出现错误时的处理
                console.error("EventSource failed.");
            };
        } else {
            document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
        }
    </script>
</head>
<body>
    <div id="result"></div>
</body>
</html>

服务器端代码示例（以 Python Flask 为例）：




from flask import Flask, Response
 
app = Flask(__name__)
 
@app.route('/path/to/your/sse')
def sse():
    def event_stream():
        while True:
            yield 'data: This is a SSE message.\n\n'
            yield 'data: Another SSE message.\n\n'
            # 这里可以有更复杂的逻辑，比如从数据库读取数据
 
    return Response(event_stream(), mimetype="text/event-stream")
 
if __name__ == '__main__':
    app.run()

在这个例子中，我们创建了一个简单的服务器发送事件流，客户端通过 JavaScript 的 EventSource 对象连接到这个流，并处理接收到的消息。服务器端每隔一段时间发送一条消息。这个例子展示了如何使用 SSE 实现服务器向客户端的单向通信。

详解 HTML5 服务器发送事件(Server-Sent Events)

评论已关闭

推荐阅读