Как обновить статус пользователя в реальном времени с помощью JavaScript и Pusher

1656679100 kak obnovit status polzovatelya v realnom vremeni s pomoshhyu javascript

Рахат Кханна

1*oCKom0PmUDVRGM5p7mXT9w
Фото Каролины Крыса на Unsplash

«Привет как ты?» это не та фраза, о которой мы должны спрашивать кого-нибудь сегодня. В наши дни узнать, что кто-то задумал, стало так легко, потому что мы постоянно видим обновленные статусы всех наших друзей в WhatsApp, Snapchat, Facebook и т.д.

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

Мы будем использовать Node.js в качестве сервера приложений, Vanilla JavaScript в интерфейсе и Pusher для связи в реальном времени между нашим сервером и интерфейсом.

Мы создадим приложение, которое будет похоже на ваш список друзей или обычную комнату чата, где вы сможете в режиме реального времени видеть, кто в Интернете и какие последние обновления статуса. Мы узнаем о Pusher’s наличие и как узнать об онлайн-участниках этого канала.

1*MfEOUmfGsInLeL8j8xWyrA

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

Сервер Node.js с использованием Express.js Framework:

  • /Зарегистрироваться API — зарегистрировать/войти нового пользователя на наш канал и сервер, создав его сеанс и сохранив его информацию
  • /isLoggedIn API — проверка входа в систему пользователем при обновлении браузера
  • /usersystem/auth API – проверка авторизации, которую выполняет Pusher после регистрации в нашем приложении и после подписки на присутствие или частный канал
  • /выйти API — выход из системы пользователя и удаление сеанса

Программа Front-End с использованием JavaScript:

  • Форма регистрации/входа — зарегистрировать/войти нового пользователя, заполнив его имя пользователя и начальный статус
  • Список участников — просмотр всех находящихся в сети и их обновленных статусов.
  • Обновить статус — нажмите существующий статус и обновите его после размытия элемента редактирования текста статуса.

Найдите здесь ссылку на репозиторий Github для справки.

Знакомство с Pusher

Pusher – это платформа, которая абстрагирует сложности самостоятельной реализации системы реального времени с помощью WebSockets или Long Polling. Мы можем мгновенно добавлять функции реального времени в наши существующие веб-приложения с помощью Pusher, поскольку он поддерживает широкий спектр наборов программного обеспечения (SDK).

Комплекты интеграции доступны для различных интерфейсных библиотек, таких как Backbone, React, Angular и jQuery, а также для серверных платформ/языков, таких как .NET, Java, Python, Ruby, PHP и GO.

Регистрация в Pusher

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

0*3SMGJP-h-cbEJSXw

Для этой конкретной статьи мы выберем JavaScript для интерфейса и Node.js для бэк-энда, как показано на рисунке выше.

Это просто покажет вам набор исходных образцов кодов для этих вариантов, но вы можете использовать любой комплект интеграции позже с этой программой.

0*rbktLHXpbR6GDzkv

Сервер Node.js

Node.js должно быть установлено в системе как предпосылка для этого проекта. Теперь давайте начнем создавать сервер Node.js и все необходимые API с помощью Express. Инициализируйте новый проект узла следующей командой:

npm init

Установление зависимостей

Мы будем устанавливать необходимые зависимости, такие как Express, express-session, Pusher, body-parser, cookie-parser, с помощью такой команды:

Основной сервер

Теперь мы создадим базовое основание для сервера Node.js, а также включим на нем сеансы с помощью express-session модуль.

В приведенном выше коде мы создали базовый сервер Express и используя метод .use мы включили анализатор файлов cookie, анализатор тела и обслуживание статического файла public папку. Мы также включили сеансы с помощью express-session модуль. Это позволит нам сохранить пользовательскую информацию в соответствующем сеансе запроса пользователя.

Добавление толкателя

У Pusher есть модуль npm с открытым кодом для интеграции Node.js, который мы будем использовать. Он предоставляет набор служебных методов для интеграции с Pusher API с помощью уникального appId, key и а secret. Сначала мы установим Pusher npm модуль с помощью такой команды:

npm install pusher --save

Теперь мы можем использовать require получить Pusher модуль и создать новый экземпляр, передавая объект параметров с важными ключами для инициализации нашей интеграции. Для этой статьи я выбрал случайные ключи – вам придется получить их для своего приложения из информационной панели Pusher.

Вам придется заменить appId, key и а secret со значениями, характерными для программы. После этого мы напишем код нового API, который будет использоваться для создания нового комментария.

API регистрации/входа

Теперь мы разработаем первый API-маршрут нашей программы, с помощью которого новый пользователь сможет зарегистрироваться/войти и сделать себя доступными в нашей программе.

В приведенном выше коде мы раскрыли a POST Вызов API по маршруту /register которого можно было бы ожидать username и status параметры, которые необходимо передать в теле запроса. Мы сохраним эту информацию пользователя в request session.

API аутентификации пользовательской системы

Чтобы включить любого клиента, подписавшегося на Pusher Private и Presence каналы, нам нужно реализовать an auth API, который бы аутентифицировал запрос пользователя путем вызова Pusher.authenticate метод на стороне сервера Добавьте следующий код на сервер, чтобы выполнить это условие:

Нам нужно предоставить конкретный маршрут во время инициализации клиентской библиотеки Pusher, которую мы увидим позже. Клиентская библиотека Pusher автоматически вызовет этот маршрут и передаст в channel_name и socket_id свойства. Мы одновременно получим информацию о пользователе с объекта сеанса пользователя и передадим ее как presenceData к Pusher.authenticate вызов метода.

API IsLoggedIn и выход из системы

Если пользователь обновляет браузер, программа на стороне клиента должна определить, зарегистрирован пользователь уже или нет. Мы будем реализовывать isLoggedIn Маршрут API для этого. Кроме того, нам нужен a logout маршрут, чтобы любой пользователь мог выйти из программы.

Программа Front-End с использованием Vanilla JavaScript

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

Шаг 1. Создайте папку с названием public и создайте файл index.html

Мы уже написали код в нашем server.js для обслуживания статического содержимого public папку, так что мы запишем весь наш интерфейсный код в эту папку.

Пожалуйста, создайте новую папку public а также создать пустой index.html файл на данный момент.

Шаг 2: Добавьте шаблонный код в наш index.html

Мы добавим базовый шаблонный код, чтобы настроить базовую структуру для нашей веб-приложения Headerи Sections где можно разместить регистрационную форму и список участников.

В приведенном выше шаблонном коде мы ссылались на наш основной файл JavaScript app.js и библиотеку JavaScript на клиентской стороне Pusher. У нас также есть тег сценария, где мы разместим шаблон для строки участников в списке участников. Кроме того, у нас есть два пустых теги div с идентификаторами me и membersList содержать имя и информацию о зарегистрированном участнике, а также список всех других участников с их статусом.

Шаг 3: Style.css

Важно заметить, что мы будем показывать форму регистрации впервые и MembersList и Logout сначала кнопка будет скрыта по умолчанию. Пожалуйста, создайте новый файл под названием style.css и добавьте к нему следующий CSS:

Попробуйте открыть URL-адрес в вашем браузере, и приложение загрузится с основной формой регистрации или входа с именем пользователя и статусом. Результат будет выглядеть как на снимке экрана ниже:

0*29ug0ae4efpquw-u

Шаг 4. Добавить базовый код app.js

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

В приведенном выше коде мы ссылались на все важные переменные, которые нам потребуются. Мы также инициализируем библиотеку Pusher с помощью new Pusher и передача ключа API в качестве первого аргумента Второй аргумент содержит дополнительный объект конфигурации, к которому мы добавим ключ. authEndpoint с маршрутом API специального узла /usersystem/auth а также добавить ключ encrypted установление значения true.

Мы создадим пару общих функций, чтобы показать или скрыть элемент, передавая его уникальный идентификатор. Мы также добавили общий метод под названием ajax делать запросы AJAX с помощью объекта XMLHttp в JavaScript JavaScript.

При загрузке страницы мы делаем запрос AJAX, чтобы проверить, вошел ли пользователь или нет. Если пользователь вошел в систему, мы будем использовать экземпляр Pusher для подписки пользователя на канал присутствия под названием presence-whatsup-members . Вы можете иметь это как уникальную чатовую комнату или местоположение приложения, где вы хотите сообщать/отслеживать онлайн-участников.

Мы также написали метод выше addNewMember с помощью запроса AJAX к register Маршрут API, который мы создали в Node.js. Мы передадим имя и начальный статус, введенный в форму.

У нас также есть способ обновления состояния просмотра юзера на базе статуса входа в систему. Этот метод не делает ничего кроме обновления видимости списка участников, кнопки выхода и формы регистрации. Мы использовали a bindChannelEvents метод, когда пользователь вошел в систему, которую мы введем позже в публикации блога.

Пожалуйста, добавьте следующий CSS style.css файл для отображения me соответствующим образом с именем пользователя и статусом пользователя, входящим в систему.

Шаг 5: Добавить код для воспроизведения списка участников и bindChannelEvents

Теперь, после подписки на канал, нам нужно привязать некоторые события, чтобы мы могли знать, когда нового участника добавляют к каналу или удаляют из него. Мы также привяжем к специальному событию, чтобы знать, когда кто-то обновляет свой статус.

Добавьте следующий код в app.js файл:

В приведенном выше bindChannelEvents метод, мы используем channel.bind метод связывания обработчиков событий для 3 внутренних событийusher:subscription_succeeded, pusher:member_added, pusher:member_removed и 1 настраиваемое событиеclient-status-update.

Теперь мы добавим JavaScript для визуализации списка участников. Важно знать, что предмет, из которого я вернулся .subscribe метод обладает свойством под названием members с помощью которого можно узнать информацию о пользователе, вошедшем в систему, на который ссылается ключ me и другие члены по ключу members. Добавьте следующий код в app.js файл:

Мы добавили обработчик событий для события добавления/удаления нового участника, чтобы повторно отобразить список участников, чтобы он оставался обновленным только для участников, находящихся в сети. Чтобы показать список участников, нам нужно добавить следующий стиль в наш файл style.css:

Теперь мы напишем код, чтобы инициировать событие клиента на нашем канале, чтобы известить всех пользователей об изменении статуса пользователя, входящего в систему. Добавьте следующий код в свой app.js файл:

ВАЖНО: когда мы запускаем этот код в наших браузерах, обновляем статус и выходим из элемента управления статусом, мы получаем ошибку в консоли JavaScript для библиотеки Pusher. Чтобы исправить это, перейдите на консоль на веб-сайте Pusher.com, перейдите к настройкам и включите отправку событий непосредственно от клиентов.

Мы можем отправлять только события непосредственно от клиентов Presence или Private каналы. Ссылка на официальную документацию — https://Pusher.com/docs/client_api_guide/client_events#trigger-events

Вывод

Мы создали приложение, которое будет отображать всех онлайн-участников определенного сайта presence канала и их статус Если кто-то из пользователей Интернета обновит свой статус, каждый пользователь получит уведомление об обновленном статусе.

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

0*A1pL1ImjGKS6sCyp

Мы только что использовали Node.js и Vanilla JavaScript, чтобы реализовать приведенные выше функции. Вы можете использовать JavaScript для внешнего кода с любым популярным фреймворком, таким как React или Angular. Сервер может также быть Java или Ruby. Для получения дополнительной информации об этом обратитесь к документам Pusher.

Эта публикация в блоге была первоначально опубликована в блоге Pusher.

Добавить комментарий

Ваш адрес email не будет опубликован.