Это сообщение было впервые опубликовано на codershood.info.

Полный исходный код доступен на Github.

Это третья часть приложения для создания приватного чата в реальном времени с использованием Angular. В этой части вы реализуете перечисленные ниже функции в своем приложении,

  1. Вы подключите свое приложение Angular к Socket Server.
  2. Вы будете реализовывать список чатов в реальном времени для приложения.
  3. Вы напишете событие Socket Server, чтобы передать обновленный список чатов.
  4. Выделите выбранного пользователя из списка пользователей

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

Как только приложение завершит проверку сеанса, мы подключим этот Angular к серверу сокетов Nodejs. Как только сокет-сервер будет подключен, сразу после этого мы подпишемся на обновление списка чатов в реальном времени.

Итак, давайте запачкаем руки и начнем интегрировать совершенство в реальном времени в наше приложение.

Подключение приложения Angular к Socket Server

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

Здесь мы добавим немного дополнительного сахара, передав параметр при подключении к серверу сокетов.

=›Что мы и сделаем, используя приведенный ниже код,

Теперь вы можете спросить Зачем нам это вообще нужно?
Что ж, ответ прост. Нам нужен userId, чтобы определить, какой пользователь только что подключился к серверу сокетов. Также мы обновим идентификатор сокета подключенного пользователя в MongoDB.

=› Обновленный socketId будет использоваться на разных этапах приложения.

=›Поскольку у вас все готово к работе, все, что вам нужно сделать, это вызвать connectSocket()(Этот метод определен внутри socket.service.ts файл) из класса HomeComponent. Откройте файл home.component.ts и добавьте ниже inHomeComponentclass,

home.component.ts:

Как я уже говорил ранее, мы обновим socketId пользователя в базе данных MongoDB, поэтому позже сможем использовать его в приложении. Если вы проверите строку подключения к сокету на вкладке сети, вы должны увидеть что-то похожее на показанное ниже изображение.

На данный момент я использую браузер Chrome. Хотя это не имеет никакого отношения к тому, какой браузер вы используете. В любом случае убедитесь, что вы передаете идентификатор пользователя при подключении к серверу сокетов.

Теперь вы указали userId в качестве параметра подключения к сокету. Давайте завершим абстрактную работу на стороне сервера.

Откройте файл socket.js и добавьте в него приведенный ниже код:

сокет.js:

Пояснение:

  • Первое, на что следует обратить внимание, это то, что мы читаем параметр userId, используя строку, показанную ниже:
  • Во-вторых, у нас есть методaddSocketId() для обновления данных в MongoDB.
  • И, наконец, мы вызвали остальную часть события сервера сокетов, вызвав метод callthis.socketEvents().

Реализация списка чатов в реальном времени

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

  1. Создание компонента ChatList.
  2. Написание разметки для списка чатов
  3. НаписаниеChatList компонента Class.
  4. Запись события сервера сокетов.
  5. Обновление онлайн-статуса пользователя в ChatList
  6. Выбор пользователя из списка чатов пользователя.

К концу этой статьи у вас будет полноценный рабочий список чатов для вашего приложения. Так что давайте вонзимся в него зубами и закончим.

Создание компонента ChatList

Почему новый компонент для ChatList? Хотя мы можем написать всю разметку и код внутри HomComponent. Но это не очень хорошая практика, и ваш класс HomeComponent будет тяжелым и долгим в управлении.

=› Поэтому в первую очередь вам нужно создатьChatListcomponent ничего особенного. Выполните приведенные ниже команды Angular CLI.

=› Первая команда для создания модуля ChatList,

=› Затем второй сгенерирует фактический компонент,

=› Теперь вашChatListмодуль готов к использованию. Давайте импортируемChatListмодуль вHomeМодуль. Откройте home.module.ts и добавьте строку ниже, чтобы ваш файл home.module.ts выглядел следующим образом:

home.module.ts:

Теперь вы добавляете <app-chat-list> в свой файл home.component.html, и он должен показывать традиционное сообщение chat-list works!.

Итак, на данный момент ваш файл home.component.html должен выглядеть следующим образом.

home.component.html:

Написание разметки для списка чатов

Откройте chat-list.component.html и добавьте показанную ниже разметку. Приведенный ниже код смехотворно прост для понимания.

=› Следующее — этоchatListUsersproperty класса ChatListComponent.

=› ВchatListUsersсвойстве мы будем хранить список пользователей. Эта переменная не что иное, как массив, который обновляется при определенных условиях.

chat-list.component.html:

Написание класса компонента ChatList

На этом этапе ваш компонент ChatList ничего не будет отображать. Итак, чтобы заставить его работать, мы добавим некоторый код в класс компонента ChatList. По сути, в этом классе сделайте две важные вещи.

=›Во-первых, мы обновим список чатов, а во-вторых, мы передадим данные выбранного пользователя из списка пользователей в компонент «Разговор».

=›Но сначала давайте добавим необходимые свойства, требуемые в классе компонента ChatList, откроем chat-list.component.ts и добавим следующие свойства:

chat-list.component.ts:

Теперь давайте добавим код для обновления списка чатов, этот код будет в основном манипулировать свойством chatListUsers.

Итак, откройте chat-list.component.ts и добавьте приведенный ниже код.

chat-list.component.ts:

Мы знаем, что делает приведенный выше код, давайте разберемся, как он работает!

Пояснение:

  1. МетодомgetChatList()обновляем список пользователя, который определен в сервисе SocketService.
  2. Например, если новый пользователь входит в систему или существующий пользователь выходит из сети, в обоих случаях мы обновляем список онлайн-пользователей.
  3. Здесь я передаю полный список онлайн/оффлайн пользователей с сервера сокетов nodejs пользователю, который только что зашел в систему.
  4. А для остальных пользователей те, кто уже в сети, получат информацию о пользователях, которые вышли из сети или только что вошли в систему. Это имеет смысл, верно? Потому что отправлять полный список онлайн-пользователей каждому пользователю нехорошо.
  5. Теперь, если вы видите приведенный выше код, есть блок else if()code для следующей задачи.
  6. Если ответ от события сокета содержит свойство singleUser, это означает, что новое соединение сокета установлено.
  7. Если ответ содержит свойство userDisconnected, это означает, что пользователь перешел в автономный режим и удалил пользователя из списка чатов.
  8. И, наконец, в условии else мы обновим список пользователей в блоке else.

Запись событий Socket Server для отправки обновленного списка чатов

Все вышеперечисленное происходит только в том случае, если у вас есть сервер Socket, который отвечает на обновленный список чатов. В любом случае, давайте поговорим о чем-нибудь конструктивном.

=› Здесь вы будете писать socket.io.onlistener на стороне сервера, когда клиент запрашивает его.

=› Как только Angular запросит список чатов на сервер Socker, сокет запросит детали из базы данных.

=›После запроса на основе пользователя выдается результат.

Итак, это была основная идея, давайте посмотрим код, чтобы реализовать то же самое. Откройте socket.js и добавьте приведенный ниже код:

сокет.js:

Пояснение:

Приведенный выше код кажется простым для понимания. Но я, будучи собой, все равно объясню.

  1. Прежде всего, мы проверим валидацию. Если все идет хорошо, процесс идет впереди, иначе выдается ответ с сообщением об ошибке.
  2. Во-вторых, внутри блока try-catch мы будем выполнять все действия. Почему ? потому что вы никогда не знаете, когда ваш код взорвется.
  3. Шучу, try-catch предназначен для обработки неизвестных исключений и необработанных отказов обещаний. И я чувствую, что это хорошая практика для подражания.
  4. Затем внутри блока try-catch вы сначала получите информацию о пользователе, вызвав getUserInfo(). Позже вы все getChatList(), которые определены внутри класса QueryHandler.
  5. Почему вы создаете два события сокета?Как я объяснял в предыдущем разделе, вы не хотите отправлять пользователю весь список чатов, а отправляете только информацию о пользователе, который выходит в онлайн/офлайн.

Давайте взглянем на те методы, которые определены в классе theQueryHandlerclass. Откройте query-handler.js и добавьте приведенный ниже код:

В приведенном ниже коде мы просто выполняем запрос MongoDB. На основе параметра socketId мы проецируем результат из базы данных.

запрос-handler.js:

Остался последний способ — получить список чатов из базы данных. Честно говоря, вы просто извлекаете всех пользователей из базы данных и отображаете их во внешнем интерфейсе в зависимости от статуса онлайн/офлайн.

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

Откройте query-handler.js и добавьте приведенный ниже код. В приведенном ниже коде мы получим все записи из базы данных.

запрос-handler.js:

В приведенном выше коде мы выполняем запрос MongoDB. Этот запрос извлечет список пользователей из базы данных, используя заданное условие. После выполнения запроса он вернет результат через Promise.

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

Выбор пользователя из списка чатов для чата

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

=›В этом разделе мы просто выделим выбранного пользователя из списка чатов.

=› Откройте chat-list.componet.html и замените код. Здесь мы используем классы начальной загрузки, поэтому вам не нужно написать любой CSS для этого.

список чатов.componet.html:

Пояснение:

  1. Как видите, метод isUserSelected() вернет true или false, это единственный мотив этого метода.
  2. Он сравнивает выбранный пользователем идентификатор пользователя с идентификатором пользователя, который вы передаете методу insideisUserSelected().

Я не буду объяснять всю работу этого, но я написал отдельный пост о том же. Обязательно прочитайте, как Выделить выбранную строку в Angular 2, это поможет вам понять это.

=› Откройте chat-list.compoenet.ts и добавьте указанное ниже свойство в класс ChatListComponent,

Это свойство будет содержать значение выбранного идентификатора пользователя. Чтобы использовать эту функцию, добавьте следующие методы в chat-list.compoenet.ts.

chat-list.component.ts:

Пояснение:

  1. Метод isUserSelected() вернет true или false на основе сравнения selectedUserId и userId.
  2. Метод selectedUser() обновит свойство selectedUserId. Кроме того, этот метод будет выдавать последний выбранный идентификатор пользователя, используя тему поведения.

Заключительная записка

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

  1. Мы подключили наше приложение Angular к Socket Server.
  2. Мы реализовали список чатов в реальном времени для приложения.
  3. Мы написали Socket Server Event для отправки обновленного списка чатов.
  4. Выделил выбранного пользователя из списка пользователей

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