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的博客上。