JavaScript — передача данных от одного клиента к другому с помощью переполнения стека

Я делаю свой проект колледжа по Системе мониторинга качества воздуха, в котором эти данные (скажем, некоторая целочисленная величина) должны быть перенесены с сенсорного блока на веб-страницу.

Что я хочу

Это сценарий, вызванный этим URL http://localhost/AQProject/recordupdate.php?val=2 обновляет веб-страницу с отображением содержимого. Теперь я знаю, что могу сохранять эти данные в базе данных и каждые две секунды запускать запрос на основе ajax, чтобы проверить наличие обновлений, но я хочу, чтобы это обновление было отправлено сервером.

Что я сделал:

я пытался Server sent events, Вот что я попробовал

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

if($_SERVER["REQUEST_METHOD"]=="GET")
{
if(empty($_GET["val"])) die ("Empty Value from source");
else
{
$v = $_GET['val'];
echo "data: The Pollution stub value is {$v}".PHP_EOL;
ob_flush();
flush();
}
}?>

и HTML имеет скрипт

    <script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("recordupdate.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data +
"<br>";
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>

Теперь я понял, что (поправьте меня, если я ошибаюсь), это не сработает, потому что когда другой клиент (сенсорный блок) требует recordupdate.php это другой экземпляр этого скрипта, чем тот, который вызывается клиентом веб-страницы.

Есть ли возможный способ сделать это с помощью server sent events? Или мне абсолютно необходимо копаться в websockets, node.js и т. Д. Заранее спасибо

2

Решение

То, что вы хотите сделать, не так просто, как вы надеялись, но это все еще работа, для которой подходит SSE. Вам не нужно использовать сокеты, и не нужно использовать опрос ajax.

Но вам нужно какое-то хранилище базы данных на сервере, которое может использоваться PHP-скриптами. Поскольку установка стека LAMP очень проста, я бы порекомендовал использовать MySQL, хотя это может быть излишним для того, что вам нужно. Но ваша база данных может быть такой же простой, как текстовый файл.

(Чтобы сохранить приведенные ниже образцы как можно меньше, я предположил, что ваша БД будет /tmp/val.txtи я не делал никаких блокировок файлов и не проверял плохие данные. Просто имейте в виду, что вам нужно выполнить некоторую работу, прежде чем запускать ее в производство в ненадежной среде. Я бы рекомендовал предварительно создать /tmp/val.txt чтобы избежать шума относительно файлов, не существующих.)

Ваш рекордерpdate.php имеет задание записать значение, которое ему дано:

<?php
if($_SERVER["REQUEST_METHOD"]=="GET")
{
if(empty($_GET["val"])) die ("Empty Value from source");
else file_put_contents("/tmp/val.txt", $_GET['val']);
}

Затем у вас есть sse.php, к которому подключаются веб-клиенты:

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$prev = '';
while(1){
$v = file_get_contents("/tmp/val.txt");
if($v != $prev){
echo "data: The Pollution stub value is {$v}\n\n";
$prev = $v;
}
usleep(100000);  //0.1s
}

Этот скрипт проверяет текстовый файл на наличие изменений 10 раз в секунду. Как только он находит один, он отправляет его клиенту. (Средняя задержка составляет 0,05 с плюс нагрузка на сеть.) Спите меньше времени, если вам нужна меньшая задержка.

Единственное изменение в вашем внешнем HTML — вместо этого вызывать «sse.php»:

<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data +
"<br>";
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>
1

Другие решения

HTTP является односторонним протоколом. Запрос только от клиента к серверу. Да, абсолютно необходимо копаться в websockets, node.js и т. Д.

1

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector