Программист Максим Слепов

WebSocket

WebSocket – протокол обмена данными между клиентом и сервером. Использует HTTP только в момент установления соединения. Поддерживается браузерными реализациями JS.

Доступен через конструктор:

var webSocket = new WebSocket('ws://site.com');

При создании объекта серверу посылается следующий GET-запрос:

GET /chat HTTP/1.1
Host: server.site.com
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://mysite.ru
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

В нём из клиентского JS доступны два поля – GET и Host. Остальные для редактирования недоступны.
Sec-WebSocket-Key генерируется автоматически, это случайное значение.

Ответ от сервера:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: hsBlbuDTkk24srzEOTBUlZAlC2g=

Sec-WebSocket-Accept – это перекодированный Sec-WebSocket-Key. Браузер проверяет, что перекодировка произошла правильно, тогда соединение признаётся установленным.

Основное отличие от XMLHttpRequest: соединение симметричное (вызовы может инициировать как клиент, так и сервер) и не закрывается со временем.

WebSocket позволяет передавать любые данные – строки, JSON, файлы и т.д. Для передачи может использоваться как обычный протокол ws, так и защищённый wss/ Последний также более устойчив к разрыву соединений на прокси-серверах.

Методы:

var webSocket = new WebSocket('ws://site.com');
 
// соединение подтверждено
connection.onopen = function() {
  console.log('Connection open!');
}
// в соединении отказано
connection.onclose = function() {
  console.log('Connection closed');
}
// ошибка соединения
connection.onerror = function(error) {
  console.log('Error detected: ' + error);
}
// получение сообщения
connection.onmessage = function(e){
  var server_message = e.data;
  console.log(server_message);
}

10.01.2017

Теги:

#WebSocket