Статьи

Как создать функцию аплодисментов в реальном времени с помощью Angular и Pusher

В этой статье вы узнаете, как кодировать приложения Angular в реальном времени с помощью Pusher. Мы сделаем приложение, которое будет давать обратную связь в режиме реального времени при нажатии на сообщение — так же, как функция аплодисментов Medium!

Pusher — это сервис, который предоставляет разработчикам API-интерфейсы, которые позволяют им интегрировать функции реального времени в веб, мобильные и серверные приложения. Чтобы узнать больше о Pusher, ознакомьтесь с этим учебным видео.

  • Облачные сервисы
    Начало работы с Pusher: введение в каналы
    Джереми МакПик

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

Для начинающих, убедитесь, что на вашем компьютере установлены Node и npm. Вам также понадобится Angular CLI для быстрой загрузки нашего приложения, поэтому убедитесь, что оно установлено. Если у вас не установлен Angular CLI, просто введите следующую команду.

1
npm install -g @angular/cli

Затем используйте Angular CLI для создания приложения Angular.

1
ng new pusher-angular

Пользовательский интерфейс нашего приложения будет очень простым. Он будет иметь пост, кнопку аплодисментов, которая будет представлена ​​значком руки, и счетчик количества хлопков, которые получил пост. Откройте app.component.html и добавьте следующий код, в котором мы связываем событие click с функцией Applause() .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<div align=»center»>
  <h1>
    {{ title }}!
  </h1>
  <p>This article will show how to implement real-time functionality in Angular Applications using Pusher.
 
<p>Real-time functionality is an important component in modern applications.
 
<h3>What Is Pusher?</h3>
<p>Pusher is a service that provides developers with APIs which enable them to integrate real-time functionalities in web, mobile, and back-end applications.</p>
 
  <div div align=»center»>
      <h3>{{claps}}</h3>
  <img width=»30″ alt=»medium Applause» (click)=»Applause()» src=»../assets/download.png» />
     
  </div>
</div>

Сначала нам нужно установить библиотеку Pusher с помощью команды npm install .

1
npm install —save pusher-js

Затем загрузите библиотеку Pusher, добавив следующий скрипт в файл angular.json .

1
2
3
//angular.json
 
«scripts»: [«../node_modules/pusher-js/dist/web/pusher.min.js»]

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

Чтобы получить учетные данные, войдите в панель управления Pusher и нажмите « Создать новое приложение» . Затем вы заполните некоторые сведения о вашем приложении и, наконец, нажмите « Создать мое приложение» . Pusher также дает вам код для начала работы в соответствии с выбранной вами технологией. Наиболее важным аспектом этого процесса являются учетные данные приложения, которые можно найти на вкладке « Ключи приложения ».

Затем мы создадим наш PusherService , выполнив команду:

1
ng generate service Pusher

Приведенная выше команда создаст два файла, а именно pusher.service.ts и pusher.service.spec.ts, которые содержат некоторый шаблонный код для начала .

Теперь импортируйте сервис в основной модуль и включите его в качестве поставщика следующим образом:

1
2
3
4
5
6
7
8
// app.module.ts
 
import { PusherService } from ‘./pusher.service’;
@NgModule({
  providers: [PusherService],
  …
})

Angular также предоставляет файл среды для хранения учетных данных в целях безопасности: включите ваш ключ толкателя в environment.ts .

1
2
3
4
5
6
7
// environment.ts
export const environment = {
  pusher: {
    production: false,
    key: ‘<PUSHER_KEY>’,
  }
};

Затем импортируйте модуль среды для использования, объявите Pusher как импорт из скрипта, который мы добавили ранее в angular.json , и объявите константу Pusher в файле PusherService следующим образом:

01
02
03
04
05
06
07
08
09
10
11
// pusher.service.ts
import { environment } from ‘../environment/environment’;
declare const Pusher: any;
 
export class PusherService {
pusher: any;
 
  constructor() {
  this.pusher = new Pusher(environment.pusher.key);
   }
}

Мы хотим сделать запрос, содержащий количество хлопков на сервер, когда человеку нравится сообщение, а также подписаться на наш канал Pusher. Идите дальше и HttpClient в конструктор PusherService . Ваш файл pusher.service должен теперь выглядеть так:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
declare const Pusher: any;
import { Injectable } from ‘@angular/core’;
import { environment } from ‘../environments/environment’;
import { HttpClient } from ‘@angular/common/http’;
 
@Injectable({
  providedIn: ‘root’
})
 
export class PusherService {
  pusher: any;
  channel: any;
  constructor(private https: HttpClient) {
    this.pusher = new Pusher(environment.pusher.key);
    this.channel = this.pusher.subscribe(‘my_channel’);
  }
}

Затем создайте функцию, которая отправляет количество хлопков на сервер при нажатии кнопки аплодисментов.

1
2
3
4
5
6
7
8
// pusher.service.ts
export class PusherService {
// …
clap( claps_count ) {
    this.http.get(`http://localhost:3000/add/${claps_count}`)
    .subscribe();
  }
}

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
import { PusherService } from ‘./pusher.service’;
//…
export class AppComponent implements OnInit {
  title = ‘Pusher Realtime Notifications’;
  claps: any = 0;
   
  // Listen to click event and send claps increment to server
  Applause() {
    this.claps = parseInt(this.claps, 10) + 1;
    this.pusherService.clap( this.claps );
  }
 
  constructor(private pusherService: PusherService) {
  }
 
  ngOnInit() {
    this.pusherService.channel.bind(‘new-event’, data => {
      this.claps = data.claps ;
    });
  }
}

Сервер будет использоваться для получения запросов данных из приложения Angular — мы создадим его с помощью Express, простой и быстрой среды Node.js.

Создайте каталог с именем server и выполните следующие команды.

1
2
3
mkdir server
cd server
npm init

Это создает все необходимые файлы для начальной загрузки приложения Node.js. Затем установите модули Pusher, Express и body-parser.

1
npm install —save pusher express body-parser

Далее создайте файл index.js и импортируйте все необходимые модули:

1
2
3
4
5
6
const express = require(‘express’);
const http = require(‘http’);
const bodyParser = require(‘body-parser’);
const port = process.env.PORT ||
const app = express();
const Pusher = require(‘pusher’);

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

1
2
3
4
5
const pusher = new Pusher({
  appId: ‘607521’,
  key: ‘e9f68f905ee8a22675fa’,
  secret: ’37ab37aac91d180050c2′,
});

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
// define middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use((req, res, next) => {
  res.header(«Access-Control-Allow-Origin», «*»)
  res.header(«Access-Control-Allow-Headers», «Origin, X-Requested-With, Content-Type, Accept»)
  next();
});
 
// Define routes
 
app.set(‘port’, port);
const server = http.createServer(app);
server.listen(port, () => console.log(`Running on port ${port}`));

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

1
2
3
4
5
6
//server.js
…..
app.get(«/add/:claps»,function(req, res) {
    pusher.trigger(«my_channel», «new-event», {
    });
});

Наш сервер завершен; вы можете начать прослушивание входящих подписок, запустив npm start .

Теперь запустите клиент и сервер одновременно, ng serve команду ng serve для приложения Angular и npm start для Express Server.

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

Включить клиентские события

Перейдите по адресу http: // localhost: 4200 и начните взаимодействовать с приложением, нажав кнопку с аплодисментами. Убедитесь, что у вас есть две вкладки рядом, чтобы вы могли в режиме реального времени наблюдать, как количество хлопков увеличивается, когда сообщение нравится.

Pusher в реальном времени

Еще одна интересная особенность Pusher — вы можете просматривать все соединения и сообщения, отправленные с помощью панели инструментов. Вот скриншот приборной панели для этого приложения.

Активность толкача

Как вы видели, Pusher очень легко интегрировать с приложением Angular. Это позволяет добавить в приложение такие функции, как обмен данными в режиме реального времени и push-уведомления.

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