我有一个使用HTML, CSS, jQuery的聊天面板。设置事件侦听器没有任何问题。设置一个文本/事件流php文件,它可以发送消息到客户端没有问题。我如何从客户端与此服务器脚本通信,以便它在接收到来自任何一个客户端的新消息时向打开事件流的所有用户广播消息?服务器应该只在收到新消息时发送一个事件。
这里是message_sender.php:
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
while (1) {
if ($newMessage){ //How does $newMessage get filled in an already running script?
echo "id: 1234'n";
echo "event: ping'n";
echo 'data: {"newMessage": "' . $newMessage . '"}';
echo "'n'n";
}
ob_flush();
flush();
sleep(1);
}
这里是js:
var evtSource = new EventSource("message_sender.php");
evtSource.onmessage = function(e) {
}
evtSource.addEventListener("ping", function(e) {
var newElement = document.createElement("li");
var obj = JSON.parse(e.data);
newElement.innerHTML = "ping " + obj.newMessage;
$('#chat_panel').append(newElement);
}, false);
evtSource.onerror = function(e) {
alert("EventSource failed.");
};
$('#message_form').submit(function(e){
e.preventDefault();
var message = $('#txtb_chat').val();
$.ajax({
type: 'POST',
dataType: 'json',
data: message,
url: 'message_processor.php',
beforeSend: function(){
},
success: function(){
$('#txtb_chat').val("");
}
});
return false;
});
您可以使用AJAX向服务器发送新消息并将消息存储在数据库中。
可以通过查询共享数据库来填充$newMessage
。
您可以使用id:
和Last-Event-Id
来跟踪客户端看到了哪些消息,并查询SELECT * FROM chat WHERE id > $last_event_id
。