EventSource的php与前端事件推送

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>
posted @ 2023-02-25 23:29  天宁哦  阅读(1121)  评论(0)    收藏  举报