Веб-разработка

Учебник WebSockets и реалтайм-приложения для начинающих

19 уроков · 6 разделов · бесплатно, без регистрации

Начать с первого урока

Реалтайм — это когда данные доходят до пользователя мгновенно, без перезагрузки и нажатия «Обновить»: чат, нотификации, онлайн-статус, тикер цен, совместное редактирование. Обычный HTTP с его моделью «запрос — ответ» для этого плохо приспособлен, и веб долго обходился костылями вроде polling. WebSocket дал браузеру и серверу постоянный двунаправленный канал поверх одного TCP-соединения.

В этом курсе вы разберётесь, зачем нужен реалтайм и чем плох обычный HTTP, как развивались техники (polling → long-polling → SSE → WebSocket), что происходит при рукопожатии Upgrade, как пользоваться WebSocket API в браузере и написать первый эхо-сервер на Node и Python. Дальше — протокол сообщений на JSON, комнаты и broadcast, Socket.IO, реалтайм-паттерны, масштабирование на несколько серверов через Redis pub/sub, аутентификация, надёжность (heartbeat, реконнект) и безопасность. Курс для тех, кто знает основы JavaScript и хочет строить живые приложения.

Курс «WebSockets и реалтайм-приложения» состоит из 6 разделов и 19 уроков: Зачем нужен реалтайм, Что такое WebSocket, WebSocket API в браузере, Первый сервер и протокол сообщений, Комнаты, broadcast и Socket.IO и Паттерны, масштабирование и надёжность. Уроки идут по порядку — от основ к более сложным темам, в каждом есть объяснение с примерами, а в конце — вопросы для самопроверки. К урокам привязаны задачи с автоматической проверкой: прочитали тему — сразу закрепили её кодом.

Программа курса

  1. 1 Зачем нужен реалтайм

    1. Чем плох обычный HTTP для живых данных

      Модель запрос-ответ в HTTP: почему сервер не может сам прислать данные и что это значит для реалтайма.

    2. Polling и long-polling: первые костыли

      Как короткий и длинный polling имитируют реалтайм поверх HTTP и какой ценой это даётся.

    3. Server-Sent Events: односторонний поток

      Server-Sent Events (SSE): постоянный канал от сервера к браузеру поверх HTTP — что это и когда хватает.

  2. 2 Что такое WebSocket

    1. Рукопожатие: HTTP Upgrade

      Как WebSocket-соединение начинается с обычного HTTP-запроса с заголовком Upgrade и переключает протокол.

    2. Один канал, full-duplex и фреймы

      Full-duplex WebSocket: один TCP-канал, обе стороны говорят одновременно, данные летят фреймами.

    3. Адреса ws:// и wss:// и где живёт WebSocket

      Схемы ws и wss, отличие от http/https, порты и место WebSocket в сетевом стеке.

  3. 3 WebSocket API в браузере

    1. Объект WebSocket и его события

      Браузерный объект WebSocket: события open, message, close, error и жизненный цикл соединения.

    2. Отправка данных и закрытие

      Метод send() для отправки текста и бинарных данных, корректное закрытие соединения и коды close.

    3. Сборка живого чата на клиенте

      Полный пример клиента чата на WebSocket: подключение, отправка, приём и обновление списка сообщений.

  4. 4 Первый сервер и протокол сообщений

    1. Эхо-сервер на Node.js (ws)

      Первый WebSocket-сервер на Node.js с библиотекой ws: приём подключений и эхо сообщений обратно.

    2. Эхо-сервер на Python (websockets)

      WebSocket-сервер на Python с библиотекой websockets и asyncio: приём и эхо сообщений.

    3. Протокол сообщений: типы событий на JSON

      Как спроектировать протокол WebSocket-сообщений: единый JSON-конверт с полем type и полезной нагрузкой.

  5. 5 Комнаты, broadcast и Socket.IO

    1. Broadcast: рассылка всем клиентам

      Как сервер хранит список подключённых клиентов и рассылает сообщение всем — основа группового чата.

    2. Комнаты и онлайн-статус

      Комнаты для разделения бесед и отслеживание онлайн-статуса участников через подключение и отключение.

    3. Socket.IO: что он добавляет поверх WebSocket

      Socket.IO над WebSocket: авто-реконнект, комнаты из коробки, события с именами и fallback на polling.

  6. 6 Паттерны, масштабирование и надёжность

    1. Реалтайм-паттерны: чат, нотификации, статусы, игры

      Типовые паттерны реалтайма: чат, нотификации, онлайн-статус, совместное редактирование, игры, тикер цен.

    2. Масштабирование: несколько серверов и Redis pub/sub

      Масштабирование WebSocket на несколько серверов: проблема разрозненных соединений, Redis pub/sub и sticky sessions.

    3. Аутентификация и надёжность канала

      Аутентификация WebSocket по токену при подключении, heartbeat ping/pong, переподключение и потеря сообщений.

    4. Безопасность, SSE/WebRTC и типичные ошибки

      Безопасность WebSocket: wss, проверка origin, лимиты; SSE и WebRTC как альтернативы; типичные ошибки.