В этой статье вы узнаете, как кодировать приложения Angular в реальном времени с помощью Pusher. Мы сделаем приложение, которое будет давать обратную связь в режиме реального времени при нажатии на сообщение — так же, как функция аплодисментов Medium!
Что такое толкатель?
Pusher — это сервис, который предоставляет разработчикам API-интерфейсы, которые позволяют им интегрировать функции реального времени в веб, мобильные и серверные приложения. Чтобы узнать больше о Pusher, ознакомьтесь с этим учебным видео.
Начало работы с Pusher в Angular
Как упоминалось в начале этого урока, наше приложение будет давать обратную связь в режиме реального времени, когда кто-то нажимает на сообщение.
Для начинающих, убедитесь, что на вашем компьютере установлены 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 также дает вам код для начала работы в соответствии с выбранной вами технологией. Наиболее важным аспектом этого процесса являются учетные данные приложения, которые можно найти на вкладке « Ключи приложения ».
Интегрировать сервис 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 ;
});
}
}
|
Сборка сервера Node.js
Сервер будет использоваться для получения запросов данных из приложения 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 очень легко интегрировать с приложением Angular. Это позволяет добавить в приложение такие функции, как обмен данными в режиме реального времени и push-уведомления.
Pusher также доступен для разных платформ, так что зайдите на сайт и откройте для себя магию Pusher.