В документации Feathers есть руководство по созданию API чата, включая простой интерфейс. Но как его интегрировать с другими фреймворками? Этот пост является частью продолжающейся серии по интеграции различных интерфейсных фреймворков с последней версией Feathers (в настоящее время Auk).

Однако вам не всегда нужен фреймворк. На этот раз мы погрузимся в создание интерфейса чата в реальном времени с регистрацией и входом в систему, используя старый добрый JavaScript с ES6, который поддерживается большинством современных браузеров. Это также поможет показать, что такое Feathers, не отвлекаясь от структуры каркаса. Вы можете найти код финальной версии здесь.

Настройка индексной страницы

Если вы прошли через чат-гид, в public/index.html вашего проекта уже будет файл. Теперь мы будем использовать его для реализации чата JavaScript, обновив его до следующего:

Это загрузит наш стиль CSS чата, добавит контейнер div #app и импортирует несколько библиотек:

  • MomentJS для форматирования наших дат
  • Браузерная версия Feathers (поскольку мы не используем загрузчик модулей, такой как Webpack или Browserify)
  • Socket.io, предоставляемый API чата
  • app.js для нашего кода, чтобы жить в

Давайте создадим public/app.js, где будет жить весь следующий код (с каждым примером кода, добавленным в конец этого файла).

Подключение к Feathers API

Сначала мы начнем с самого важного - подключения к нашему Feathers API. Вы уже видели, как Feathers можно использовать на клиенте, в главе о создании интерфейса руководства по чату. Здесь мы делаем почти то же самое: устанавливаем соединение Socket и инициализируем новое приложение Feathers, но мы также настраиваем клиент аутентификации, который мы будем использовать позже:

Это позволяет нам общаться с API чата через веб-сокеты (это означает, что мы также получаем события в реальном времени, когда создается новое сообщение, вместо того, чтобы опрашивать сервер для получения обновлений).

Статический HTML и элементы пользователя / сообщения

Затем мы должны определить некоторый статический и динамический HTML, который мы можем вставить на страницу, когда мы хотим показать страницу входа (которая также дублирует страницу регистрации) и фактический интерфейс чата:

Это добавит следующие переменные и функции:

  • loginHTML содержит статический HTML-код для страницы входа / регистрации.
  • chatHTML содержит основное содержимое страницы чата (после входа пользователя в систему)
  • addUser(user) - это функция для добавления нового пользователя в список пользователей слева
  • addMessage(message) - это функция для добавления нового сообщения в список. Он также будет следить за тем, чтобы мы всегда прокручивали в конец списка сообщений по мере добавления сообщений.

Отображение страницы входа / регистрации или чата

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

  • showLogin(error) либо покажет содержимое loginHTML, либо, если страница входа уже отображается, добавит сообщение об ошибке. Это произойдет, когда вы попытаетесь войти в систему с недопустимыми учетными данными.
  • showChat() немного интереснее. Сначала мы добавляем статический chatHTML на страницу. Затем мы получаем последние 25 сообщений от службы messages Feathers (это то же самое, что /messages конечная точка нашего API чата), используя синтаксис запроса Feathers. Поскольку список сначала вернется с самым новым сообщением, нам нужно отменить данные, а затем добавить каждое сообщение, вызвав нашу функцию addMessage, чтобы она выглядела так, как должно работать приложение чата - сообщения стареют по мере прокрутки вверх. Затем мы получаем список всех зарегистрированных пользователей, чтобы показать их на боковой панели, вызвав addUser.

Войти и зарегистрироваться

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

  • getCredentials() получает нам значения полей имени пользователя (электронной почты) и пароля со страницы входа / регистрации, которые будут использоваться непосредственно с аутентификацией Feathers.
  • login(credentials) либо аутентифицирует учетные данные, возвращаемые getCredentials, в нашем API Feathers, используя local стратегию аутентификации (например, имя пользователя и пароль), либо, если учетные данные не указаны, использует стандартную аутентификацию токена JWT. При этом сначала будет предпринята попытка получить JWT из localStorage, где он будет автоматически помещен после успешного входа в систему, чтобы нам не приходилось входить в систему каждый раз, когда мы посещаем чат. Только если это не сработает, отобразится страница входа. Дополнительные сведения см. В разделе Добавление аутентификации в руководстве по чату или в наших руководствах по аутентификации. Наконец, если вход был успешным, отобразится страница чата.
  • Мы также добавили прослушиватели событий нажатия для трех кнопок. Нажав#signup, вы одновременно зарегистрируетесь и войдете в систему. Сначала он создаст нового пользователя в нашем API, а затем войдет в систему с той же информацией пользователя. #login получит учетные данные и просто войдет в систему с ними. Наконец, #logout забудет JWT и снова покажет страницу входа.

В режиме реального времени и отправка сообщений

На последнем этапе мы добавим функцию отправки нового сообщения и обновим список пользователей и сообщений в режиме реального времени.

  • Слушатель событий кнопки #submit получает текст сообщения из поля ввода, создает новое сообщение в службе сообщений и затем очищает поле.
  • Затем мы добавили два created слушателя событий. Один для сообщений, который просто вызывает addMessage, чтобы добавить новое сообщение в список, и один для пользователей, который добавляет пользователя в список через addUser. Вот как Feathers работает в режиме реального времени и все, что нам нужно сделать, чтобы все обновлялось автоматически.
  • Чтобы запустить наше приложение, мы вызываем login(), который, как упоминалось выше, либо сразу покажет приложение чата (если мы вошли в систему раньше и срок действия токена еще не истек), либо страницу входа.

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

Если вы еще не пробовали FeathersJS, попробуйте его и дайте нам знать, что вы думаете, в Slack или Twitter.