Главная » Angular

Самоучитель по работе с чатом в Angular

На чтение 13 мин. Просмотров 95 Опубликовано

Содержание
  1. Введение
  2. Добавление чата в существующее приложение Angular App
  3. Шаг 1: Получить код для вставки
  4. Шаг 2: Вставьте код вставки в ваше приложение Angular
  5. Шаг 3: Теперь вы добавили чат в ваше приложение Angular.
  6. Добавление чата в новое приложение Angular
  7. Установка Angular
  8. Создание проекта
  9. Создание учетной записи Dead Simple Chat
  10. Создать чат-комнату
  11. Встраивание чата в ваше приложение Angular
  12. Создание чата 1 на 1
  13. Создание группового чата
  14. Настройка чата
  15. Настройка высоты и ширины
  16. Изменение цветов
  17. Перевод чата
  18. Бонус: API и Webhooks
  19. Укажите URL веб-крючка
  20. Заключение

Введение

В этой статье я собираюсь объяснить, как построить приложение Angular Chat с помощью DeadSimpleChat.

Эта статья подготовлена компанией DeadSimpleChat. Высокомасштабируемый чат с поддержкой до 10 миллионов одновременных пользователей.

Чат можно легко добавить к любой существующей веб-странице или приложению Angular. Или вы можете создать его с нуля.

Я рассмотрю оба этих метода:

  1. Добавление чата в существующее приложение Angular
  2. Создание нового приложения Angular и добавление в него чата.

Добавление чата в существующее приложение Angular App

Чтобы добавить чат в существующее приложение Angular, вам понадобится учетная запись в DeadSimpleChat. Если у вас нет аккаунта, вы можете создать его бесплатно на сайте DeadSimpleChat.com.

Ниже перечислены шаги после создания учетной записи

Шаг 1: Получить код для вставки

После создания учетной записи вы попадете в панель инструментов.

На панели управления нажмите на кнопку «Создать чат», чтобы создать чат.

После создания чата нажмите на кнопку Embed Info, чтобы получить информацию о вставке.

На странице Embed Info Page вы можете изменить размер чата в соответствии с вашими потребностями.

Скопируйте код вставки со страницы Embed Info и переходите к шагу 2 к вашему приложению Angular.

Шаг 2: Вставьте код вставки в ваше приложение Angular

Перейдите в ваше приложение Angular

На странице, где вы хотите, чтобы отображался чат, вставьте код, который мы скопировали в шаге 1.

Я создал новое приложение Angular и назвал его angular-chat-application

и хочу добавить чат на свою целевую страницу. Поэтому я собираюсь добавить код вставки в app.component.html

следующим образом

<h1>{{title}}</h1>

<!--embed code copied from DeadSimpleChat in step 1-->
<iframe src="https://deadsimplechat.com/TPwuYzRPV" width="800px" height="600px"></iframe>
Войти в полноэкранный режим Выйти из полноэкранного режима

Для справки вот мой index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularChatApplication</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

Шаг 3: Теперь вы добавили чат в ваше приложение Angular.

Вот и все. Теперь вы добавили чат в ваше приложение Angular. Перейдите на порт localhost, где запущено ваше приложение, чтобы увидеть, что чат добавлен в ваше приложение.

Мое приложение запущено на localhost:4200. И вот что мы видим:

Добавление чата в новое приложение Angular

В этом разделе мы создадим новое приложение angular и добавим в него чат с нуля.

Сначала нам нужно установить angular

Установка Angular

Убедитесь, что на вашем компьютере установлен Angular. Используйте эту команду для установки angular cli

npm install -g @angular/cli
Войдите в полноэкранный режим Выйти из полноэкранного режима

Создание проекта

Откройте терминал и перейдите в директорию, где вы набираете код:

ng new angular-chat-application
Enter fullscreen mode Выйти из полноэкранного режима

Это создаст новый проект.

После установки всех зависимостей откройте приложение в редакторе кода по вашему выбору. Я использую VSCode.

Код будет выглядеть примерно так:

откройте приложение с помощью

ng serve —open

Это запустит сервер приложений на порту 4200. приложение будет выглядеть примерно так:

Теперь, для следующего шага перейдите к

app.component.html
Войти в полноэкранный режим Выйти из полноэкранного режима

файл и удалите его содержимое

и напишите следующий код в файлеapp.component.html

<h1>{{title}}</h1>
Вход в полноэкранный режим Выйти из полноэкранного режима

Теперь перейдите в раздел :

app.component.ts
Войти в полноэкранный режим Выйти из полноэкранного режима

файл и там в компоненте app измените название на angular-chat-application.

Приложение будет выглядеть примерно так:

Теперь добавим немного css на глобальном уровне. Ничего особенного, просто чтобы придать приложению ширину и высоту

перейти к

src/styles.css
Войти в полноэкранный режим Выйти из полноэкранного режима

и вставьте приведенный ниже код:

/*Application-wide Styles */
h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 250%;
  }
  h2, h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
  }
  body {
    margin: 2em;
  }

  /* everywhere else */

  * {
    font-family: Arial, Helvetica, sans-serif;
  }
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь давайте перейдем к созданию учетной записи чата.

Создание учетной записи Dead Simple Chat

перейдите на сайт DeadSimpleChat.com и нажмите на кнопку «Начать бесплатно», чтобы создать бесплатный аккаунт.

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

DeadSimpleChat — это чат-платформа без кода, которая работает со всеми видами веб- и мобильных приложений.

Чат не содержит кода, но вы можете выполнять все расширенные и точные настройки платформы чата, используя API и SDK.

Всеми функциями чата можно управлять с помощью API и Webhooks. Вы можете узнать больше об API, SSO, SDK и Webhooks в документации для разработчиков.

Dead Simple Chat можно использовать для различных целей, например:

  1. SaaS-приложения
  2. Социальные платформы
  3. Образование
  4. Виртуальные мероприятия
  5. Игры

После регистрации аккаунта вы попадете на страницу Dashboard. Здесь мы видим

  1. Приборная панель
  2. Комнаты чата
  3. Модераторы
  4. Настройки
  5. Планы и ценообразование
  6. Разработчик
  7. Прямая трансляция

Создать чат-комнату

На странице Dashboard вы можете увидеть аналитику и боковую панель.

В левом верхнем углу страницы Dashboard вы можете увидеть кнопку «Создать чат».

Создайте чат

Нажав на кнопку сохранения, вы создадите чат и перейдете на страницу обновления чата.

Здесь есть множество функций, которые вы можете включить.

Вот некоторые из функций, доступных в DeadSimpleChat. Если вы не хотите выполнять все настройки при создании чата.

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

Dashboard -> Chat rooms -> edit

Вот некоторые из доступных настроек. Все настройки, которые вы сделаете, будут доступны в вашем приложении Angular.

  1. Имя: Вы можете назвать чат. Это название предназначено для вашей справки и не будет показано пользователям.
  2. Описание: Краткое описание. Это для справки, чтобы вы знали, какова цель чата.
  3. Логотип: Вы можете загрузить свой логотип, и он будет отображаться в правом верхнем углу чата.
  4. Сохранить: Всегда помните, что нужно нажать кнопку сохранения, чтобы сохранить настройки.
  5. Возможность нравиться/реагировать на сообщения: Если эта функция включена, то пользователи могут ставить лайки и реагировать на сообщения.
  6. Режим Q&A / премодерируемый чат: Если этот режим включен, все сообщения будут сначала показываться модератору, и только после одобрения модератором / администратором сообщения будут появляться в чате.
  7. Подчаты / Каналы: Каналы — это чаты внутри чата для обсуждения смежных тем. Вы можете включить их, если они вам нужны
  8. Обмен файлами и изображениями: Позволяет пользователям обмениваться файлами и изображениями в чате.
  9. Приватный чат 1-1: Позволяет пользователям вести приватный чат 1-1 друг с другом.
  10. Приватный чат только для модераторов: Только модераторы могут общаться 1-1 с пользователями. Пользователи не могут общаться 1-1 друг с другом.
  11. По умолчанию Включить уведомление о сообщениях и звук: Включить уведомление и звуковое оповещение на устройствах пользователей, чтобы они получали уведомление каждый раз, когда отправляется сообщение.
  12. Защитить чат паролем: Установите пароль, который будет требоваться для входа в чат.
  13. Экспортировать все сообщения: Экспортировать все сообщения в чате в текстовый файл.
  14. Удалить все файлы: Экспортировать все файлы в чате
  15. Удалить все сообщения: Удалить все сообщения из чата

Также доступна настройка

К этому мы вернемся позже.

Сначала нажмите на кнопку Embed Info, чтобы перейти на страницу Embed Info.

Встраивание чата в ваше приложение Angular

Встроить чат в ваше приложение очень просто. В предыдущем шаге мы были на странице Embed Info.

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

Скопируйте код вставки и перейдите в ваше приложение Angular.

Откройте файл app.component.html и вставьте код вставки

и теперь вы создали приложение чата Angular. Ваше приложение чата будет выглядеть следующим образом:

Вы успешно создали приложение Angular Chat с помощью DeadSimpleChat.

Давайте узнаем, как мы можем создавать различные типы чатов с помощью Angular и DeadSimpleChat.

Создание чата 1 на 1

Создать чат 1 на 1 довольно просто с помощью DeadSimpleChat. Ограничьте количество пользователей в чате до 2 человек, и у вас получится чат 1 на 1.

Давайте попробуем создать такой чат

Перейдите в Dashboard и создайте чат

здесь вы можете дать нашей комнате название 1 на 1 чат и нажать на кнопку сохранить.

На следующей странице общих настроек нажмите на каналы, чтобы отключить их, потому что они нам не нужны для чата 1 на 1.

Теперь давайте перейдем на страницу Embed

Здесь, на странице инструкций по встраиванию, у нас есть 2 варианта: всплывающее окно или рамка для встраивания.

Я собираюсь выбрать всплывающее окно:

Наконец, у меня есть возможность позволить пользователям создать имя пользователя и войти в чат или я могу ввести их автоматически, как только они окажутся на моем сайте, используя функцию DeadSimpleChat SSO. Вы можете узнать больше о функциональности SSO здесь: https://deadsimplechat.com/developer/single-sign-on/basic-sso.

Мы можем использовать API и SDK для точной настройки функциональности чата под наш случай использования

Все функции чата доступны в API

1.отправка сообщения
2.добавление пользователей в чат
3.запрет пользователей
4.создание комнат чата
5.экспорт сообщений

Создание группового чата

Dead Simple Chat по умолчанию создает приложение группового чата. Приложение Angular Chat, которое мы создали, является приложением группового чата.

DeadSimpleChat поддерживает до 10 миллионов одновременных пользователей в групповом чате и, следовательно, является масштабируемым.

Настройка чата

Существует два способа настройки чата

1.Используя инструмент настройки на основе пользовательского интерфейса
2.путем написания пользовательского CSS

Чтобы настроить чат, перейдите в Dashboard и создайте новый чат или отредактируйте существующий, перейдя в раздел чатов и нажав на кнопку редактирования рядом с чатом.

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

Там вы увидите огромный раздел настройки пользовательского интерфейса, где вы можете изменить все, начиная от

1.цвет боковой панели
2.цвет фона
3.цвет текста
4.Шрифты
5.Добавить пользовательские шрифты
6. все параметры приведены на рисунке ниже

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

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

Вы также можете легко скопировать настройки в другие чаты с помощью инструментов копирования настроек

просто выберите чат, в который вы хотите скопировать настройку.

Настройка высоты и ширины

Настроить высоту и ширину довольно просто. Перейдите на страницу встраивания и там вы сможете настроить высоту и ширину чата.

Доступны 2 стандартных варианта и один пользовательский вариант

1.Большой
2.маленький
3.Пользовательский

Вы можете нажать на пользовательскую опцию и установить высоту и ширину в соответствии с вашими требованиями.

Изменение цветов

Существует 2 способа изменения цветов в DeadSimpleChat

1.Настройка на основе пользовательского интерфейса
2.Написание пользовательского CSS

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

Для еще большей настройки вы можете написать свой собственный пользовательский CSS, чтобы точно настроить чат.

Обратитесь к справочнику классов CSS и руководству по пользовательским CSS, чтобы узнать больше.

Перевод чата

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

Вы также можете изменить слова, чтобы сказать в интерфейсе чата все, что захотите.

Бонус: API и Webhooks

Некоторые из функций API включают:

SSO

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

Вы также можете регистрировать пользователей как анонимных пользователей.

Суть SSO заключается в автоматическом входе пользователей в чат без их ручного входа в систему.

Пользователи могут войти и вручную, присвоив себе любое имя пользователя, если вы отключили функцию SSO.

Существует 2 типа функциональности SSO

  1. Базовый SSO: Это простой в реализации SSO, но в нем отсутствуют функции аутентификации.
  2. Расширенный SSO: Это немного расширенный SSO и имеет функции аутентификации.

Чат-комната
API для чата включают следующее

1.Получить все чаты: Получить список всех чатов в массиве.
2.Получить чат: Получить всю информацию об одной комнате чата. Требуется идентификатор комнаты.
3.Удалить чат: Удалить чат через API. Требуется идентификатор комнаты
4.Удалить сообщения чата: Удалить все сообщения из чата.
5.Создать комнату чата: Отправьте запрос на создание чата. При создании чата вы можете передать настройки и аутентификацию.
6.Обновить чат-комнату: Обновление настроек с помощью функции Обновить чат.
7.Создать канал: Создайте подчату/канал с помощью API. Отправьте запрос на создание канала в чате.
8.Получить список всех каналов: Отправьте Get-запрос, чтобы получить список всех каналов в чате.
9.Обновить канал: Обновление каналов из API. Изменить имя канала, включить и выключить каналы.
10.Удалить канал: Удалить канал с помощью API. Отправьте запрос на удаление с идентификатором канала, чтобы удалить канал.
11.Присутствие: Получение информации о пользователях в чате.
12.Пользователь и модератор:
13.Создать пользователя: отправьте запрос на создание пользователя в чате.
14.Создать модератора: Отправить запрос на создание модератора. Назначьте модератора в чат. Модераторы, созданные с помощью API, могут войти в чат, передав сгенерированный токен доступа в чат.
15.Подтвердить маркер доступа: отправьте запрос на сообщение с маркером доступа, чтобы подтвердить маркер доступа.
16.Отправлять сообщения в чат: отправьте пост-запрос для отправки сообщений в чат через API.
17.Отправлять сообщения на определенный канал: отправить запрос на отправку сообщений на определенный канал.
18.Экспортировать сообщения: Получить все сообщения, отправленные в чате
19.Экспортировать файлы: Получить все файлы, отправленные в чате
20.Webhooks: Перейдите в DeadSimpleChat Dashboard -> Settings -> Webhooks, чтобы включить Webhooks.

С помощью Webhooks вы можете получать события в свои системы. Существуют веб-крючки для следующих событий

Укажите URL веб-крючка

1.Новые сообщения в чате
2.Пользователь вошел в чат
3.Пользователь покинул чат
4.Удаление сообщения в чате
5.Реакция на сообщение чат-комнаты
6.Сообщение чата одобрено
7.Сообщение нового канала
8.присоединение к каналу
9.Сообщение канала удалено
10.Реакция на сообщение канала

Заключение

В этой статье я рассказал, как создать приложение для чата на Angular. Код этого приложения можно найти на github.

Вы также можете запустить его в контейнере docker.

Если вам нужна помощь в реализации, вы всегда можете обратиться в службу поддержки: support [at] deadsimplechat.com

Оцените статью
devanswers.ru
Добавить комментарий