Автор оригинала: Christian Nwamba.
Как вы, выращиваете, мне интересно, какая магия стоит за «печатать», которое появляется в большинстве приложений в чате, когда друг, которого я отправляю, начинает печатать. Для веселья я решил реализовать эту функцию с самыми простыми инструментами, которые я мог бы положить руки.
Ionic Будет наша платформа для создания мобильного приложения чата, пока Deepstream будет служить инструментом для очень быстрой передачи данных в реальном времени.
Давайте начнем.
Создать ионный проект
Ionic Project принимает незначительное время для настройки. Это в результате инструмента CLI, предоставленного Iонной командой, чтобы помочь лесам новых проектов. Во-первых, вам нужно будет установить этот инструмент CLI, то вы можете использовать инструмент для создания нового проекта:
#1. Install CLI too npm install -g ionic #2. Scaffold new project ionic start is-typing blank --v2 #3. Enter project directory cd is-typing #4. Start App ionic serve -l
- Первая команда устанавливает IONIC с помощью узла. Он устанавливается по всему миру с
G
Флаг, чтобы иметь инструменты CLI, доступные в вашей системе. -
Начать
Команда создает новый проект по именипечатает
Отказ Это делается путем создания папки и копирования всех необходимых файлов для базового проекта, включая зависимости.пустой
Опция указывает, какой шаблон мы хотим начать с того, когда--v2
Рассказывает установщика на эшафот с IONIC 2 не Ionic 1. -
Подавать
Команда запускает приложение в порту8100.
Установка Deepstream
Deepstreamhub – это сервер в реальном времени, который предлагает быстрый передача данных в реальном времени. Вы можете Создать учетную запись Захватите свой URL-адрес подключения от Приборная панель и подключить ваше приложение к нему.
С созданной учетной записью вам нужен способ взаимодействия с сервером. Это где входят клиенты Deepstream. Клиентские SDK открыты для вас, чтобы легко взаимодействовать с сервером. Вы можете установить JavaScript SDK через NPM
или включите тег скрипта. NPM
всегда лучше, но для просмотра, давайте просто скачать и добавить Сценарий источника нашему index.html
:
Экраны приложений
Нам нужно подготовить два экрана для нашего приложения – домашняя страница, где чат происходит и модал, который представлен для новых пользователей, чтобы предоставить свои учетные данные перед присоединением к чату.
Домашняя страница квалифицируется как страница, но модаль может быть просто простым компонентом. Существует не так много раз разницы между этими двумя, так же, как они обрабатываются ионическими.
Модальный экран
Прежде чем работать на домашней странице, где живет наш чат, давайте сначала даст идентификацию пользователей, запросив их имя пользователя и электронное письмо через модаль. Пароль не нужен, это открытая группа чата.
Создать новую папку, Компоненты
В SRC
каталог. Внутри нового Компоненты
Папка, добавить новый Имя пользователя-модаль
составная часть:
// ./src/components/username-modal.component.ts import { Component } from '@angular/core'; import { ViewController } from 'ionic-angular'; @Component({ selector: 'username-modal', templateUrl: 'username-modal.component.html' }) export class UsernameModal { model = { username: '', email: '' }; constructor(public viewCtrl: ViewController) {} dismiss() { this.viewCtrl.dismiss(this.model); } }
Это до ViewController
управлять модальным, поэтому он вводится в конструкторе. Когда Уволить
Метод вызывается через конструктор, модал уволен и Модель
(Быть данными формы) будет отправлена на Главная
Страница компонента.
Шаблон состоит из основных элементов управления формы для имени пользователя и электронной почты, а также кнопки, чтобы вызвать Уволить
:
Join Chat Room Username Avatar Email
Когда ваше приложение перезагружает, ничего не происходит, потому что модаль еще не вызывается. Мы обрабатывали увольнение, но не инициализацию. Инициализация может быть заботится о родительском компоненте, который является Главная
Отказ Давайте переместим наш прожектор в Главная
составная часть.
Главная страница экрана
Ожидается, что на экране домашней страницы:
- Вызывать модаль
- Инициализировать Deepstream
- Обрабатывать новые сообщения чата
- Визуализация сообщений чата
- Реализация «Набирает» функцию
Давайте начнем с вызова модального.
Призывающий модал
В предыдущем разделе мы создали модаль, но этот модаль не может вызвать себя. Компонент домашнего страницы должен:
// ./src/pages/home/home.ts import { Component, OnInit } from '@angular/core'; import { NavController, ModalController } from 'ionic-angular'; import md5 from 'blueimp-md5'; import { UsernameModal } from '../../components/username-modal.component' @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage implements OnInit { user: any; constructor( public modalCtrl: ModalController ) { } ngOnInit() { this.presentModal() } presentModal() { const usernameModal = this.modalCtrl.create(UsernameModal); usernameModal.onDidDismiss(data => { // Update user property this.user = Object.assign( {}, data, {avatar: `https://s.gravatar.com/avatar/${md5(data.email.trim().toLowerCase())}?s=200.jpg`} ) }); usernameModal.present(); } }
нынешний
Метод создает модальный на основе Убийнамемодал
Отказ
После этого, ondiddismiss
Событие прикреплено для прослушивания, когда Уволить
Метод вызывается в модальном компоненте. Когда это произойдет, мы обновляем Пользователь
Недвижимость с любой информацией приходит из Убийнамемодал
составная часть. Еще одна интересная вещь вот что мы выбираем аватар, используя Gravatar на основе хешированной электронной почты.
После настройки события нынешние
Метод называется для представления этого модала.
В нашем случае мы ожидаем, что нет кнопки, нажмите, чтобы вызвать этот модаль, мы просто хотим вызвать его, как только приложение запущено. Поэтому мы выполняем метод в Ngoninit
метод жизненного цикла.
ModalController
Раскрывает API для взаимодействия с нашими Умередал
Вот почему он вводится выше.
Инициализировать Deepstream
Далее нам нужно настроить Deepstream Client, чтобы позволить нам общаться с нашим сервером Realtime. Сначала нам нужно объявить Deepstream
Как Global Sy Typearcript не кричит на нас с ошибками:
// ./src/pages/home/home.ts ... declare var deepstream;
Затем вы можете подключиться к серверу, используя URL-адрес приложения на приборной панели:
// ./src/pages/home/home.ts export class HomePage implements OnInit { user: any; client: any; constructor( public modalCtrl: ModalController ) { } ngOnInit() { this.presentModal() this.client = deepstream(''); this.client.login() this.client.on('error', (err) => { console.log(err) }) } presentModal() { ... } }
Вход
Метод открывает соединение с сервером. Ошибки могут возникнуть во время жизненного цикла этого соединения, поэтому становится важно обрабатывать эти ошибки. Мы делаем это, слушая Ошибка
. событие и вход в консоль.
Новые сообщения чата
Давайте создадим форму, чтобы создать новые сообщения чата и использовать Deepstream События Чтобы обработать новые обновления сообщения:
import moment from 'moment' @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage implements OnInit { user: any; client: any; model: any = { text: 'Hi :)', time: null }; // ... other members of the class send() { this.model.time = moment().format('h:mm a'); const payload = Object.assign({}, this.user, this.model); this.client.event.emit('chat:new', payload); this.model.text = ''; } }
Идея такова: при нажатии кнопки отправки мы выделяем событие Deepstream под названием Чат: Новый
с пользователем, текстом и временем в качестве полезной нагрузки. Время отформатировано с использованием самых популярных временных библиотек, момент Отказ
Вход текста опорожняется после того, как событие испускается, чтобы освободить место для нового сообщения.
Давайте посмотрим на реализацию шаблона:
{{user?.username}}
Свойство текста модели связано с входом, а также Отправить
Метод к кнопке отправки.
Давайте теперь посмотрим, что происходит с новыми сообщениями после излучения их.
Визуализация сообщений чата
Мы можем сделать список сообщений чата, подписавшись на излучаемое событие и обновляя свойство UI на основе этого события:
export class HomePage implements OnInit { user: any; client: any; chats: any = []; model: any = { text: 'Hi :)', time: null }; constructor( public navCtrl: NavController, public modalCtrl: ModalController ) { } ngOnInit() { ... this.client.event.subscribe('chat:new', (payload) => { this.chats.push(payload); }) } send() { this.model.time = moment().format('h:mm a'); const payload = Object.assign({}, this.user, this.model); this.client.event.emit('chat:new', payload); this.model.text = ''; } }
Мы добавили чаты
Свойство, которое является массивом. Тогда внутри Ngoninit
Метод жизненного цикла, мы подписываемся на Чат: Новый
событие, где мы нажимаем чаты на чаты
массив, когда они выделяются.
Вы можете переоценить список чата и связывать их к представлению следующим образом:
{{user?.username}} {{chat.username}}
{{chat.time}}
{{chat.text}}
Функция “печатает”
Хитрость этой функции – выделять события в реальном времени на нажатии на клавиш и обновить пользовательский интерфейс с текстом «Кто печатает». Этот текст навсегда придерживается, даже когда пользователь прекратил время, чтобы вы могли использовать Сетримс
Удалить содержимое с точки зрения данного периода времени.
Сначала давайте разделим Model.Text
Привязка к имуществу и связыванию событий:
Таким образом, мы можем контролировать событие KeyPress:
export class HomePage implements OnInit { typing = ''; ngOnInit() { ... // Handle is typing event this.client.event.subscribe('chat:typing', (payload) => { if(payload.username !== this.user.username) { this.typing = payload.username + ' is typing...' setTimeout(() => { this.typing = '' }, 2000) } }) } onChange(e) { this.model.text = e.target.value; this.client.event.emit('chat:typing', this.user); } }
Когда пользователь A (E.G. ADA) начинает печатать, мы говорим все остальным пользователям, которые ADA печатает. Мы не говорим ADA, что она печатает, потому что это было бы ненужно. Мы делаем это, сравнивая имена пользователей, используя Если
логика.
Через 2 секунды мы сбрасываем Набрав
Собственность обратно в пустую строку.
Давайте связываем текст на наш взгляд:
{{typing}}
Заключение
Надеюсь, вам повеселился, пытаясь построить его приложение в чате с функцией «Кто печатает». В наши дни многие веб-концепции демистифицируются в наши дни, и Ionic делает отличную работу для мобильных разработчиков, так же как Deepstreamhub делает фантастическую работу для инженеров в реальном времени. Не стесняйтесь связаться со мной или комментировать ваши взгляды на реализацию в этой статье.