Учебники

HTML5 — WebSockets

Август 22, 2018

WebSockets — это технология двунаправленной связи следующего поколения для веб-приложений, которая работает через один сокет и предоставляется через интерфейс JavaScript в браузерах, совместимых с HTML 5.

Получив соединение Web Socket с веб-сервером, вы можете отправлять данные из браузера на сервер, вызывая метод send () , и получать данные с сервера в браузер с помощью обработчика событий onmessage .

Ниже приведен API, который создает новый объект WebSocket. 

var Socket = new WebSocket(url, [protocal] );

Здесь первый аргумент, url, указывает URL-адрес для подключения. Второй атрибут, protocol, является необязательным и, если он присутствует, указывает суб-протокол, который сервер должен поддерживать, чтобы соединение было успешным.

Атрибуты WebSocket

Ниже приведен атрибут объекта WebSocket. Предполагая, что мы создали объект Socket, как упомянуто выше —

Sr.No. Атрибут и описание
1

Socket.readyState

Атрибут readSly readyState представляет состояние соединения. Может иметь следующие значения —

  • Значение 0 указывает, что соединение еще не установлено.

  • Значение 1 указывает, что соединение установлено и связь возможна.

  • Значение 2 указывает, что соединение проходит рукопожатие закрытия.

  • Значение 3 указывает, что соединение было закрыто или не может быть открыто.

2

Socket.bufferedAmount

Атрибут readonly bufferedAmount представляет количество байтов текста UTF-8, которые были поставлены в очередь с помощью метода send ().

Socket.readyState

Атрибут readSly readyState представляет состояние соединения. Может иметь следующие значения —

Значение 0 указывает, что соединение еще не установлено.

Значение 1 указывает, что соединение установлено и связь возможна.

Значение 2 указывает, что соединение проходит рукопожатие закрытия.

Значение 3 указывает, что соединение было закрыто или не может быть открыто.

Socket.bufferedAmount

Атрибут readonly bufferedAmount представляет количество байтов текста UTF-8, которые были поставлены в очередь с помощью метода send ().

События WebSocket

Ниже приведены события, связанные с объектом WebSocket. Предполагая, что мы создали объект Socket, как упомянуто выше —

Событие Обработчик события Описание
открыть Socket.onopen Это событие происходит, когда установлено сокетное соединение.
сообщение Socket.onmessage Это событие происходит, когда клиент получает данные с сервера.
ошибка Socket.onerror Это событие происходит, когда есть какая-либо ошибка в связи.
близко Socket.onclose Это событие происходит, когда соединение закрыто.

Методы WebSocket

Ниже приведены методы, связанные с объектом WebSocket. Предполагая, что мы создали объект Socket, как упомянуто выше —

Sr.No. Метод и описание
1

Socket.send ()

Метод send (data) передает данные, используя соединение.

2

Socket.close ()

Метод close () будет использоваться для завершения любого существующего соединения.

Socket.send ()

Метод send (data) передает данные, используя соединение.

Socket.close ()

Метод close () будет использоваться для завершения любого существующего соединения.

Пример WebSocket

WebSocket — это стандартный двунаправленный сокет TCP между клиентом и сервером. Сокет начинается как HTTP-соединение, а затем «обновляется» до TCP-сокета после HTTP-рукопожатия. После рукопожатия любая сторона может отправлять данные.

HTML и JavaScript код на стороне клиента

На момент написания этого руководства, было всего несколько веб-браузеров, поддерживающих интерфейс WebSocket (). Вы можете попробовать следующий пример с последними версиями Chrome, Mozilla, Opera и Safari. 

<!DOCTYPE HTML>

<html>
   <head>
      
      <script type = "text/javascript">
         function WebSocketTest() {
            
            if ("WebSocket" in window) {
               alert("WebSocket is supported by your Browser!");
               
               // Let us open a web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
				
               ws.onopen = function() {
                  
                  // Web Socket is connected, send data using send()
                  ws.send("Message to send");
                  alert("Message is sent...");
               };
				
               ws.onmessage = function (evt) { 
                  var received_msg = evt.data;
                  alert("Message is received...");
               };
				
               ws.onclose = function() { 
                  
                  // websocket is closed.
                  alert("Connection is closed..."); 
               };
            } else {
              
               // The browser doesn't support WebSocket
               alert("WebSocket NOT supported by your Browser!");
            }
         }
      </script>
		
   </head>
   
   <body>
      <div id = "sse">
         <a href = "javascript:WebSocketTest()">Run WebSocket</a>
      </div>
      
   </body>
</html>

Установите pywebsocket

Перед тестированием вышеуказанной клиентской программы вам необходим сервер, который поддерживает WebSocket. Загрузите файл mod_pywebsocket-xxxtar.gz из pywebsocket, который предназначен для предоставления расширения веб-сокета для сервера Apache HTTP, и установите его, выполнив следующие действия.

  • Разархивируйте и распакуйте загруженный файл.

  • Зайдите в каталог pywebsocket-xxx / src / .

  • $ python setup.py build

  • $ sudo python setup.py install

  • Затем прочитайте документ по —

    • $ pydoc mod_pywebsocket

Разархивируйте и распакуйте загруженный файл.

Зайдите в каталог pywebsocket-xxx / src / .

$ python setup.py build

$ sudo python setup.py install

Затем прочитайте документ по —

Это установит его в вашу среду Python.

Запустите сервер

Перейдите в папку pywebsocket-xxx / src / mod_pywebsocket и выполните следующую команду — 

$sudo python standalone.py -p 9998 -w ../example/

Это запустит сервер, прослушивающий порт 9998, и будет использовать каталог обработчиков, указанный в опции -w, где находится наш echo_wsh.py.

Теперь с помощью браузера Chrome откройте HTML-файл, который вы создали в начале. Если ваш браузер поддерживает WebSocket (), вы получите предупреждение о том, что ваш браузер поддерживает WebSocket, и, наконец, когда вы нажмете «Запустить WebSocket», вы получите сообщение Goodbye, отправленное серверным скриптом.

45
Share: