EventSource的php与前端事件推送

admin · 发表于 2023-11-1 20:10:18

EventSource

EventSource 是服务器推送的一个网络事件接口。一个 EventSource 实例会对 HTTP 服务开启一个持久化的连接，以text/event-stream 格式发送事件，会一直保持开启直到被要求关闭。

一旦连接开启，来自服务端传入的消息会以事件的形式分发至你代码中。如果接收消息中有一个事件字段，触发的事件与事件字段的值相同。如果没有事件字段存在，则将触发通用事件。

与 WebSockets,不同的是，服务端推送是单向的。数据信息被单向从服务端到客户端分发。当不需要以消息形式将数据从客户端发送到服务器时，这使它们成为绝佳的选择。例如，对于处理社交媒体状态更新，新闻提要或将数据传递到客户端存储机制（如 IndexedDB 或 Web 存储）之类的，EventSource 无疑是一个有效方案。

php代码(服务端)

主要借鉴下面两个文章

关于长文本如何分段发送
关于发送的参数说明

创建文件message.php

<?php
header("Access-Control-Allow-Origin:*");
header('X-Accel-Buffering: no');
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
ob_end_clean();
ob_implicit_flush(1);
while(1) {
$data = [
"id" => time(),
"message" => '欢迎来到helloweba，现在是北京时间'.date('Y-m-d H:i:s')
];
$xh = $xh + 1;
returnEventData($data,"message",$xh);
sleep(2);
}
function returnEventData($returnData, $event='message', $id=0, $retry=0) {
$str = '';
if($id>0) {
$str .= "id: {$id}".PHP_EOL;
}
if($event) {
$str.= "event: {$event}".PHP_EOL;
}
if($retry>0) {
$str .= "retry: {$retry}".PHP_EOL;
}
if(is_array($returnData)) {
$returnData = json_encode($returnData);
}
$str .= "data: {$returnData}".PHP_EOL;
$str .= PHP_EOL;
echo $str;
}
?>

复制代码

前端js代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EventSource测试</title>
</head>
<body>
<div>EventSource测试</div>
<ul></ul>
<script>
console.log("1111")
//这里填写要链接的地址
var evtSource = new EventSource('message.php');
evtSource.addEventListener('message',function(evt){
// console.log(evt)
document.querySelector("ul").innerHTML+=("<li>"+JSON.parse(evt.data).message+"</li>")
})
// evtSource.onmessage=(evt)=>{
// console.log(evt.data)
// document.querySelector("ul").innerHTML+=("<li>"+JSON.parse(evt.data).message+"</li>")
// //console.log(e.data)
// }
</script>
</body>
</html>

复制代码

admin · 发表于 2023-11-1 20:10:47

https://www.cnblogs.com/tn666/p/17155715.html

		自动登录	找回密码
密码			立即注册

[基础语法] EventSource的php与前端事件推送

众神之神