我正在构建一个双向聊天应用程序，它将消息存储到MySQL数据库中。我想使用服务器发送事件并将PHP和HTML全部放在一页中，但是我面临的问题是无法将标头设置为文本/事件流，否则我将破坏HTML。
我的问题是使用服务器发送事件时如何在同一页面上包含PHP，JS和HTML？
这是我的开头JS。我将EventSource设置为index.php，尽管这可能是错误的。
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("index.php");
source.onmessage = function(event) {
document.getElementByClassName("message").innerHTML = event.data;
};
}else {
document.getElementByClassName("message").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>
<h1>LoRa Chat</h1>
这里是HTML中包含的PHP代码。在这里，我选择数据库并回显结果。
<?php
$SSE = (@$_SERVER["HTTP_ACCEPT"] == "text/event-stream");
header('Cache-Control: no-cache');
if($SSE){
header("Content-Type: text/event-stream");
}
else {
header("Content-Type: text/html");
}
//Database Stuff
$connect = mysqli_connect('localhost', 'user', 'Pass');
mysqli_select_db($connect,"allmessages");
$sql = "SELECT *, if(mymessages > yourmessages, mymessages, yourmessages) FROM lora_messages";
$results = mysqli_query($connect, $sql);
while($row = mysqli_fetch_array($results)) {
if ($row ['mymessages'] > $row ['yourmessages']){
?>
<div class='chat'>
<div class='mine messages'>
<div class='message'>
<?php echo "data: $row['mymessages']"; flush();?>
</div>
</div>
<?php
}
elseif ($row ['mymessages'] < $row ['yourmessages']){
?>
<div class='chat'>
<div class='yours messages'>
<div class='message'>
<?php echo "data: $row['yourmessages']"; flush();?>
</div>
</div>
<?php
}
}
?>
如果将它放在一个文件中，则只需要一个将两个逻辑部分分开的外部if语句。
<?php
if ($_SERVER["HTTP_ACCEPT"] === 'text/event-stream') {
// event stream code
...
while (true) {
...
} else {
// client side code
?>
<head>
<meta name="viewport" content="w
...
<?php }
您不能像您所做的那样将两个部分交织在一起：
<div class='message'>
<?php echo "data: $row['mymessages']"; flush();?>
</div>
您的服务器端部分不完整，但是超出了问题的范围，我用带有有效示例的链接对此进行了评论。