Длинные опросы – это самый простой способ поддерживать постоянное соединение с сервером, не используя при этом никаких специфических протоколов (типа WebSocket или Server Sent Events).
Его очень легко реализовать, и он хорошо подходит для многих задач.
Частые опросы
Самый простой способ получать новую информацию от сервера – периодический опрос. То есть, регулярные запросы на сервер вида: «Привет, я здесь, у вас есть какая-нибудь информация для меня?». Например, раз в 10 секунд.
В ответ сервер, во-первых, помечает у себя, что клиент онлайн, а во-вторых посылает весь пакет сообщений, накопившихся к данному моменту.
Это работает, но есть и недостатки:
- Сообщения передаются с задержкой до 10 секунд (между запросами).
- Даже если сообщений нет, сервер «атакуется» запросами каждые 10 секунд, даже если пользователь переключился куда-нибудь или спит. С точки зрения производительности, это довольно большая нагрузка.
Так что, если речь идёт об очень маленьком сервисе, подход может оказаться жизнеспособным, но в целом он нуждается в улучшении.
Длинные опросы
«Длинные опросы» – гораздо лучший способ взаимодействия с сервером.
Они также очень просты в реализации, и сообщения доставляются без задержек.
Как это происходит:
- Запрос отправляется на сервер.
- Сервер не закрывает соединение, пока у него не возникнет сообщение для отсылки.
- Когда появляется сообщение – сервер отвечает на запрос, посылая его.
- Браузер немедленно делает новый запрос.
Для данного метода ситуация, когда браузер отправил запрос и удерживает соединение с сервером в ожидании ответа, является стандартной. Соединение прерывается только доставкой сообщений.
Если соединение будет потеряно, скажем, из-за сетевой ошибки, браузер немедленно посылает новый запрос.
Примерный код клиентской функции subscribe, которая реализует длинные опросы:
async function subscribe() {
let response = await fetch("/subscribe");
if (response.status == 502) {
// Статус 502 - это таймаут соединения;
// возможен, когда соединение ожидало слишком долго
// и сервер (или промежуточный прокси) закрыл его
// давайте восстановим связь
await subscribe();
} else if (response.status != 200) {
// Какая-то ошибка, покажем её
showMessage(response.statusText);
// Подключимся снова через секунду.
await new Promise(resolve => setTimeout(resolve, 1000));
await subscribe();
} else {
// Получим и покажем сообщение
let message = await response.text();
showMessage(message);
// И снова вызовем subscribe() для получения следующего сообщения
await subscribe();
}
}
subscribe();Функция subscribe() делает запрос, затем ожидает ответ, обрабатывает его и снова вызывает сама себя.
Архитектура сервера должна быть способна работать со многими ожидающими подключениями.
Некоторые серверные архитектуры запускают отдельный процесс для каждого соединения. Для большого количества соединений будет столько же процессов, и каждый процесс занимает значительный объём памяти. Так много соединений просто поглотят всю память.
Часто такая проблема возникает с бэкендом, написанными на PHP или Ruby, но технически дело не в языке, а в реализации. На большинстве современных языков можно написать подходящий сервер, но на некоторых это проще сделать.
Бэкенды, написанные с помощью Node.js, обычно не имеют таких проблем.
Демо: чат
Вот демо-чат, вы также можете скачать его и запустить локально (если вам знаком Node.js и можете поставить модули):
// Отправка сообщений, простой POST
function PublishForm(form, url) {
function sendMessage(message) {
fetch(url, {
method: 'POST',
body: message
});
}
form.onsubmit = function() {
let message = form.message.value;
if (message) {
form.message.value = '';
sendMessage(message);
}
return false;
};
}
// Получение сообщений путём длинного опроса
function SubscribePane(elem, url) {
function showMessage(message) {
let messageElem = document.createElement('div');
messageElem.append(message);
elem.append(messageElem);
}
async function subscribe() {
let response = await fetch(url);
if (response.status == 502) {
// Таймаут подключения
// случается, когда соединение ждало слишком долго.
// давайте восстановим связь
await subscribe();
} else if (response.status != 200) {
// Показать ошибку
showMessage(response.statusText);
// Подключиться снова через секунду.
await new Promise(resolve => setTimeout(resolve, 1000));
await subscribe();
} else {
// Получить сообщение
let message = await response.text();
showMessage(message);
await subscribe();
}
}
subscribe();
}let http = require('http');
let url = require('url');
let querystring = require('querystring');
let static = require('node-static');
let fileServer = new static.Server('.');
let subscribers = Object.create(null);
function onSubscribe(req, res) {
let id = Math.random();
res.setHeader('Content-Type', 'text/plain;charset=utf-8');
res.setHeader("Cache-Control", "no-cache, must-revalidate");
subscribers[id] = res;
req.on('close', function() {
delete subscribers[id];
});
}
function publish(message) {
for (let id in subscribers) {
let res = subscribers[id];
res.end(message);
}
subscribers = Object.create(null);
}
function accept(req, res) {
let urlParsed = url.parse(req.url, true);
// новый клиент хочет получать сообщения
if (urlParsed.pathname == '/subscribe') {
onSubscribe(req, res);
return;
}
// отправка сообщения
if (urlParsed.pathname == '/publish' && req.method == 'POST') {
// принять POST
req.setEncoding('utf8');
let message = '';
req.on('data', function(chunk) {
message += chunk;
}).on('end', function() {
publish(message); // опубликовать для всех
res.end("ok");
});
return;
}
// остальное - статика
fileServer.serve(req, res);
}
function close() {
for (let id in subscribers) {
let res = subscribers[id];
res.end();
}
}
// -----------------------------------
if (!module.parent) {
http.createServer(accept).listen(8080);
console.log('Server running on port 8080');
} else {
exports.accept = accept;
if (process.send) {
process.on('message', (msg) => {
if (msg === 'shutdown') {
close();
}
});
}
process.on('SIGINT', close);
}<!DOCTYPE html>
<script src="browser.js"></script>
Все посетители этой страницы будут видеть сообщения друг друга.
<form name="publish">
<input type="text" name="message" />
<input type="submit" value="Send" />
</form>
<div id="subscribe">
</div>
<script>
new PublishForm(document.forms.publish, 'publish');
// случайный url, чтобы избежать проблем с кешированием.
new SubscribePane(document.getElementById('subscribe'), 'subscribe?random=' + Math.random());
</script>Браузерный код находится в browser.js.
Область применения
Длинные опросы прекрасно работают, когда сообщения приходят редко.
Если сообщения приходят очень часто, то схема приёма-отправки сообщений, приведённая выше, становится похожей на «пилу».
Каждое сообщение – это отдельный запрос, с заголовками, авторизацией и так далее.
Поэтому в этом случае предпочтительнее использовать другой метод, такой как Websocket или Server Sent Events.