ios pusher使用

by Rahat Khanna

通过拉哈特·汉娜

如何使用JavaScript和Pusher构建实时图 (How to build a Realtime Graph using JavaScript and Pusher)

The world needs everything uber-fast now. There are plenty of data streams being generated by different systems every day. They serve in making decisions in many industries. Realtime monitoring and analysis have become very important today. Data streams include realtime monitoring of website traffic, server performance, weather updates, and IOT sensors. It is important to analyze and interpret this burst of data, for which interactive charts and graphs are an excellent solution.

现在，世界需要一切都更快。每天，不同的系统都会生成大量的数据流。他们在许多行业中做出决策。如今，实时监控和分析已变得非常重要。数据流包括对网站流量，服务器性能，天气更新和IOT传感器的实时监控。重要的是分析和解释这些数据，对于交互式图表来说，这是一个很好的解决方案。

In this article, we will be building a Node.js Server to expose APIs to provide historical data for a metric (in this case, weather in London). It will also provides an API to ingest new data points. We will also be building a front-end app with a Line Chart to display the temperature changes in London weather in realtime. The application we build will look something like this:

在本文中，我们将构建一个Node.js服务器以公开API，以提供度量的历史数据(在本例中为伦敦的天气)。它还将提供一个API以提取新的数据点。我们还将构建一个带有折线图的前端应用程序，以实时显示伦敦天气的温度变化。我们构建的应用程序将如下所示：

The first step to start this tutorial is to Signup at Pusher or login with your existing credentials if you already have an account. After logging in, you will need to create a new app and select Vanilla JavaScript for the front-end along with Node.js for the back-end. You will then be brought to a landing page containing the ‘getting started’ code for both front-end and back-end, which we will use later on in the tutorial.

开始本教程的第一步是在Pusher进行注册，或者如果您已经有一个帐户，则使用您现有的凭据登录。登录后，您将需要创建一个新应用，并选择Vanilla JavaScript作为前端以及Node.js作为后端。然后，您将被带到一个包含前端和后端“入门”代码的登录页面，我们将在本教程的后面部分中使用该代码。

用于监视和分析系统的Node.js服务器API (Node.js Server APIs for Monitoring and Analytics System)

The essential APIs for any analytics systems for any metric or entity are:

对于任何度量标准或实体的任何分析系统，必不可少的API是：

Ingestion API — An API to ingest the new data points for any particular entity. In our server for this blog post, we will make an API to ingest new temperature data at a particular time for London. This API can be called by any global weather system or any IOT sensor.
提取API-提取任何特定实体的新数据点的API。在此博客文章的服务器中，我们将创建一个API以在特定时间获取伦敦的新温度数据。任何全球天气系统或任何IOT传感器均可调用此API。
Historical Data API — This API will return all the data within a range from this date in time. For our server, we will create a simple API. It will return some static historical data with limited data points for London’s temperature values for any day.
历史数据API-此API将返回该日期范围内的所有数据。对于我们的服务器，我们将创建一个简单的API。它将返回某些静态历史数据，其中任意一天的伦敦温度值的数据点均有限。

Node.js Express服务器框架 (Node.js Express Server Skeleton)

We will create a basic Express Server along with instantiating the Pusher library server instance. We will create a new folder for our project and create a new file server.js. Add the following code to this file:

我们将创建一个基本的Express Server并实例化Pusher库服务器实例。我们将为我们的项目创建一个新文件夹，并创建一个新文件server.js 。将以下代码添加到该文件：

获取历史温度数据的API (API to Get Historical Temperature Data)

Now, we will add some static data regarding London’s temperature at certain times during a day and store it in any JavaScript variable. We will also expose a route to return this data whenever someone invokes it using a GET HTTP call.

现在，我们将添加有关一天中某些时间伦敦温度的静态数据，并将其存储在任何JavaScript变量中。每当有人使用GET HTTP调用调用此数据时，我们还将公开一条返回此数据的路由。

提取温度数据点的API (API to Ingest Temperature Data Point)

Now we will add the code for exposing an API to ingest the temperature at a particular time. We will expose a GET HTTP API with temperature and time as query parameters. We will validate that they are not empty parameters. We store them by pushing in the dataPoints array of our static JavaScript variable londonTempData. Please add the following code to the server.js file

现在，我们将添加用于暴露API以在特定时间摄取温度的代码。我们将公开一个以温度和时间为查询参数的GET HTTP API。我们将验证它们不是空参数。我们通过将其放入静态JavaScript变量londonTempData的dataPoints数组中来存储它们。请将以下代码添加到server.js文件中

In the above code, apart from storing in the data source, we will also trigger an event ‘new-temperature’ on a new channel ‘london-temp-chart’. For every unique data source or a chart, you can create a new channel.

在上面的代码中，除了存储在数据源中之外，我们还将在新通道“ london-temp-chart”上触发事件“ new-temperature ” 。对于每个唯一的数据源或图表，您可以创建一个新通道。

The event triggered by our server will be processed by the front-end to update the chart/graph in realtime. The event can contain all the important data which the chart needs to display the data point correctly. In our case, we will be sending the temperature at the new time to our front-end.

由我们的服务器触发的事件将由前端处理，以实时更新图表。该事件可以包含图表正确显示数据点所需的所有重要数据。在我们的情况下，我们将在新时间将温度发送到前端。

使用Vanilla JavaScript和Chart.js构建前端应用程序 (Building the Front-End App using Vanilla JavaScript and Chart.js)

Now, we will build the front-end application. It will display a Line Chart representing the changes in temperature for London City at different times throughout the day. The key approach for displaying realtime graphs is:

现在，我们将构建前端应用程序。它将显示一个折线图，该折线图表示伦敦全天在不同时间的温度变化。显示实时图形的关键方法是：

We have to make an initial Ajax call to fetch historical data and render the graph with the existing data.
我们必须进行初始Ajax调用以获取历史数据并使用现有数据呈现图形。
We will subscribe to any events for new data points being stored on a particular channel.
我们将为存储在特定通道中的新数据点订阅任何事件。

基本HTML模板 (Basic HTML Template)

We will create a new folder called public in our project root and then create a new file index.html in this folder. This file will contain the basic HTML code to render a simple header and a sub-header with the app name along with few icons. We will also import the Pusher JavaScript library from its CDN URL.

我们将在项目根目录中创建一个名为public的新文件夹，然后在此文件夹中创建一个新文件index.html 。该文件将包含基本HTML代码，以呈现一个简单的标题和带有应用名称以及少量图标的子标题。我们还将从其CDN URL导入Pusher JavaScript库。

添加图表库 (Adding Charts Library)

In JavaScript and HTML apps, we have to use either SVG or Canvas to build graphical components to represent mathematical graphs. There are numerous open source libraries that can help you render different chart types. These include Bar Charts, Pie Charts, Line Charts and Scatter Charts.

在JavaScript和HTML应用程序中，我们必须使用SVG或Canvas来构建表示数学图形的图形组件。有许多开源库可以帮助您呈现不同的图表类型。这些包括条形图，饼图，折线图和散点图。

For our project, we will choose Chart.js as it has fairly simple API and renders robust charts using a Canvas HTML tag. You can choose any charting library but keep in mind that the library should have a means to update the chart without completely re-rendering it. Chart.js provides a method on any instantiated chart to update it.

对于我们的项目，我们将选择Chart.js，因为它具有相当简单的API，并使用Canvas HTML标签呈现了强大的图表。您可以选择任何图表库，但请记住，该库应具有一种在不完全重新呈现图表的情况下更新图表的方法。 Chart.js在任何实例化图表上都提供了一种方法来对其进行更新。

Add the following code to your index.html file at appropriate places

将以下代码添加到index.html文件中的适当位置

添加JavaScript文件并实例化Pusher客户端库 (Adding JavaScript File and Instantiating Pusher client-side library)

Now we will create a new file app.js in our public folder and also add the following code to instantiate the Pusher client-side library.

现在，我们将在公共文件夹中创建一个新文件app.js ，并添加以下代码以实例化Pusher客户端库。

In the above code, we have also added few utility methods to make an Ajax call and also show or hide elements from the DOM API.

在上面的代码中，我们还添加了一些实用程序方法来进行Ajax调用，并显示或隐藏DOM API中的元素。

添加代码以获取历史数据 (Adding Code to fetch Historical Data)

Now, we will add the code to fetch the historical temperature data to display the graph with the initial values. We will also instantiate a new Chart object with a specific config to render a Line Chart. You can read more about how to construct these configs at the Chart.js documentation.

现在，我们将添加代码以获取历史温度数据以显示带有初始值的图形。我们还将实例化具有特定配置的新Chart对象，以呈现折线图。您可以在Chart.js文档中阅读有关如何构造这些配置的更多信息。

Please add the following code to the app.js file:

请将以下代码添加到app.js文件中：

In the above code, we have added a function named renderWeatherChart. This will be used to render the chart using latest data which is embedded in the chartConfig variable under the key datasets. If we want to draw multiple line charts on the same canvas, we can add more elements to this array.

在上面的代码中，我们添加了一个名为renderWeatherChart的函数。这将用于使用嵌入在关键数据集下的chartConfig变量中的最新数据来呈现图表。如果要在同一画布上绘制多个折线图，则可以向此数组添加更多元素。

The data key in each of the elements of the array will display the different points on the graph. We will make an ajax request to the /getTemperature api to fetch all the data points and put them into this key. We will call the rendering method to display the graph then. Now we can run the command node server.js and then go to the browser with the following URL to see the initial chart rendered using the data.

数组每个元素中的数据键将在图形上显示不同的点。我们将向/ getTemperature api发出ajax请求，以获取所有数据点并将它们放入此键中。然后，我们将调用render方法来显示图形。现在，我们可以运行命令node server.js ，然后使用以下URL进入浏览器以查看使用数据呈现的初始图表。

http://localhost:9000/

In order to style our app properly, please add the following CSS into a new style.css file inside the public folder. Add the following code to that file:

为了正确设置我们的应用程序样式，请在公共文件夹内的新style.css文件中添加以下CSS。将以下代码添加到该文件：

收到新事件后更新图表的代码 (Code to Update Graph on new event received)

Now we want to subscribe to the unique channel on which our server will be sending update events for this graph. For our project, the channel is named london-temp-chart and the event is named new-temperature. Please add the following code to process the event and then update the chart in realtime:

现在，我们要订阅服务器将在其上发送此图的更新事件的唯一通道。对于我们的项目，该通道名为london-temp-chart ，事件名为new-temperature 。请添加以下代码以处理事件，然后实时更新图表：

In order to see this code in action, you have to refresh the browser and you will see the initial chart. Now we have to ingest a new data point. You would need to call the following API either by using some mock API calling tool or using the following URL with different values in the browser.

为了查看此代码的运行情况，您必须刷新浏览器，然后才能看到初始图表。现在我们必须摄取一个新的数据点。您可能需要通过使用某些模拟API调用工具或在浏览器中使用具有不同值的以下URL来调用以下API。

http://localhost:9000/addTemperature?temperature=17&time=1500

In order to test your chart update code, you can use the following temporary code in your app.js file. It will make dummy Ajax requests to the above URL after a specific time interval.

为了测试图表更新代码，您可以在app.js文件中使用以下临时代码。在特定时间间隔后，它将向上述URL发出虚拟Ajax请求。

Here is the GitHub repo for reference to the complete code.

这是GitHub存储库，供完整代码参考。

结论 (Conclusion)

Finally, our realtime analytics app is ready. We will see the weather temperature chart for London city updating in realtime.

最后，我们的实时分析应用已准备就绪。我们将实时查看伦敦市的气温图表。

We can use the code from this blog post for any charts library. It can also render any type of chart like Bar Chart, Scatter Chart or Pie Chart to update in realtime.

我们可以将此博客文章中的代码用于任何图表库。它还可以呈现任何类型的图表，例如条形图，散点图或饼图以进行实时更新。

This code can also be used in multiple Enterprise Apps. For example, monitoring dashboards, analytics reports, sensor regulatory apps, and financial apps. The Pusher library helps us send realtime events to all connected client-side apps. These apps can consume the data to update the charts in realtime.

此代码也可以在多个企业应用程序中使用。例如，监视仪表板，分析报告，传感器监管应用程序和财务应用程序。 Pusher库可帮助我们将实时事件发送到所有连接的客户端应用程序。这些应用程序可以使用数据来实时更新图表。

This article was originally published on Pusher’s blog.

本文最初发布在Pusher的博客上。