服务器发送的事件读取Json并更新客户端 [英] Server Sent Events Read Json and Update Clients
问题描述
当前,我正在将客户解决方案更新为SSE。它基于Codeigniter和使用javascript的客户端。我是SSE的新手。我已经在Rest API控制器中完成了以下代码。
Currently I'm updating my client solution to SSE. It's based on Codeigniter and client using javascript. I'm new to SSE. I have done below code in Rest API controller.
function server_sent_events_get()
{
while (true) {
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$mac = $this->get('macaddress');
$scheduleid = $this->get('scheduleid');
$modifiedon = urldecode($this->get('modifiedon'));
$device_result = $this->read_devices_xml_json($mac);
$schedule_result = $this->read_schedules_xml_json($scheduleid, $modifiedon);
echo "event: schedule_status\n";
echo "data: " . json_encode($schedule_result) . "\n\n";
echo "event: device_status\n";
echo "data: " . json_encode($device_result) . "\n\n";
sleep(2);
}
}
在客户端中,我有以下javascript
In the client I have below javascript
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("../admin/server/macaddress/000000000002/scheduleid/111/modifiedon/0000-00-00%2000:00:00/format/json");
source.onopen = function(event){
document.getElementById("result").innerHTML += "opened<br>";
// console.log(event);
};
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
// console.log(event);
};
source.onerror = function(event){
document.getElementById("result").innerHTML += "error<br>";
// console.log(event);
};
source.addEventListener('device_status', function(e) {
var data = JSON.parse(e.data);
console.log("device_status");
console.log(data);
}, false);
source.addEventListener('schedule_status', function(e) {
var data = JSON.parse(e.data);
console.log("schedule_status");
console.log(data);
}, false);
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
控制台中没有错误。但是我没有得到我所需要的。我看到它每隔一秒钟仅返回device_status。为什么?请检查我的附件。
There is no error in the console. But I'm not getting what I need. I've seen its return only device_status every one seconds. Why? Please check my attachment.
基本上,我有两个XML文件。一种用于设备,一种用于计划。在私有函数中,我正在读取XML文件,并将值推送到客户端。在哪里/我错过了什么?请让我知道。
Basically, I have two XML files. One is for devices and one is for schedule. In the private functions I'm reading that XML files and push the values to the client. Where / What I missed? Please let me know.
推荐答案
在很多文章的帮助下,我在google墙上伤了脑筋之后。我已修复以下问题。希望这可以对某人有所帮助。
After I break my brain in google wall with help from lots of articles. I have fixed my issue as below. Hope this may help to someone.
服务器端脚本
function server_sent_events_get()
{
ob_start();//must put ob_start if you're using framework. Otherwise there will be a security notice error
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
while (true) {
$array = array('updates' => intval(false));
echo "id:" . uniqid() . PHP_EOL;
$mac = $this->get('macaddress');
$scheduleid = $this->get('scheduleid');
$modifiedon = urldecode($this->get('modifiedon'));
$device_result = $this->read_devices_xml_json($mac);
$schedule_result = $this->read_schedules_xml_json($scheduleid, $modifiedon);
if ($device_result['device_status']) {
echo "event: device_status\n";
$this->curl_generates_function('device');
$array = array('updates' => intval(true), 'trigger' => 'device_status', 'event_status' => intval(true));
} elseif ($schedule_result['schedule_status']) {
echo "event: schedule_status\n";
$this->curl_generates_function('schedule');
$array = array('updates' => intval(true), 'trigger' => 'schedule_status', 'event_status' => intval(true));
}
echo "data:" . json_encode($array) . "\n\n";
ob_flush();
flush();
sleep(1);
}
}
客户端脚本
function checkingUpdates() {
console.log("checkingUpdates :: start");
if (typeof(EventSource) !== "undefined") {
var source = new EventSource("../admin/server/macaddress/000000000002/scheduleid/111/modifiedon/0000-00-00%2000:00:00/format/json");
source.onopen = function (event) {
console.log("checkingUpdates :: EventSource - Open Connection");
};
source.addEventListener('device_status', function (event) {
source.close();
console.log("checkingUpdates :: EventSource device_status - Close Connection");
parent.location.reload();
}, false);
source.addEventListener('schedule_status', function (event) {
source.close();
console.log("checkingUpdates :: EventSource schedule_status - Close Connection");
top.DataManager.getScheduleByGroupId();
}, false);
source.onerror = function (event) {
console.log("checkingUpdates :: EventSource - Error Connection");
};
} else {
console.log("checkingUpdates :: EventSource - Not Working");
top.SCHEDULE_TICKER = setInterval(function () {
top.DataManager.checkScheduleUpdates();
console.log("checkScheduleUpdates :: Mannual Checking Checked");
}, top.INTERVAL_UPDATE);
top.DEVICE_TICKER = setInterval(function () {
top.DataManager.checkDeviceStatus();
console.log("checkDeviceStatus :: Mannual Checking Checked");
}, top.INTERVAL_UPDATE);
}
console.log("checkingUpdates :: end");
}
如果此答案不合适,请随时添加评论/答案
Please do not hesitate to add comments / answers if this answer is not a proper one.
谢谢!祝您编码愉快!
这篇关于服务器发送的事件读取Json并更新客户端的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!