Рахат Ханна
“Эй, как жизнь?” это не фраза, которую мы должны задать кому-то в эти дни. В наши дни знание того, что кто-то должен, стал таким легко, потому что мы продолжаем видеть обновленные статусы для всех наших друзей на WhatsApp, SnapChat, Facebook и т. Д.
В этой статье мы узнаем, как мы можем обновить статус пользователя в компоненте в реальном времени вместе со списком всех членов, которые являются онлайн.
Мы будем использовать Node.js. В качестве сервера приложений ванильный JavaScript в интернет-конце, а также Толкатель Для связи в реальном времени между нашим сервером и интерфейсом.
Мы построим приложение, которое будет похоже на ваш список друзей или общий чат, где вы можете увидеть, кто онлайн и какое их последнее обновление статуса в реальном времени. Мы узнаем о Pusher Присутствие Канал и как узнать об онлайн-членах на этом канале.
Мы будем строить следующие компоненты во время этого сообщения в блоге:
Node.js Сервер с использованием Framework.js Framework:
- /Регистрация API – Чтобы зарегистрировать/войти нового пользователя на наш канал и сервер, создавая их сеанс и сохраняя их информацию
- /isloggedin API – Чтобы проверить, будет ли пользователь уже войти в систему или нет в случае обновления браузера
- /usersystem/auth API – валидация AUTH, сделанная от pusher после регистрации его с нашим приложением и подписки к присутствию или частным каналам
- /Выход из системы API – чтобы выйти пользователю и удалить сеанс
Фронтальное приложение с помощью JavaScript:
- Форма регистрации/входа – для регистрации/входа нового пользователя, заполнив их имя пользователя и начальный статус
- Список участников – чтобы увидеть всех, кто онлайн и их обновленные статусы
- Обновить статус – Чтобы нажать на существующий статус и обновите его на размытие элемента управления текстом состояния
Найти здесь ссылка к репозиторию GitHub для справки.
Введение в толкатель
Pusher – это платформа, которая тезирует сложности реализации системы Realtime на наших собственных с использованием Websockets или длительного опроса. Мы можем мгновенно добавить функции в реальном времени нашим существующим веб-приложениям, используя Pusher, поскольку он поддерживает широкий спектр комплектов разработки программного обеспечения (SDK).
Интеграционные комплекты доступны для различных интерфейсных библиотек, таких как позвоночник, реагирование, угловые и jQuery – а также задневские платформы/языки, такие как .NET, Java, Python, Ruby, PHP и GO.
Подписаться с толкателем
Вы можете создать бесплатный аккаунт в толкахе здесь Отказ После того, как вы зарегистрируетесь и войдите в систему в первый раз, вам будет предложено создать новое приложение, как видно на изображении ниже. Вам придется заполнить некоторую информацию о вашем проекте, а также предоставить переднюю библиотеку или обратный язык, с которым вы будете создавать ваше приложение.
Для этой конкретной статьи мы будем выбирать JavaScript для переднего и Node.js для задней части, как видно на изображении выше.
Это просто покажет вам набор кодов образец стартера для этих выборов, но вы можете использовать любой интеграционный комплект позже с этим приложением.
Node.js сервер
Node.js должен быть установлен в системе как предпосылка для этого проекта. Теперь давайте начнем строить сервер Node.js и все необходимые API с использованием Express. Инициализировать новый проект узла по следующей команде:
npm init
Установка зависимостей
Мы будем устанавливать требуемые зависимости, такие как Express, Express-Session, Pusher, Body-Parser, Purese-Parser по следующей команде:
Фонд сервера
Теперь мы создадим базовый фонд для сервера Node.js, а также включить сеансы в нем, используя Экспресс-сессия модуль.
В приведенном выше коде мы создали базовый экспресс-сервер и используя метод .использовать Мы включили Cookie-Parser, Body-Parser и статический файл, обслуживающий от публичный папка. Мы также включили сеансы, используя Экспресс-сессия модуль. Это позволит нам сохранять информацию о пользователе в соответствующей сеансе запроса для пользователя.
Добавление толка
Pusher имеет модуль NPM с открытым исходным кодом для интеграции Node.js, который мы будем использовать. Он обеспечивает набор методов утилиты для интеграции с толкательными API с использованием уникального appid , ключ и а секретарь . Мы сначала установим толкаер NPM Модуль с использованием следующей команды:
npm install pusher --save
Теперь мы можем использовать требуется чтобы получить Толкатель Модуль и создание нового экземпляра, передавающего объект параметров с важными ключами для инициализации нашей интеграции. Для этой статьи я выбрал случайные ключи – вам придется получить их для вашего приложения с помощью приборной панели толкателя.
Вам придется заменить appid , ключ и а секрет со значениями, специфичными для вашего собственного приложения. После этого мы напишем код для нового API, который будет использоваться для создания нового комментария.
Регистрация/Вход API
Теперь мы разработаем первый маршрут API нашего приложения, через которое новый пользователь может зарегистрироваться/входить в систему и сделать себя доступным в нашем приложении.
В приведенном выше коде мы выставили Пост API вызов по маршруту /Регистрация который ожидал имя пользователя и Статус Параметры для передачи в тело запроса. Мы будем спасать эту информацию о пользователе в Запрос сеанса Отказ
Пользовательская система Auth Auth API
Чтобы позволить любому клиенту подписаться на толкатель Частный и Присутствие Каналы, нам нужно реализовать auth API, который будет аутентифицировать запрос пользователя, позвонив Толкатель. Поуметница Метод на стороне сервера. Добавьте следующий код на сервере, чтобы выполнить это условие:
Нам нужно предоставить конкретный маршрут в инициализации боковой библиотеки Pusher Client, которую мы увидим позже. Клиентская библиотека Pusher автоматически позвонит этому маршруту и проходит в Channel_Name и Socket_id характеристики. Мы одновременно получим информацию о пользователе от объекта сеанса пользователя и передаем его как Презана к Толкатель. Поуметница Способ вызова.
Isloggedin и api logout
Если пользователь обновляет браузер, приложение для клиента должно обнаружить, что пользователь уже зарегистрирован или нет. Мы осуществим isloggedin API маршрут для этого. Кроме того, нам нужен Выход Маршрут, чтобы позволить любому пользователю выйти из приложения.
Фортовое приложение с использованием ванильного JavaScript
Теперь мы будем развивать приложение для интерфейса, чтобы зарегистрировать новый пользователь с начальным статусом и увидеть участников, которые являются онлайн и их статусами. Мы также будем создавать функцию для вошедшего пользователей, чтобы обновить своих пользователей, и все остальные пользователи увидят обновленный статус в реальном времени.
Шаг 1: Создайте папку с именем общественности и создать файл index.html
Мы уже написали код в нашем Server.js служить статическому контенту от публичный Папка, поэтому мы напишем все наш интерфейсный код в этой папке.
Пожалуйста, создайте новую папку публичный а также создать пустую index.html файл на данный момент.
Шаг 2: добавить код BoaterPlate на наш index.html
Мы будем добавлять какой-то базовый код Bovertlate для настройки базовой структуры для нашего веб-приложения, например Заголовок и Разделы где регистрационная форма и список участников могут быть размещены.
В вышеупомянутом коде котел, мы ссылались на наш основной файл JavaScript app.js. и библиотека JavaScript на стороне Client Thure. У нас также есть тег скрипта, где мы разместим шаблон для ряда элементов в списке участников. Кроме того, у нас есть два пустых теги DIV с идентификаторами меня и Участники Содержать зарегистрированные имени пользователя и информацию, а также список всех других участников со своим статусом.
Шаг 3: Style.css
Важно отметить, что мы будем отображать форму регистрации в первый раз и Участники и Выйти Кнопка будет скрыта по умолчанию изначально. Пожалуйста, создайте новый файл под названием style.csss и добавьте следующие CSS к нему:
Пожалуйста, попробуйте открыть URL http://localhost: 9000 В вашем браузере и приложение загружается с основным регистром или формой входа в систему с именем пользователя и статус. Выход будет выглядеть как скриншот ниже:
Шаг 4: Добавить App.js Базовый код
Теперь мы добавим наш код JavaScript, чтобы иметь основные элементы утилиты внутри самопознания функции для создания частного объема для наших переменных приложений. Мы не хотим загрязнять глобальную область JavaScript.
В приведенном выше коде мы ссылались на все важные переменные, которые мы будем требовать. Мы также инициализируем библиотеку Pusher, используя Новый толкатель и прохождение ключа API в качестве первого аргумента. Второй аргумент содержит необязательный объект Config, в котором мы добавим ключ AuthencePoint с маршрутом пользовательского узла API /usersystem/auth А также добавить ключ зашифрован Установка его значение правда Отказ
Мы создадим пару общих функций для отображения или скрытия элемента, передавающего его уникальный идентификатор. Мы также добавили общий метод имени ajax Чтобы сделать AJAX-запросы с использованием объекта XMLHTTP в ванильном JavaScript.
При нагрузке страницы мы сделаем запрос AJAX, чтобы проверить, вошел ли пользователь в системе или нет. Если пользователь вошел в систему, мы будем непосредственно использовать экземпляр Pusher, чтобы подписаться на пользователь на канал присутствия с именем Присутствие-Whatsup-члены Отказ Вы можете иметь это как уникальный чат или местоположение приложения, где вы хотите сообщить/отслеживать онлайн-члены онлайн.
Мы также написали метод выше для addnewmember Использование запроса AJAX к Регистрация Маршрут API Мы встроили в Node.js. Мы будем передавать имя и начальный статус, введенный в форму.
У нас также есть способ обновления состояния представления пользователя на основе состояния в системе зарегистрированного в систему. Этот метод ничего не делает, кроме как обновлять видимость списка членов, кнопки выхода и формы регистрации. Мы использовали BindChannelevents Метод, когда пользователь вошел в систему, который мы будем реализовать позже в сообщении в блоге.
Пожалуйста, добавьте следующие CSS в style.csss файл для отображения я Элемент соответствующим образом с именем пользователя и состоянием зарегистрированного пользователя.
Шаг 5: Добавить код, чтобы сделать список пользователей и BindChannelevents
Теперь после подписки на канал нам нужно связать определенные события, чтобы мы могли знать, когда новый элемент добавляется в канал или удален из него. Мы также связываемся с пользовательским событием, чтобы знать, когда кто-то обновляет их статус.
Добавьте следующий код в app.js файл:
В вышеуказанном BindChannelevents Метод, мы используем Channel.bind Метод связывания обработчиков событий для 3 внутренних событий – Ушер: подписка на | , Pusher: Member_addoed , Pusher: Member_Remured и 1 пользовательское событие - Client-Status-Update Отказ
Теперь мы добавим код JavaScript для рендеринга списка членов. Важно знать, что объект, который я вернул из . Подписаться Метод имеет свойство под названием Члены , который можно использовать для знания информации о вошедшем пользователе, упомянутую ключом я и другие участники по ключу Члены Отказ Добавьте следующий код в app.js файл:
Мы добавили обработчик событий для нового события Add/Remove элемента для повторного визуализации списка участников, чтобы он остался обновлен только с онлайн-членами. Чтобы показать список участников, нам нужно добавить следующий стиль в наш файл style.csss :
Теперь мы напишем код для запуска события клиента на нашем канале, чтобы уведомить всех пользователей о изменении состояния зарегистрированного пользователя. Добавьте следующий код в свой app.js файл:
ВАЖНЫЙ : Когда мы запускаем этот код в наших браузерах, обновите статус и размыли из элемента управления состояниями, мы получим ошибку в консоли JavaScript для библиотеки Pusher. Чтобы исправить это, перейдите к консоли в Pusher.com Сайт, перейдите к настройкам и включите отправку событий от клиентов напрямую.
Мы можем только отправлять события от клиентов напрямую для Присутствие или Частный каналы. Ссылка на официальную документацию – https://Pusher.com/docs/client_api_guide/client_events#trigger-events
Заключение
Мы создали приложение, которое отобразит всех онлайн-членов для определенного Присутствие канал и их статус. Если какой-либо из онлайн-пользователей обновляет свой статус, каждый пользователь будет уведомлен об обновленном состоянии.
Этот компонент или код можно использовать для разработки сетевого сетевого сетевого раздела в большинстве веб-приложений в эти дни. Это важный случай использования, когда пользователь должен знать о других доступных участниках. Например: онлайн-приложение в классе может видеть другие участники, и статус может соответствовать любому вопросу, который любой участник хочет спросить докладчика.
Мы только что использовали Node.js и ванильный JavaScript для реализации вышеуказанных функций. Вы можете использовать JavaScript для переднего кода с любыми популярными каркасами, такими как Реагировать или Угловой Отказ Задний конец также может быть Java или Ruby Отказ Пожалуйста, обратитесь к DUSHER DOCS для получения дополнительной информации об этом.
Этот блог был изначально опубликован на Блог Pusher Отказ
Оригинал: “https://www.freecodecamp.org/news/how-to-update-a-users-status-in-realtime-using-javascript-and-pusher-2cae8f4aaafa/”