Fatal编程技术网

Javascript 角5上的推进器？

javascript typescript

Javascript 角5上的推进器？,javascript,typescript,angular5,pusher,pusher-js,Javascript,Typescript,Angular5,Pusher,Pusher Js,下面是在原生html中添加pusher的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 =

下面是在原生html中添加pusher的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);
});


推送试验
//启用推送器日志记录-不要将其包括在生产中
Pusher.logToConsole=true；
var pusher=新pusher（“我的pusher\U键”{
集群：“我的集群”，
加密：真
});
var channel=pusher.subscribe（'my-channel'）；
channel.bind（'my-event'，函数（数据）{
警报（数据、消息）；
});

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

在angular 4或5或更高版本中，您将使用JavaScript版本的Pusher，并将其安装到项目中，下面是一个简单的示例： 1-在角形项目中安装推进器：

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

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

 ng g s my-service
  • 注：
    -不要忘了在app.module.ts中注册此服务，也要注册HttpClientModule或HttpModule，因为我们将在out服务中使用其中一个
5-在我的服务中。服务。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-之后，创建一个函数，该函数将向服务器发出post请求，以触发事件。
8-完成服务后，转到要使用的组件，首先在其构造函数中注册服务，然后绑定到事件所在的通道（在示例中为“我的事件”）：

 ngOnInit() {
    this.myService.channel.bind('my-event', data => {
      this.message = data.message;
    });
  }
现在你在Angular 5项目中制作了一个简单的实时应用程序

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