Приветствую всех, кто заглянул ко мне на огонек! Сегодня речь пойдет о вебсокетах. Если ты пользовались мессенджерами, чатами, играли в онлайн-игры или смотрели прямые трансляции — ты однозначно были клиентом вебсокет-соединения.
Содержание
Теория
WebSocket — протокол связи поверх TCP-соединения, предназначенный для обмена сообщениями между браузером и веб-сервером в режиме реального времени. Протокол управления передачей(TCP) основной протокол передачи данных в интернете; он является подложкой для остальных протоколов, среди которых сравним http/https и ws/wss. Обычно, «общаясь» с сайтом, браузер использует http/https протоколы, которые работают в режиме «вопрос-ответ», т.е. без запроса от браузера никакой информации от сервера не будет. Вебсокет протокол(ws и wss, защищенный, по аналогии с http/https), в свою очередь, держит «коридор» обмена данными постоянно открытым, т.е. сервер может по «своей» инициативе послать информацию.
«Рукопожатие»
Это, пожалуй, основное событие в вебсокет-общении. И несмотря на это, оно незаметно и никак не зависит от клиента(имеется ввиду — от человека в чате, либо другом приложении). Происходит оно так: клиент отправляет заголовки серверу
GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Origin: http://example.com Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13
с предложением сменить протокол на websocket, вместе с этим присылает ключ. На основании ключа, сервер строит свой ключ и отсылает его в виде заголовков клиенту. Если полученный клиентом заголовок
HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= Sec-WebSocket-Protocol: chat
содержит код ответа 101 и правильный ключ — ответ воспринимается как «да». Сэтого момента соединение установлено и общение может быть начато, но если сервер не пришлет заголовков или будет неверен ключ — соединение будет разорвано.
Правила построения ответного ключа:
- взять строковое значение из заголовка Sec-WebSocket-Key и объединить со строкой 258EAFA5-E914-47DA-95CA-C5AB0DC85B11;
- вычислить бинарный хеш SHA-1 (бинарная строка из 20 символов) от полученной в первом пункте строки;
- закодировать хеш в Base64.
Немного о передаваемых данных
Согласно спецификации RFC 6455 обмен данными происходит в виде фреймов. Вот блок-схема каждого фрейма
С первого взгляда вспомнился мем «Ну нахер…», ну да ладно! Из этой схемы и ее описания можно сделать заключение:
- каждая «порция» информации передаётся фреймами, она может быть в одном или нескольких подряд;
- каждый фрейм начинается с информации о том, как извлечь целевую информацию из него.
Теперь о самих правилах построения фреймов…
«Ингредиенты» фреймов
Каждый фрейм строится по следующих правилах:
- Первый байт указывает на то, полная ли в нем информация(1), или будет продолжение(0). В случаи если фрейм обладает не полной инфой — нужно ждать закрывающего фрейма, в котором первый бит будет равен 1;
- следующие 3 бита(обычно по 0) это расширение для протокола;
- следующие 4 бита определяют тип полезных данных фрейма:
- 0х1 — текстовые данные;
- 0х2 — бинарные(файл);
- 0х3-7- окно возможностей для полезной информации на будущее(сейчас таких данных нет);
- 0х8 — фрейм с приказом закрыть соединение;
- 0х9 — фрейм PING на проверку состояния соединения;
- 0хА — фрейм PONG(ответ на PING, говорящий «все ОК»);
- 0хB-F — окно возможностей для управления соединением на будущее(сейчас таких данных нет);
- 0х0 — фрагментированный фрейм, являющийся продолжением предыдущего.
- следующий бит(маска) указывает замаскирована ли инфомация фрейма;
- следующие 7 бит или 7 бит + 2 или 8 байта(сейчас объясню) это длинна тела сообщения. Если эти 7 бит перевести в значение, то правила следующие:
- если значение между 0 и 125 — это и есть длинна тела сообщения;
- когда значение 126 — на длину тела указывают следующие 2 байта(16 бит);
- значение строго больше 126 — на длину тела указывают следующие 8 байта(64 бит);
- если маска установлена, 4 байта после длинны тела будут ее ключом — в ином случаи(маска неустановленная, т.е. 0) — этого слоя в фрейме не будет;
- и в конце, в оставшемся будет содержатся полезная информация фрейма.
Эту информацию нужно знать для того, чтоб правильно составить функцию кодирования/декодирования информации сокета. Далее, я построю и эти функции.
Немного о битовых масках
Битмаски — это последовательность битов, предназначенных для маскирования целевой информации. Не буду излагать всю теорию о них(если интересно — загуглите или напишите в комментах), меня, в контексте вебсокетов, интересует лишъ одна операция — раз маскирование целевой информации методом xor(именно он указан в спецификации на протокол вебсокет)
Пусть верхний ряд цифр это битовая маска, а средний — скрытая информация. Будем рассматривать столбцы цыфр. Следуя операции xor нужно сравнить бит маски с соответствующим битом скрытой инфы, и если они совпадают, то результат false(0 у выражении состояния бита) и наоборот. Проделав эту операцию со всеми битами(длина маски = длине полезной информации) будет получена строка с исходными данными. Ключом маски называется наименьший повторяющийся участок маски — именно его хранит каждый фрейм.
Балабольство о практике
Как следует из ранее сказанного — для соединения нужно иметь сервер и клиент. На сервере будет запущен демон(никакого отношения к мифологии, всего-лишъ — вечно работающий скрипт), а клиент будет будет веб-страницей.
В идеале, сервер должен быть написан на языке программирования, поддерживающем асинхронность, например серверный javascript(node.js). Но, допустим, это пристройка к проекту на PHP, среди доступных разработчиков нет(я о тебе, т.к .полагаю, что ты разраб) обладающих знаниями или не желающий изучить новое(что странно); или еще какая-то ведомая лишъ тебе причина. Как известно, пых пока что полностью синхронен, но для низко нагруженных проектов — этого достаточно — выльется только в задержки работы; для нагруженных проектов есть фреймворки, обеспечивающие асинхронность — reactPHP, amPHP, для вебсокет-серверов с асинхронностью — workerman, ratchet и т.д.
По ходу статьи я планирую реализовать следующее(на нативном php):
- websocket-сервер на PHP;
- HTML/JS-клиент для общения с сервером.
На деле и пых может быть клиентом и слушать сокет…
Реализация серверной части
Придумываем задачу. Сервер будет принимать сокет-соединение, приветствовать нового пользователя и сообщать о нем ранее присоединившихся. Любой может «убить» сокет-сервер.
Начнем реализацию, а именно под случай, когда нет доступа к серверу по SSH и запустить скрипт можно вызвав его в браузере. Для этого вначале снимем ограничение времени работы скрипта и запретим завершать работу после закрытия браузера
<?php ignore_user_abort(true); set_time_limit(0);
далее, создадим вебсокет, к которому и будут присоединятся клиенты
<?php
if (($sock = socket_create(AF_INET, SOCK_STREAM, SOL_TCP))) {
echo 'Сокет не создан. Причина: ' . socket_strerror(socket_last_error());
}здесь сокет создается функцией socket_create(), которая при создании сокета возвращает сокет ресурса, иначе false; конструкция socket_strerror(socket_last_error()) всего получает текст ошибки, параметры это семейство протоколов, тип передачи данных и используемый протокол. Кста, забыл главное — проверь конфигурацию пыха — чтоб --enable-sockets был true. Сейчас нужно привязать сокет и выставить его на прослушку, а также, сделать его неблокирующим
<?php
if (socket_bind($sock, 'localhost', 8080)) {
echo 'Сокет не привязан. Причина: ' . socket_strerror(socket_last_error());
}
if (socket_listen($sock, 10)) {
echo 'Сокет не прослушивается. Причина: ' . socket_strerror(socket_last_error());
}
socket_set_nonblock($sock);здесь первый — сокет созданный ранее, ‘localhost’ — домен или IP адрес сервера, 8080 порт, через который будет открыт доступ. В socket_listen() второй параметр необязателен, будет указывать максимальное количество подключенных к нему клиентов.
На этой стадии, я имею сокет; чтоб превратить его в вебсокет — нужно запустить его как службу, т.е. в демон(цикл событий). В самом простом случаи сгодится такой код
<?php
while(true){
// дальнейшая работа
}Итак, первым, что нужно сделать — проверить наличие новых подключений(дальнейший код в этой главе должен быть расположен в цикле)
<?php
if ($connection = socket_accept($sock)) {
$headers = socket_read($connection,1024);
}При их наличии, прочтем их(получив при этом заголовки от клиента) и, исходя из ранее изложенных правил, сформируем серверные заголовки
$parts = explode('Sec-WebSocket-Key:',$headers);
$secWSKey = trim(explode(PHP_EOL,$parts[1])[0]);
$secWSAccept = base64_encode(sha1($secWSKey . '258EAFA5-E914-47DA-95CA-C5AB0DC85B11',true));
$answer = [
'HTTP/1.1 101 Switching Protocols',
'Upgrade: websocket',
'Connection: Upgrade',
'Sec-WebSocket-Accept: ' . $secWSAccept,
'Sec-WebSocket-Version: 13'
];
if (stripos($headers,'name=') !== false) {
$parts = explode('name=',$headers,2);
$name = explode(' ',$parts[1])[0];
}
$name = isset($name) ? $name : 'Anonymous' . count($connections);
socket_write($connection, implode("rn",$answer) . "rnrn");которые запишем в сокет(здесь замечание — если заголовки отправить без пустой строки, клиент не поймет, что это конец и будет ожидать продолжения заголовков). Таким образом мы совешим «рукопожатие» — с этого момента установлено полноценное вебсокет-соединение между сервером и клиентом(ах-да — чтоб ему в дальнейшем отправлять сообщения — запишем его коннект в массив). Ну, и необязательная
socket_write($connection,encodeToFrame('Server: Hello! Welcome to Chat, ' . $name));
if (!empty($connections)) {
foreach ($connections as $connect) {
socket_write($connect->connection,encodeToFrame('Server: New User(' . $name . ') in Chat!'));
}
}
$connections[] = (object) [
'connection' => $connection,
'name' => $name
];программа — поприветствуем новенького, оповестим остальных о нем и запишем «контактные данные»(функции кодирования и декодирования рассмотрим отдельно). Малость не забыл, при передачи параметров методом GET, они будут доступны только в заголовке.
После проверки на новых — проверим каждый сокет на наличие фреймов, если они есть — декодируем их
if (!empty($connections)) {
foreach ($connections as $connect) {
$message = frameDecode(socket_read($connect->connection,1024000));
if ($message === 'break') {
break 2;
}
if (!empty($message)) {
foreach ($connections as $c) {
socket_write($c->connection,encodeToFrame($connect->name . ': ' . $message));
}
$message = '';
}
}
}и отправим сообщение всем участникам. Поскольку цикл «живет» пока работает сервер сделаем возможность принудительной его(цикла) остановки. После выхода из цикла событий закроем сокет
socket_close($sock);
Декодирование фрейма
Здесь все просто — просто следуем правилам. Вначале, из полученной строки(в том, что это именно строка можно убедится распечатав ее var_dump-ом) фрейма извлечем первый и второй байты в двоичном виде(побитово)
$firstByteToBits = sprintf('%08b', ord($frame[0]));
$secondByteToBits = sprintf('%08b', ord($frame[1]));извлечем информацию о типе полезной информации и ее длине
$opcod = bindec(substr($firstByteToBits,4));
$bodyLenght = bindec(substr($secondByteToBits,1));
if ($bodyLenght < 126) {
$bodyLenght = $bodyLenght;
$maskKey = substr($frame,2,4);
$body = substr($frame,6,$bodyLenght);
} elseif ($bodyLenght === 126) {
$bodyLenght = sprintf('%16b',substr($frame,2,2));
$maskKey = substr($frame,4,4);
$body = substr($frame,8,$bodyLenght);
} else {
$bodyLenght = sprintf('%64b',substr($frame,2,8));
$maskKey = substr($frame,10,4);
$body = substr($frame,14,$bodyLenght);
}если ее длинна хранится в следующих 16-ти или 64-х битах — извлечем следующие 2 или 8 байта(8 бит = 1 байт, кто забыл, а 1 байт = 1 символ строки) в битовой форме
Проверим кадр на целостность(фрагментирование), на тип информации и наличие маскировки(я буду пропускать фрагментированные, не маскированные и кары с нетекстовой информацией)
if ((int)$secondByteToBits[0] === 0 || $firstByteToBits[0] === 0 || $opcod !== 1) {
return '';
}О снятии маски — фрейм содержит 32-битный ключ и имеет смысл разбивать полезные данные данные участками по 32 бита, и уже их демаскировать(склеить конкатенацией)
$i = 0;
$unmaskedBody = '';
while ($i < $bodyLenght/4) {
$unmaskedBody .= substr($body,4*$i,4) ^ $maskKey;
$i++;
}Если все же нужно обрабатывать и фрагментированный фреймы — стоит взглянуть в сторону глобальных переменных и конкатенации демаскированных строк.
Кодирование в фрейм
Эта часть оказалась немного сложнее, по крайней мере для меня — у меня образование не связанное с ЕОМ, а в документации об этом я ничего не нашел. Дело в том, что для шифрования длины — я должен понимать откуда 125, 126 и 127 ? Тут я сделал предположение
Имеется 7 бит, которые могут иметь 128(27) положений. Первое — это 0 символов(байт), 2 положения(126 и 127) это для информирования о том, какому правилу следовать. Исходя из этого, 126-ое положение свидетельствует о длине сообщения = 125 байт. Из этого можно сделать вывод — максимальная длина сообщения, содержащаяся в 16-ти битах = 216 — 1, в 64 = 264 — 1.
Подытожим все это в коде: определим значение 7-ми последних битов второго байта и, по необходимости, 2-ох или 8-ми последующих байтов
$opcodInBits = sprintf('%04b', 1);
$bodyLenght = strlen($content);
$bodyLenghtInSecondByte = sprintf('%07b',$bodyLenght);
$extendedLenght = '';
if ($bodyLenght > 125) {
if ($bodyLenght < 65536) {
$bodyLenghtInSecondByte = sprintf('%07b',126);
$extendedLenght = sprintf('%32b',$bodyLenght);
} elseif ($bodyLenght > 65535 && $bodyLenght < 4294967296) {
$bodyLenghtInSecondByte = sprintf('%07b',127);
$extendedLenght = sprintf('%64b',$bodyLenght);
} else {
return '';
}
}
$firstByte = chr(bindec('1000' . $opcodInBits));
$secondByte = chr(bindec('0' . $bodyLenghtInSecondByte));Несмотря на то, что протокол говорит о равных правах клиента и сервера, сервер требует маскированных данных, клиент — открытых.
Реализация клиентской части
Создадим простое текстовое поле и поле для сообщений
<table>
<tr>
<td>
<textarea name="name" rows="8" cols="80" id="input"></textarea><br>
<button type="button" name="button" id="sendToServer">Send</button>
</td>
</tr>
<tr>
<td id="messages"></td>
</tr>
</table>а далее, javascript-обьект для общения с серверным сокетом
var socket = new WebSocket('ws://localhost:8080?name=Bogdan');он имеет 4 метода, которые срабатывают при разных событиях
socket.onopen = function() {
console.log('connected open!');
}
socket.onerror = function() {
console.log('connection error!');
}
socket.onclose = function() {
console.log('connection closed!');
}
socket.onmessage = function(e) {
document.getElementById('messages').innerHTML += '<p>' + e.data + '</p>';
}
Первый метод сработает при успешном обмене заголовками, второй — ошибка создания объекта связи или ошибка «рукопожатия». Следующий — это закрытие соединения и последний — принятие сообщения на сокете.
В отличии от PHP javascript-обьект уже содержит методы и автоматически кодирует/декодирует фреймы.
Заключение
Этой статьей я попытался объяснить технологию вебсокетов максимально просто. Увесь код с этой статьи лежит здесь. Данный протокол обмена сообщениями можно использовать не только для real-time приложений, но и как замена ajax(если нужно экономить трафик). Обьяснение простое — вебсокет обменивается «большим» заголовком только при установлении связи, в свою очередь, ajax сопровождает любой свой запрос+ответ двумя «большими» заголовками.