如何使用Angular和Pusher构建Medium的实时掌声功能

在本文中，您将学习如何使用 Pusher 编写实时 angular 应用程序。我们将制作一个应用程序，在点击帖子时提供实时反馈——就像 Medium 的掌声功能一样！

什么是推杆？

Pusher 是一项为开发人员提供api的服务，使他们能够将实时功能集成到 Web、移动和后端应用程序中。要了解有关 Pusher 的更多信息，请查看此教程视频以获取介绍。

云服务开始使用 Pusher：介绍渠道 Jeremy McPeak

Angular 中的 Pusher 入门

如本教程开头所述，每当有人点击帖子时，我们的应用程序都会提供实时反馈。 

对于初学者，确保你的机器上安装了 node 和npm。您还需要 Angular CLI 来快速引导我们的应用程序，因此请确保您也安装了它。如果您没有安装 Angular CLI，只需发出以下命令。

npm install -g @angular/cli

接下来，使用 Angular CLI 创建 Angular 应用程序。

ng new pusher-angular

我们应用程序的 UI 将非常简单。它将有一个帖子，一个由手形图标表示的掌声按钮，以及该帖子获得的掌声数量的计数器。打开app.component.html并添加以下代码，其中我们将点击事件绑定到Applause()函数。

<div align="center">
  <h1>
    {{ title }}!
  </h1>
  <p>This article will show how to implement real-time functionality in Angular Applications using Pusher. We will make an application that gives real-time feedback when a post is clicked. The application will mainly focus on adding real-time functionality to the Angular application.</p>

<p>Real-time functionality is an important component in modern applications. Users want immediate feedback when interacting with applications. This has prompted many developers to consider inclusion of this functionality due to tremendous demand.</p>

<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>

将推送器添加到您的应用程序

我们首先需要使用 npm install 命令安装 Pusher 库。 

npm install --save pusher-js

接下来，通过在文件中添加以下脚本来加载 Pusher 库angular.json。

//angular.json

"scripts": ["../node_modules/pusher-js/dist/web/pusher.min.js"]

您还需要拥有 Pusher 凭据，可以从 Pusher 仪表板获取。

要获取凭据，请登录 Pusher 仪表板并单击Create new app。然后，您将填写有关您的应用程序的一些详细信息，最后单击Create my app。Pusher 还根据您选择的技术为您提供了一些入门代码。此过程最重要的方面是应用程序凭据，可在“应用程序密钥”选项卡上找到。

集成推送服务

然后我们将PusherService通过运行以下命令来创建我们的：

ng generate service Pusher

上述命令将创建两个文件，即 pusher.service.ts 和pusher.service.spec.ts， 其中包含一些样板代码以供入门。 

现在在主模块中导入服务并将其包含为提供程序，如下所示：

// app.module.ts

import { PusherService } from './pusher.service';
...
@NgModule({
  providers: [PusherService],
  ...
})

Angular 还提供了一个用于存储凭据的环境文件以用于安全目的：在environment.ts中包含您的推送密钥。

// environment.ts
export const environment = {
  pusher: {
    production: false,
    key: '<PUSHER_KEY>',
  }
};

接下来，导入环境模块以供使用，将 Pusher 声明为我们之前在angular.json中添加的脚本的导入，并在文件中声明一个 Pusher 常量，PusherService如下所示：

// 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文件现在应该如下所示：

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');
  }
}

接下来，创建一个函数，在单击掌声按钮时将鼓掌次数发送到服务器。

// pusher.service.ts
export class PusherService {
// ...
clap( claps_count ) {
    this.http.get(`http://localhost:3000/add/${claps_count}`)
    .subscribe();
  }
}

仍然在客户端，我们将编写一个函数来监听来自 Angular 应用程序的点击事件并增加拍手的次数。我们还将 Pusher 服务绑定到我们的事件。

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的目录，然后运行以下命令。

mkdir server
cd server
npm init

这将创建引导 Node.js 应用程序所需的所有文件。接下来，安装 Pusher、Express 和 body-parser 模块。

npm install --save pusher express body-parser

接下来，创建一个文件index.js并导入所有必需的模块：

const express = require('express');
const http = require('http');
const bodyParser = require('body-parser');
const port = process.env.PORT || '3000';
const app = express();
const Pusher = require('pusher');

下一步是通过使用必要的凭据实例化 Pusher 来初始化 Pusher。您可以从 Pusher 仪表板获取凭据。

const pusher = new Pusher({
  appId: '607521',
  key: 'e9f68f905ee8a22675fa',
  secret: '37ab37aac91d180050c2',
});

定义中间件、CORS 标头和其余的 Node 应用程序配置。

// 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 应用程序的任何传入请求。端点将从客户端获取拍手次数，然后触发消息事件。

//server.js
.....
app.get("/add/:claps",function(req, res) {
    pusher.trigger("my_channel", "new-event", {
    });
});

我们的服务器现已完成；您可以通过运行开始收听传入的订阅npm start。

测试我们的应用程序

ng serve现在，通过为 Angular 应用程序和npm startExpress Server发出命令，同时运行客户端和服务器。

确保您已在 Pusher 仪表板上启用客户端事件，如下所示。

导航到http://localhost:4200并通过单击掌声按钮开始与应用程序交互。确保您有两个并排的选项卡，以便您可以实时观察当帖子被点赞时鼓掌次数如何增加。

Pusher 的另一个很酷的功能是您可以使用仪表板查看所有连接和发送的消息。这是此应用程序仪表板的屏幕截图。

结论

如您所见，将 Pusher 与 Angular 应用程序集成非常容易。这使得向您的应用程序添加实时数据共享和推送通知等功能成为可能。