Статьи

Введение в API WebSockets HTML5

Январь 27, 2019

HTML5 представил много новых интересных API, включая WebSockets. WebSockets позволяют разработчикам создавать мощные приложения в реальном времени, устанавливая сокет-соединения между браузером и сервером. Другими словами, и клиент, и сервер могут обмениваться данными в любое время из-за постоянного соединения. В этом руководстве объясняется, как использовать WebSockets для создания веб-приложений в реальном времени.

Проблема

В приложениях реального времени соединение между сервером и клиентом должно быть постоянным. Таким образом, для создания иллюзии инициируемой сервером передачи обычно используется длительный опрос. WebSockets решают эту проблему путем установления постоянного сокетного соединения между клиентом и сервером. Как только соединение установлено, оно остается открытым, пока клиент или сервер не захочет закрыть его. Это значительно снижает нагрузку на сервер и лучше всего подходит для приложений с низкой задержкой.

Начиная

Открыть соединение через WebSocket довольно просто. Вам просто нужно вызвать конструктор WebSocket() для создания соединения. 

 var connection=new WebSocket("ws://localhost:8787",['soap','json']);

ws: и wss: являются схемами URL для нормальных и защищенных соединений WebSocket, соответственно. Второй параметр используется для определения имени подпротокола, которое может быть массивом строк или строкой. Тем не менее, сервер будет принимать только один суб-протокол. В течение срока действия соединения браузер получит несколько событий, таких как открытое соединение, полученное сообщение и закрытое соединение. Для обработки этих событий используйте следующий код: 

 var connection=new WebSocket("ws://localhost:8787",'json'); connection.onopen = function () { connection.send('Hello, Server!!'); //send a message to server once connection is opened. }; connection.onerror = function (error) { console.log('Error Logged: ' + error); //log errors }; connection.onmessage = function (e) { console.log('Received From Server: ' + e.data); //log the received message };

Как только соединение открыто, браузер отправляет сообщение на сервер с помощью connection.send() . Если обнаружена ошибка, приведенный выше код просто регистрирует ее. Если в любое время сервер отправляет сообщение в браузер, onmessage обратный вызов onmessage . Обработчик события получает объект события со свойством data объекта, содержащего полученное сообщение.

Метод connection.send() может использоваться для отправки двоичных данных. Для этого вы можете использовать Blob или ArrayBuffer . Следующий код демонстрирует использование ArrayBuffer для отправки изображения, нарисованного на холсте, на сервер. 

 var image = canvas2DContext.getImageData(0, 0, 440, 300); var binary_data = new Uint8Array(image.data.length); for (var i = 0; i < image.data.length; i++) { binary_data[i] = image.data[i]; } connection.send(binary_data.buffer);

Точно так же полученное сообщение может быть строкой или двоичными данными. Двоичные данные могут быть получены в виде arraybuffer или arraybuffer .

Простое приложение WebSocket

Чтобы создать работающее приложение, вам также нужна реализация на стороне сервера. Для создания реализации на стороне сервера можно использовать такие технологии, как node.js, Java, .NET, Ruby или C ++. Этот раздел покажет вам, как создать простое приложение с помощью WebSockets.

Пример приложения позволит пользователю задавать конкретные вопросы серверу. Реализация на стороне сервера выполняется с использованием инфраструктуры Java jWebSocket в Windows 7. Итак, чтобы настроить среду, выполните следующие простые шаги. Я предполагаю, что вы уже установили последнюю версию JDK (JDK 7) на ПК с Windows 7.

Шаг 1

Перейдите в раздел «Загрузки jWebSocket» и загрузите первый zip-файл, помеченный как сервер.

Шаг 2

Разархивируйте архив и поместите его где-нибудь в свой C :. Затем создайте новую переменную среды с именем JWEBSOCKET_HOME , которая ссылается на корень вашей установки jWebSocket. Это путь к папке jWebSocket-1.0. Добавьте следующие JAR-файлы в ваш путь к классу:

  • JWEBSOCKET_HOME / ЛИЭС / jWebSocketServer-1.0.jar
  • JWEBSOCKET_HOME / ЛИЭС / jWebSocketServerAPI-1.0.jar
  • JWEBSOCKET_HOME / ЛИЭС / jWebSocketCommon-1.0.jar

Шаг 3

Создайте новый исходный файл Java и назовите его SocketListener.java . Добавьте следующий код в этот файл. 

 import java.util.Date; import java.text.SimpleDateFormat; import org.jwebsocket.factory.JWebSocketFactory; import org.jwebsocket.server.TokenServer; import org.jwebsocket.kit.WebSocketServerEvent; import org.jwebsocket.api.WebSocketServerListener; import org.jwebsocket.api.WebSocketPacket; import org.jwebsocket.config.JWebSocketConfig; import org.jwebsocket.instance.JWebSocketInstance; class JWebSocketListener implements WebSocketServerListener { public void processOpened(WebSocketServerEvent event) { System.out.println("Connection Opened"); } public void processPacket(WebSocketServerEvent event, WebSocketPacket packet) { switch(packet.getString()){ case "1": packet.setString("My Name is jWebSocketServer"); break; case "2": packet.setString("Windows 7 64 Bit"); break; case "3": SimpleDateFormat sdf=new SimpleDateFormat("hh:mm:ss"); packet.setString(sdf.format(new Date())); break; } event.sendPacket(packet); } public void processClosed(WebSocketServerEvent event) { } } public class SocketListener{ public static void main(String[] args){ JWebSocketFactory.printCopyrightToConsole(); JWebSocketConfig.initForConsoleApp(new String[]{}); JWebSocketFactory.start(); TokenServer server = (TokenServer)JWebSocketFactory.getServer("ts0"); if(server!=null) { server.addListener(new JWebSocketListener()); } while (JWebSocketInstance.getStatus() != JWebSocketInstance.SHUTTING_DOWN){ try { Thread.sleep(250); } catch (InterruptedException e) { } } } }

объяснение

Код реализует интерфейс WebSocketServerListener . Интерфейс объявляет следующие три метода, которые должны быть реализованы в нашем классе, JWebSocketListener .

  • processOpened()
  • processPacket()
  • processClosed()

processOpened() вызывается после открытия соединения. Примером использования этого будет запуск потока, который регулярно отправляет обновления клиенту. Точно так же processClosed() вызывается, когда соединение закрывается, чтобы вы могли выполнить любые очистки.

В нашем приложении основная обработка выполняется в processPacket() . Этот метод вызывается всякий раз, когда браузер отправляет сообщение на сервер. Он получает два объекта, типа WebSocketServerEvent и WebSocketPacket . Сначала мы используем WebSocketPacket#getString() для чтения сообщения (это вопрос, заданный клиентом). В зависимости от вопроса сервер отправляет ответ. WebSocketPacket#setString() WebSocketPacket с помощью WebSocketPacket#setString() . Затем мы вызываем WebSocketServerEvent#sendPacket() , передавая пакет в качестве аргумента. Далее мы создаем открытый класс с именем SocketListener . Этот класс запускает сервер реализации WebSocket и регистрирует наш пользовательский слушатель на нем.

Шаг 4

Скомпилируйте SocketListener.java и запустите свой сервер с помощью команды java SocketListener .

Шаг 5

Теперь, когда вы выполнили реализацию на стороне сервера, пришло время создать клиент, который будет взаимодействовать с сервером. Вот наша первоначальная HTML-разметка: 

 <html> <head> <title>WebSocket Test</title> <style> #response{ width: 200px; background: #F2F2F2; padding: 120px 0px 120px 0px; font-size:18px; } </style> </head> <body> <div align="center"> Choose a question to ask: <select id="question" name="question" onchange="sendMessage(this.value);"> <option value="1">What's Your Name</option> <option value="2">Which OS You Are Running On?</option> <option value="3">What Time Is It?</option> </select> <br/><br/> <div id="response"> My Name is jWebSocketServer </div> </div> </body> </html>

Теперь добавьте следующий код JavaScript в HTML: 

 <script type="text/javascript"> var connection = new WebSocket('ws://localhost:8787', 'json'); connection.onopen = function () { console.log('Connection Opened'); }; connection.onerror = function (error) { console.log('WebSocket Error ' + error); }; connection.onmessage = function (e) { if(e.data.indexOf("subProtocol")==-1) document.getElementById("response").innerHTML=e.data+"<br/>"; }; function sendMessage(msg){ connection.send(msg); } </script>

объяснение

Мы создали файл HTML, который позволяет пользователям выбирать вопросы из выпадающего меню. Когда происходит событие onchange , мы берем значение выбранного элемента и отправляем это значение на сервер. Затем сервер обрабатывает запрос и отправляет ответ браузеру. Когда сообщение от сервера получено, onmessage обратный вызов onmessage , который показывает ответ в response <div> . Строка if(e.data.indexOf("subProtocol")==-1) не является обязательной. Я включил его, потому что изначально, когда соединение открыто, сервер отправляет длинную строку, содержащую информацию, в браузер. Поскольку мы не хотим показывать эту строку, я включил вышеупомянутое условие.

Примечание. Не открывайте этот HTML-файл напрямую. Поместите его на localhost сервер, а затем получите доступ к нему в браузере.

Вывод

Используя API WebSocket, вы можете создавать очень мощные приложения в реальном времени. Но имейте в виду, что обмен данными между источниками разрешен WebSockets. Поэтому вам следует общаться только с теми серверами и клиентами, которым вы доверяете. Ниже приведены несколько примеров приложений, которые вы можете создать с помощью этого API:

  • Обновление Социального потока в реальном времени
  • HTML5 многопользовательские игры
  • Приложения для онлайн чата

Посетите Mozilla Developer Network, чтобы узнать больше об API WebSockets.

36
Share: