Sever-Sent Events(SSE) 服务器向 Web 客户端推送实战示例

服务器前端 php sse web 2023-10-01 21:10:37 179人浏览泡泡鱼

摘要

概念 Sever-Sent Events(SSE) 可实现由服务端主动推送消息给客户端特点：基于 Http 协议由服务端向客户端发送消息，只能单向发送只支持文本消息当不通过 HTTP / 2 使用

概念

Sever-Sent Events(SSE) 可实现由服务端主动推送消息给客户端

特点：

基于 Http 协议
由服务端向客户端发送消息，只能单向发送
只支持文本消息
当不通过 HTTP / 2 使用时，SSE会受到最大连接数的限制（Chrome、Firefox 每个浏览器最多 6 个连接）

事件流格式

事件流仅仅是一个简单的文本数据流，文本应使用 UTF-8 格式编码。
每条消息后面都由一个空行作为分隔符。

例 1：客户端将收到 myevent 事件类型，消息为 xxxx\nyyyy

event: myevent
data: xxxx
data: yyyy

例 2：未指定事件类型，默认为 message 事件类型，消息为 zzzz

data: zzzz

例 3：冒号开头，表示注释，可以用来防止连接超时，服务器可以定期发送一条消息注释行，以保持连接不断。

: this is just a annotation

实战 Demo

效果图

WEB 客户端

DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>SSE Demotitle>head><body>    <div id="messages">div>    <script>        const source = new EventSource('sse.PHP');        // 建立连接        source.onopen = function () {            var messages = document.getElementById('messages');            messages.innerHTML += 'connection is established' + '
';        };        // ping 事件类型消息        source.addEventListener("ping", function(event) {            var messages = document.getElementById('messages');            messages.innerHTML += 'ping: ' + event.data + '
';        });        // message 事件类型消息        source.onmessage = function(event) {            var messages = document.getElementById('messages');            messages.innerHTML += event.data + '
';        };        // 连接错误    source.onerror = function (event) {        var messages = document.getElementById('messages');        var data = 'connection state: ' + eventSource.readyState + ', error: ' + event            messages.innerHTML += data + '
';    };    script>body>html>

服务端

php// 禁用缓存header("Cache-Control: no-cache");// 指明 MIMIheader("Content-Type: text/event-stream");// 使用持久连接header('Connection: keep-alive');while (true) {  // 发送 ping 事件类型消息  echo "event: ping\n";  echo 'data: {"time": "' . date('Y-m-d H:i:s'). '"}';  echo "\n\n";  if (time() % 5 === 0) {    // 未指定事件类型，默认为 message 事件类型    echo 'data: This is a message at time ' . date('Y-m-d H:i:s') . "\n\n";  }  ob_end_flush();  flush();  sleep(1);}