«
»
JavaScriptjQueryWEBWEB - PHP

HTTP, Ajax Polling, SSE, Websocket – связь клиент-сервер

1 февраля 2018 г.

Сервер – это все, что предоставляет услугу, а клиент – это тот, кто получает услугу. Основываясь на ряде подходов и методов, связь клиент-сервер может быть классифицирована по различным классификациям.

В этой статье мы подробно рассмотрим следующие методы взаимодействия клиент-сервер.

– Простые HTTP-запросы

– Аякс Поллинг

– Сервер отправил события

– Websocket

– Commet

Простой HTTP-запрос

Простой HTTP-запрос

Рис. Простой HTTP-запрос

Клиент отправляет HTTP-запрос на сервер, а сервер отвечает на запрос.

<h1>Simple HTTP Request</h1> <h2> The server time is: <?php echo date('Y-m-d H:i:s');?> </h2>

Аякс Поллинг

Простой Ajax Polling

Рис. Простой опрос Ajax

– Клиент отправляет запрос AJAX через регулярные промежутки времени на сервер.

– опрос может быть коротким или длинным.

– В случае длительного опроса сервер не сразу отвечает запрошенной информацией, а ждет, пока не появится новая информация.

Аякс Лонг Поллинг

Рис. Аякс Лонг Поллинг

<h1>Simple Ajax Polling</h1> <h2> The server time is: <span id="server-time"></span> </h2> //include jQuery here //send ajax request to server every 5 seconds setInterval(function(){ poling(); },5000); function polling(){ $.ajax({ url:'polling.php', type:'get', success:function(response){ if(response){ $("#server-time").html(response); } } });

polling.php

<?php echo date('Y-m-d H:i:s');

Сервер отправил события HTML5 (SSE)

События, отправленные сервером (SSE)

Рис. HTML5 Сервер отправляет события (SSE)

– Клиенту не нужно запрашивать сервер

– сервер автоматически отправляет ответ клиенту при появлении новой информации.

<h1>HTML5 Server Sent Events (SSE)</h1> <h2> The server time is: <span id="server-time"></span> </h2> var source = new EventSource('sse.php'); source.onmessage = function(event){ document.getElementById('server-time').innerHTML = event.data; }

sse.php

<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time= date('Y-m-d H:i:s'); echo "data:($time)nn"; flush();

HTML5 Websockets

– Сервер и клиент теперь могут отправлять друг другу сообщения, когда доступны новые данные (с любой стороны).

HTML5 веб-сокеты

Рис. HTML5 веб-сокеты

Commet

Comet – это набор методов, предшествующих HTML5, которые используют потоковую передачу и длительный опрос для создания приложений в реальном времени.

Источник записи: https://thedebuggers.com

Связанные записи
Chrome DevToolsGoogleGoogle ChromeWEB

Запускайте фрагменты JavaScript на любой странице с помощью Chrome DevTools

WEBПолезные сайты

50 бесплатных сайтов для ваших проектов графического дизайна в 2020 году | Бесплатные Графика, Фото и Видео стоки, Шрифты, Макеты и не только

JoomlaWEBWordPressПлагиныПолезные сайты

Обзор уникального конструктора страниц Nicepage 2020 (WordPress, Joomla, HTML и не только)

CSSWEBПримеры

Мистический inline-flex и что он делает - Stas Bagretsov - Medium