WebSocket

или

Туда и Обратно

Трубачев Артём, 2016

Проблема?

HTTP

Comet

polling
long polling
iframe без конца
другие костыли

Comet

WebSocket — протокол полудуплексной связи поверх TCP-соединения, предназначенный для обмена сообщениями между браузером и веб-сервером

в режиме реального времени.

Туда

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

Обратно

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

Туда - Обратно

      0                   1                   2                   3
      0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
     +-+-+-+-+-------+-+-------------+-------------------------------+
     |F|R|R|R| opcode|M| Payload len |    Extended payload length    |
     |I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
     |N|V|V|V|       |S|             |   (if payload len==126/127)   |
     | |1|2|3|       |K|             |                               |
     +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
     |     Extended payload length continued, if payload len == 127  |
     + - - - - - - - - - - - - - - - +-------------------------------+
     |                               |Masking-key, if MASK set to 1  |
     +-------------------------------+-------------------------------+
     | Masking-key (continued)       |          Payload Data         |
     +-------------------------------- - - - - - - - - - - - - - - - +
     :                     Payload Data continued ...                :
     + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
     |                     Payload Data continued ...                |
     +---------------------------------------------------------------+

Туда - Обратно

Контрольные фреймы

Close
Ping
Pong

Туда - Обратно

Фреймы данных

Text
Binary

Туда - Обратно

Зарезервированные фреймы

Безопасность

Origin header
нет авторизации
wss

Расширения

Sec-WebSocket-Extensions: bar; baz=2
Sec-WebSocket-Protocol: soap, wamp

Тут

var socket = new WebSocket("ws://localhost");

socket.onopen = function() {
  console.log("Соединение установлено.");
};

socket.onclose = function(event) {
  console.log("Соединение закрыто.");
};

socket.onmessage = function(event) {
  console.log("Получены данные " + event.data);
};

Там

EM.run {
  EM::WebSocket.run(:host => "localhost", :port => 80) do |ws|
    ws.onopen { |handshake|
      ws.send "Hello Client, you connected to #{handshake.path}"
    }

    ws.onclose { |msg|
      puts 'Connection closed'
    }

    ws.onmessage { |msg|
      ws.send "Pong: #{msg}"
    }
  end
}