Рубрики
Без рубрики

Как реализовать функцию «набрать» в приложении Ionic Chat

Так же, как вы, выращиваете, мне интересно, какая магия лежит за «печатать», которое появляется на большинстве приложений в чате, когда друг, который я отправляю, начинает печатать. Ради веселья я решил реализовать этот подвиг …

Автор оригинала: 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
        
    

  

  

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

Главная страница экрана

Ожидается, что на экране домашней страницы:

  1. Вызывать модаль
  2. Инициализировать Deepstream
  3. Обрабатывать новые сообщения чата
  4. Визуализация сообщений чата
  5. Реализация «Набирает» функцию

Давайте начнем с вызова модального.

Призывающий модал

В предыдущем разделе мы создали модаль, но этот модаль не может вызвать себя. Компонент домашнего страницы должен:

// ./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 делает фантастическую работу для инженеров в реальном времени. Не стесняйтесь связаться со мной или комментировать ваши взгляды на реализацию в этой статье.