Начните использовать WebSockets и улучшите свою UX-игру
И это более быстрая установка, чем вы думаете.
Вы когда-нибудь задумывались, как вы можете наблюдать за приближением вашего водителя Uber на карте в реальном времени? Или как вы можете увидеть чьи-то живые изменения, когда они печатают длинный документ Google?
Введите веб-сокеты.
WebSockets — это тип протокола связи, который обеспечивает двустороннюю связь в режиме реального времени между клиентом (например, веб-браузером) и сервером.
Соединение между клиентом и сервером является постоянным, поэтому оно позволяет отправлять и получать данные в режиме реального времени без необходимости повторных запросов к серверу.
WebSockets особенно полезны для приложений, требующих оперативных обновлений, таких как чаты, видеоигры, финансовые торговые платформы и многое другое. В целом, их интеграция в ваше приложение может вывести ваш пользовательский опыт на новый уровень, но на этом преимущества не заканчиваются.
Они обеспечивают высокий уровень безопасности, используя собственный протокол для обеспечения безопасной передачи данных, и обладают высокой гибкостью благодаря своей доступности в широком диапазоне языков программирования и сред.
До того, как WebSockets стали популярными, разработчики полагались на такие технологии, как длительные опросы или события, отправляемые сервером, чтобы добиться связи между клиентами и серверами в реальном времени. Оба требовали нескольких запросов к серверу, поэтому они были крайне неэффективны и приводили к медленному времени отклика и увеличению сетевого трафика.
В настоящее время разработчики могут использовать такие библиотеки, как socket.io, в своих проектах, чтобы легко начать использовать WebSockets всего за 20 строк кода.
В документации socket.io есть фантастическое руководство по настройке простого чата, который мгновенно отображает сообщения для всех клиентов в режиме реального времени. Если у вас мало времени, вы можете клонировать этот репозиторий, который я собрал, на ваш локальный адрес и попробовать его самостоятельно: github.com/niamlaylor/chat-socket.
Вот как выглядит приложение чата:
Чтобы увидеть WebSockets в действии, попробуйте открыть чат на нескольких вкладках и отправить чат с одной, а затем проверьте другие вкладки. Ваше сообщение отображается без необходимости обновления страницы. Аккуратный!
Хотя этот пример очень упрощен, он показывает, насколько просто в настоящее время воспользоваться преимуществами этой технологии — с помощью всего лишь небольшого количества HTML и Javascript (или вашего языка по выбору).
В вашем следующем проекте я рекомендую вам рассмотреть возможность включения WebSockets. Это может быть то маленькое прикосновение, которое вам нужно, чтобы вывести ваше приложение на новый уровень.
Ресурсы:
- https://pusher.com/вебсокеты
- javascript.info/long-polling#:~:text=Long%20polling%20is%20самый простой%20%20a%20lot%20of%20cases
- https://socket.io/get-started/чат
