角 5 上的推杆？答案

【问题标题】：Pusher on angular 5?角 5 上的推杆？
【发布时间】：2018-02-18 14:00:11
【问题描述】：

这是在原生html中添加推送器的js代码

<head>
<title>Pusher Test</title>
<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
<script>

// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;

var pusher = new Pusher('MY_PUSHER_KEY', {
  cluster: 'MY_CLUSTER',
  encrypted: true
});

var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
  alert(data.message);
});

我如何将上面的 js 脚本添加到我的 Angular 组件之一，以便他们可以订阅该频道？非常感谢那些回答这个问题的人，非常感谢！

【问题讨论】：

标签： javascript typescript angular5 pusher pusher-js

【解决方案1】：

在 Angular 4 或 5 或更高版本中，您将使用 JavaScript 版本的 Pusher，并将其安装在您的项目中，这是一个简单的示例： 1- 在您的 Angular 项目中安装 Pusher：

npm install --save pusher-js

2- 打开 .angular-cli.json 文件并将其添加到（“脚本”）：

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

3- 您应该向您的服务器发出 http 请求以便能够发出此请求，然后我们将为此使用服务，因此您应该使用 angular cli 生成服务或以您喜欢的方式进行：

 ng g s my-service

注意：
- 不要忘记在 app.module.ts 中注册此服务，也为 HttpClientModule 或 HttpModule 注册，因为我们将在 out 服务中使用其中之一

5- 在 my-service.service.ts:
- 导入 httpClient 后，编写此语句以开始使用 puhser，

declare const Pusher: any;

6- 在我的服务的构造函数中：

   this.pusher = new Pusher('YOUR_PUSHER_KEY', {
      cluster: 'YOUR_PUSHER_CLUSTER',
      encrypted: true
    });
    this.channel = this.pusher.subscribe('my-channel');

7- 然后创建一个函数，向您的服务器发出发布请求以触发您的事件。
8-完成服务后，转到您要使用的组件，首先在其构造函数中注册您的服务，然后将通道绑定到您的示例中的事件（my-event）：

 ngOnInit() {
    this.myService.channel.bind('my-event', data => {
      this.message = data.message;
    });
  }

现在您可以在 Angular 5 项目中制作一个简单的实时应用！

【讨论】：