Вверх

Адрес
Пирогова 131, офисс 11 Винница, Украина 21037,
info@4go.space
Тел: +380738466121

Сокеты – веб-приложения в реальном времени в 2020 году

[19459000]

[19459001] [19459002] Сейчас 2020 год, и большинство веб-сайтов и приложений теперь должны обновляться в режиме реального времени, поскольку пользователи больше не привыкли обновлять страницу, чтобы увидеть последние обновления. От социальных сетей до новостных веб-сайтов, новые сообщения автоматически отображаются во время просмотра, чтобы гарантировать, что посетитель получит последние обновления, как только они станут доступны, улучшая пользовательский опыт и гарантируя, что посетитель будет оставаться на веб-сайте дольше. [19459003] [19459004] [19459001] [19459002] Это особенно полезно в веб-приложениях, поскольку они обычно требуют взаимодействия с пользователем и часто имеют несколько пользователей, работающих над одной и той же страницей, поэтому обновления в реальном времени необходимы, чтобы избежать дублирования информации. [19459003] [19459004] [19459001] [19459002] В последнее время мы изучали розетки и способы улучшения взаимодействия наших продуктов с пользователями, обновляя их в режиме реального времени для всех пользователей. [19459003] [19459004] [19459001] [19459002] Мы используем Socket.io, инфраструктуру JavaScript, используемую Microsoft Office и Trello, которая позволяет нам добавлять функциональные возможности в реальном времени ко многим нашим проектам, от нашей Laravel CMS до других проектов Headless CMS. [19459003] [19459004] [19459005] [19459001] [19459002] «Socket.IO обеспечивает связь в режиме реального времени, двунаправленную и основанную на событиях связь. [19459003] Он работает на любой платформе, браузере или устройстве, уделяя одинаковое внимание надежности и скорости ». [19459004] [19459006] [19459001] [19459007] [19459002] Из socket.io [19459003] [19459008] [19459004] [19459001] [19459009] [19459004] [19459001] [19459007] [19459002] Демонстрация панели задач в реальном времени [19459003] [19459008] [19459004] [19459001] [19459002] В этой демонстрации вы можете увидеть пример обновления доски задач в режиме реального времени, когда событие вызывается действием в левом окне браузера, а изменения сразу отображаются во втором окно браузера. Этот демонстрационный проект был построен с использованием Angular и Strapi, безголовых CMS NodeJS, которые мы использовали для проектов, управляемых API. [19459003] [19459004] [19459001] Мы исследовали сокеты в различных разделах этого демонстрационного приложения, таких как управление пользователями, обновление событий в таблице или календаре и личный чат между пользователями. [19459004] [19459001] [19459002] [19459010] [19459003] [19459004] [19459001] [19459007] [19459002] Демонстрация приватного чата [19459003] [19459008] [19459004] [19459001] [19459002] Пользовательские чаты обычно являются лучшим примером для демонстрации функциональности сокетов в реальном времени. Перед сокетами мы будем использовать ajax-опрос на стороне клиента, создавая непрерывные запросы к серверу для проверки обновлений. Этот подход имеет несколько недостатков, таких как задержки – в зависимости от установленного интервала – и много ненужных запросов. [19459003] [19459004] [19459001] [19459002] Используя сокеты, мы перемещаем обработку событий на серверную часть, и клиенту нужно извлекать данные только при инициировании события. [19459003] [19459004] [19459001] [19459002] Другой способ, которым мы использовали сокеты, был в одном из наших недавних клиентских проектов, в которых мы использовали Mediagest, нашу CMS Laravel. Этот проект требовал в режиме реального времени, чтобы обновлять ставки на сайте, а также показывать мгновенные уведомления пользователю. Чтобы добиться этого, мы создали простое приложение NodeJS в качестве сервера SocketIO и создали необходимые нам конечные точки. [19459003] [19459004] [19459001] [19459002] Изначально мы рассматривали возможность использования Pusher для обработки трансляции событий из бэкэнда Laravel, поскольку Laravel поставляется с включенным Pusher, но Pusher является платной службой, и мы обнаружили, что SocketIO работает так же хорошо для нашего проекта и была бесплатный и с открытым исходным кодом. [19459003] [19459004] [19459001] [19459002] Мы использовали Laravel Events для публикации в приложении SocketIO всякий раз, когда есть запланированное событие. В нашем приложении NodeJS мы добавили разные конечные точки для каждого типа события и затем могли отправить событие всем клиентам или конкретному клиенту. Для этого проекта нам также необходимо было интегрировать серверное приложение с [19459003] [19459002] express-session [19459003] [19459002] для обработки пользовательских сеансов. [19459003] [19459004] [19459001] [19459002] Сокеты были особенно полезны для отображения мгновенных уведомлений о тостах, которые используются по всему веб-сайту и не зависят от одного представления и могут запускаться несколькими типами событий. [19459003] [19459004] [19459001] [19459011] [19459011] [19459012] [19459013] [19459013] [19459004] [19459001] [19459007] [19459002] Мгновенное уведомление о тосте, вызванное событием сокета [19459003] [19459008] [19459004] [19459001] [19459002] Режим реального времени определенно здесь, и мы рады использовать его в других проектах: следующий может быть вашим! Свяжитесь с нами, чтобы узнать больше о том, как мы можем помочь вам с вашим приложением в реальном времени. [19459003] [19459004] [19459001] [19459007] [19459002] Фотография главного поста Christina @ wocintechchat.com на Unsplash [19459003] [19459008] [19459004]

[19459014]

[19459015]

Author avatar
admin

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *