Создание приложений реального времени с помощью веб-сокетов и событий, отправляемых на сервер

Эта статья была рецензирована Крейгом Билнером и Дэном Принсом . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!

Важной частью написания многофункциональных интернет-приложений является реагирование на изменения данных. Рассмотрим следующую цитату Гильермо Рауха , взятую из его выступления на BrazilJS 2014 года «7 принципов многофункциональных веб-приложений» .

Когда данные изменятся на сервере, сообщите об этом клиентам, не спрашивая. Это форма повышения производительности, которая освобождает пользователя от действий по обновлению вручную (F5, pull to refresh). Новые задачи: (пере) управление подключениями, согласование состояния.

В этой статье мы рассмотрим примеры использования необработанного API WebSocket, а также менее известного EventSource для событий, отправляемых сервером (SSE), для создания «обновляемых» пользовательских интерфейсов в режиме реального времени. Если вы не уверены, что я имею в виду, я рекомендую посмотреть видео, указанное выше, или прочитать соответствующий пост в блоге .

Краткая история

В прошлом нам приходилось моделировать пересылку на сервер, наиболее заметным из которых был длинный опрос . Это подразумевало, что клиент делал длинный запрос, который оставался бы открытым, пока сервер не был готов отправить сообщение. После получения сообщения запрос будет закрыт и будет сделан новый запрос. Другие решения включали <iframe> и Flash. Это не было идеальным.

Затем в 2006 году Opera представила отправленные сервером события (SSE) из спецификации WHATWG Web Applications 1.0.
SSE позволял вам непрерывно передавать события с вашего веб-сервера в браузер посетителя. Другие браузеры последовали его примеру и начали внедрять SSE в 2011 году как часть спецификации HTML5.

Вещи продолжали становиться интересными в 2011 году, когда был стандартизирован протокол WebSocket . WebSockets позволяют вам открывать двустороннее постоянное соединение между клиентом и сервером, предоставляя вам возможность отправлять данные обратно клиентам при каждом изменении данных на сервере без запроса клиента. Это чрезвычайно важно для отзывчивости приложения с множеством одновременных подключений и быстро меняющимся контентом — например, многопользовательской онлайн-игрой. Тем не менее, до тех пор, пока socket.io — самая выдающаяся попытка представить WebSockets в массы — не была выпущена в 2014 году, мы увидели гораздо больше экспериментов с коммуникацией в реальном времени.

Достаточно сказать, что сегодня у нас есть намного более простые способы достижения серверной загрузки без выдачи новых запросов или использования нестандартных плагинов. Эти технологии дают вам возможность передавать данные обратно клиенту в тот момент, когда что-то происходит на сервере.

WebSockets

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

демонстрация

 git clone https://github.com/sitepoint-editors/websocket-demo.git cd websocket-demo npm install npm start 

Откройте http: // localhost: 8080 / в нескольких окнах браузера и просмотрите журналы в браузере и на сервере, чтобы увидеть сообщения, идущие туда-сюда. Более важно отметить время, которое требуется для получения сообщения на сервере, и чтобы остальные подключенные клиенты были в курсе изменений.

Клиент

Конструктор WebSocket инициирует соединение с сервером по протоколам ws или wss (Secure). У него есть метод send для send данных на сервер, и вы можете предоставить обработчик onmessage для получения данных с сервера.

Вот аннотированный пример, показывающий все важные события:

 // Open a connection var socket = new WebSocket('ws://localhost:8081/'); // When a connection is made socket.onopen = function() { console.log('Opened connection '); // send data to the server var json = JSON.stringify({ message: 'Hello ' }); socket.send(json); } // When data is received socket.onmessage = function(event) { console.log(event.data); } // A connection could not be made socket.onerror = function(event) { console.log(event); } // A connection was closed socket.onclose = function(code, reason) { console.log(code, reason); } // Close the connection when the window is closed window.addEventListener('beforeunload', function() { socket.close(); }); 

Сервер

Безусловно, самая популярная библиотека Node для работы с WebSockets на сервере — это ws , мы будем использовать ее для упрощения, так как написание серверов WebSocket не является тривиальной задачей.

 var WSS = require('ws').Server; // Start the server var wss = new WSS({ port: 8081 }); // When a connection is established wss.on('connection', function(socket) { console.log('Opened connection '); // Send data back to the client var json = JSON.stringify({ message: 'Gotcha' }); socket.send(json); // When data is received socket.on('message', function(message) { console.log('Received: ' + message); }); // The connection was closed socket.on('close', function() { console.log('Closed Connection '); }); }); // Every three seconds broadcast "{ message: 'Hello hello!' }" to all connected clients var broadcast = function() { var json = JSON.stringify({ message: 'Hello hello!' }); // wss.clients is an array of all connected clients wss.clients.forEach(function each(client) { client.send(json); console.log('Sent: ' + json); }); } setInterval(broadcast, 3000); 

Пакет ws упрощает создание сервера с поддержкой WebSocket, однако вам следует ознакомиться с WebSocket Security, если вы используете его в работе.

 git clone https://github.com/sitepoint-editors/server-sent-events-demo.git cd server-sent-events-demo npm install npm start 

 // Open a connection var stream = new EventSource("/sse"); // When a connection is made stream.onopen = function() { console.log('Opened connection '); }; // A connection could not be made stream.onerror = function (event) { console.log(event); }; // When data is received stream.onmessage = function (event) { console.log(event.data); }; // A connection was closed stream.onclose = function(code, reason) { console.log(code, reason); } // Close the connection when the window is closed window.addEventListener('beforeunload', function() { stream.close(); }); 

 var SSE = require('sse'); var http = require('http'); var server = http.createServer(); var clients = []; server.listen(8080, '127.0.0.1', function() { // initialize the /sse route var sse = new SSE(server); // When a connection is made sse.on('connection', function(stream) { console.log('Opened connection '); clients.push(stream); // Send data back to the client var json = JSON.stringify({ message: 'Gotcha' }); stream.send(json); console.log('Sent: ' + json); // The connection was closed stream.on('close', function() { clients.splice(clients.indexOf(stream), 1); console.log('Closed connection '); }); }); }); // Every three seconds broadcast "{ message: 'Hello hello!' }" to all connected clients var broadcast = function() { var json = JSON.stringify({ message: 'Hello hello!' }); clients.forEach(function(stream) { stream.send(json); console.log('Sent: ' + json); }); } setInterval(broadcast, 3000) 

 http.createServer(function(req, res) { // Open a long held http connection res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }); // Send data to the client var json = JSON.stringify({ message: 'Hello ' }); res.write("data: " + json + "\n\n"); }).listen(8000); 

 event: SOMETHING_HAPPENED data: The thing id: 123 retry: 300 event: SOMETHING_ELSE_HAPPENED data: The thing id: 124 retry: 300 

 stream.onmessage = function(event) { if (e.origin != 'http://example.com') return; } 

 document.querySelector('#send').addEventListener('click', function(event) { var json = JSON.stringify({ message: 'Hey there' }); var xhr = new XMLHttpRequest(); xhr.open('POST', '/api', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(json); log('Sent: ' + json); });