Интернет в реальном времени с помощью JavaScript - II

Теперь, когда у вас есть солидный фон того, как развивалась коммуникация в сети, как она перешла в режим реального времени и как WebSockets сделали это проще, лучше и эффективнее. Мы можем начать изучение WebSockets более подробно и увидеть механизмы, лежащие в основе этого, и, конечно же, изучить несколько примеров.

Если вы пропустили первую часть, рекомендую сначала прочитать ее и вернуться.

Итак, WebSockets, да?

Хорошо, после установления соединения. Связь между клиентом и сервером обновляется с модели HTTP-запрос / ответ до постоянного соединения через канал сокета, обеспечивающего полнодуплексную двунаправленную связь. Другими словами, общение в реальном времени.

Веб-серверы, а также веб-браузеры предоставляют API-интерфейсы для обеспечения связи. В современных браузерах по умолчанию поддерживаются и включены WebSockets. Быстрая строка в консоли браузера продемонстрирует, что:

> 'WebSocket' in window   // returns true

С другой стороны, с веб-серверами вы можете найти множество реализаций на большинстве современных языков. Однако лучше использовать сторонние решения. Потому что, во-первых, некоторые языки не имеют встроенной поддержки WebSockets, а во-вторых, очень сложно и сложно создать сервер WebSockets с нуля.

У каждого языка есть свои реализации. NodeJS имеет множество реализаций, самые распространенные - SocketIO и WS, и их лучше использовать. Почему? Потому что они самые распространенные, разве вы не читали это сейчас? Я шучу.

Что ж, «самые распространенные» означают большое сообщество, лучшие решения и самую широкую поддержку. Кроме того, протокол WebSocket прошел через множество несовместимых итераций, и вы не хотите использовать устаревшую реализацию.

Стоит отметить, что если вы хотите поддерживать старые версии браузеров, вы можете реализовать резервный вариант, используя старые способы моделирования в реальном времени. Я говорил о них в первой части.

Начнем с WebSockets на клиенте:

Вот очень простой пример, иллюстрирующий API WebSockets на клиентах. Так просто и интуитивно понятно.

Вы просто создаете экземпляр нового сокета с помощью класса WebSocket и передаете конечную точку в качестве аргумента. После этого вы создаете прослушиватель событий для обработки соединения при его открытии и начинаете прослушивать сообщения с сервера. И клиент, и сервер обмениваются данными в строковом формате. Конечно, вы можете справиться с этим путем сериализации и десериализации данных в JSON.

Вот пример:

Хорошо, теперь давайте посмотрим на другую сторону. Сторона сервера.

Как мы уже обсуждали ранее, лучше использовать стороннюю библиотеку, такую ​​как WS, или Socket.io. Оба модуля можно использовать как на сервере, так и на клиенте.

Давайте рассмотрим простой пример с ws, а в следующем посте мы будем использовать Socket.io в качестве реального примера.

Веб-сокеты на сервере:

Это очень похоже на то, что мы на самом деле видели у клиента. Вот образец формы ws документации с небольшими изменениями для соответствия нашему примеру клиента:

В примере с клиентом клиент будет ожидать открытия соединения и отправляет сообщение, сообщающее серверу, что он готов к взаимодействию:

'Hey Server, I am ready to receive data. Bring it on!'

Как только сервер получает это, он отвечает подтверждающим сообщением:

'Great!'

И так будет продолжаться общение. Очень похоже на наше повседневное общение с людьми. Сначала мы начинаем беседу с приветствия. Подумайте о запросе GET. Если мы не знаем человека, которого представляем, подумайте о заголовках HTTP. После этого мы просто начинаем разговаривать, не приветствуя и представляясь каждый раз, когда хотим что-то сказать (так происходит общение без веб-сокетов. Не хорошо, правда?).

Итак, это было простое объяснение того, как работают веб-сокеты, иллюстрирующее это на простом примере. Лучше взглянуть на API-интерфейсы WebSockets для клиентов и сторонних библиотек, чтобы лучше понять, что мы можем делать с веб-сокетами.

Простое упражнение

  • В окне Chrome или Firefox откройте консоль и создайте соединение с сокетом:
let ws = new WebSocket('ws://example.com');

Вы получите сообщение об ошибке, потому что не удается установить соединение. Все нормально.

  • Затем введите созданную вами переменную ws и потратьте некоторое время на ее изучение.
  • Не забудьте также изучить __proto__.

Посетите MDN. Это хорошее место, чтобы узнать больше.

Хорошо! Надеюсь, вам понравился этот пост. Если вам это нравится, нажмите кнопку с сердечком и поделитесь им. Если ты не сделаешь то же самое. ^^

Увидимся в следующей и последней части! Следите за обновлениями!