Теория.
Что такое WebSockets?
Основываясь на определении MDN, WebSocket API (WebSockets) представляет собой передовую технологию, которая позволяет открывать сеанс двусторонней связи между браузером пользователя и сервером. Но что именно это означает и как это работает в реальной жизни?
Начнем с самого начала. Когда вы пытаетесь перейти на свой любимый веб-сайт, вы обычно начинаете с ввода адреса в браузере.
Затем браузер отправляет запрос на сервер (виртуальное место, где хранится информация).
Затем сервер проверяет, существует ли запрошенная веб-страница, и отправляет ответ обратно в браузер. Если страница существует, сервер отправляет ее обратно. Если его нет, сервер отправляет сообщение об ошибке.
Давайте копать глубже!
Когда браузер отправлял запрос на сервер, чтобы перейти на нашу страницу Letgosurfing.com, он использовал протокол, известный как HTTP (протокол передачи гипертекста), который определяет, как сообщения форматируются и передаются, и какие действия должны выполнять веб-серверы и браузеры. ответ на различные команды.
Основной принцип HTTP заключается в том, что для получения информации с веб-страницы браузер сначала должен запросить сервер, существует ли эта информация. Затем сервер переходит на проверку и отправляет ответ. Например, чтобы получать обновленную информацию о счете в бейсбольной игре, вам придется постоянно проверять веб-страницу игры.
Вот где действительно проявляется WebSockets. Если вы хотите получать обновления в режиме реального времени, WebSockets обеспечивает постоянное соединение между вашим браузером и сервером и обычно работает через TCP / IP (протокол управления передачей / Интернет-протокол). WebSockets в своей реализации использует сокеты - непрерывные каналы связи между двумя сторонами. Всякий раз, когда сервер получает новую информацию, он автоматически отправляет ее клиенту через сокет.
Давайте посмотрим на пример с чат-комнатой:
Когда Кира открывает чат в своем браузере, она открывает соединение с сервером через сокет. Как и все остальные, уже подключенные к этому чату. Когда она печатает «Привет, люди!» и нажимает отправить всем, это сообщение доставляется на сервер через сокет, который автоматически отправляет сообщение всем пользователям в этом публичном чате.
Наш чат использует WebSockets, что означает, что сервер ожидает (прослушивает) получение любых новых сообщений от клиента. Когда сервер получает сообщение от Киры, он отправляет его всем пользователям (клиентам) в чате.
Это своего рода круг: клиент отправляет новое сообщение на сервер, который «слушает» обновления от клиента, затем, как только сервер получает сообщение, он отправляет его через соединение сокета всем клиентам, которые были прослушивание получения обновлений с сервера.
И так повторяется до тех пор, пока пользователь не выйдет из чата.
Достаточно теории, давайте запачкаем руки и создадим простую чат-комнату в реальном времени, которая в конечном итоге будет выглядеть так, как показано ниже.
