Учебники

WebSockets — отправлять и получать сообщения

Октябрь 13, 2018

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

Это событие действует как ухо клиента на сервере. Всякий раз, когда сервер отправляет данные, происходит событие onmessage .

Следующий фрагмент кода описывает открытие соединения по протоколу Web Socket. 

connection.onmessage = function(e){
   var server_message = e.data;
   console.log(server_message);
}

Также необходимо учитывать, какие виды данных можно передавать с помощью веб-сокетов. Протокол веб-сокетов поддерживает текстовые и двоичные данные. В терминах Javascript текст называется строкой, а двоичные данные представлены в виде ArrayBuffer .

Веб-сокеты поддерживают только один двоичный формат одновременно. Объявление двоичных данных выполняется явно следующим образом: 

socket.binaryType = ”arrayBuffer”;
socket.binaryType = ”blob”;

Струны

Строки считаются полезными для работы с удобочитаемыми форматами, такими как XML и JSON. Всякий раз, когда происходит событие onmessage , клиент должен проверить тип данных и действовать соответственно.

Ниже приведен фрагмент кода для определения типа данных как String — 

socket.onmessage = function(event){

   if(typeOf event.data === String ) {
      console.log(“Received data string”);
   }
}

JSON (нотация объектов JavaScript)

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

пример 

{
   name: “James Devilson”,
   message: “Hello World!”
}

Следующий код показывает, как обрабатывать объект JSON и извлекать его свойства. 

socket.onmessage = function(event) {
   if(typeOf event.data === String ){
      //create a JSON object
      var jsonObject = JSON.parse(event.data);
      var username = jsonObject.name;
      var message = jsonObject.message;
		
      console.log(“Received data string”);
   }
}

XML

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

Как в XML, так и в JSON сервер отвечает как строка, которая анализируется на стороне клиента.

ArrayBuffer

Он состоит из структурированных двоичных данных. Вложенные биты приведены в таком порядке, чтобы можно было легко отслеживать положение. ArrayBuffers удобны для хранения файлов изображений.

Получение данных с использованием ArrayBuffers довольно просто. Оператор instanceOf используется вместо равного оператора.

Следующий код показывает, как обрабатывать и получать объект ArrayBuffer — 

socket.onmessage = function(event) {
   if(event.data instanceof ArrayBuffer ){
      var buffer = event.data;
      console.log(“Received arraybuffer”);
   }
}

Демо-приложение

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

<!DOCTYPE html>
<html>
   <meta charset = "utf-8" />
   <title>WebSocket Test</title>

   <script language = "javascript" type = "text/javascript">
      var wsUri = "ws://echo.websocket.org/";
      var output;
		
      function init() {
         output = document.getElementById("output");
         testWebSocket();
      }
		
      function testWebSocket() {
         websocket = new WebSocket(wsUri);
			
         websocket.onopen = function(evt) {
            onOpen(evt)
         };
		
         websocket.onmessage = function(evt) {
            onMessage(evt)
         };
		
         websocket.onerror = function(evt) {
            onError(evt)
         };
      }
		
      function onOpen(evt) {
         writeToScreen("CONNECTED");
         doSend("WebSocket rocks");
      }
		
      function onMessage(evt) {
         writeToScreen('<span style = "color: blue;">RESPONSE: ' +
            evt.data+'</span>'); websocket.close();
      }

      function onError(evt) {
         writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
      }
		
      function doSend(message) {
         writeToScreen("SENT: " + message); websocket.send(message);
      }
		
      function writeToScreen(message) {
         var pre = document.createElement("p"); 
         pre.style.wordWrap = "break-word"; 
         pre.innerHTML = message; output.appendChild(pre);
      }
		
      window.addEventListener("load", init, false);
		
   </script>
	
   <h2>WebSocket Test</h2>
   <div id = "output"></div> 
	
</html>

Результат показан ниже.

54
Share: