ios pusher使用

by Ogundipe Samuel

由Ogundipe Samuel

使用.NET和Pusher構建實時評論功能 (Build a real-time commenting feature using .NET and Pusher)

Today, we will build a mini-blog engine with live commentary features using .NET and Pusher.

今天，我們將使用.NET和Pusher構建具有實時評論功能的微型博客引擎。

Reloading pages to view new comments can bore and is also strenuous, given you don’t even know if the reply to your comment has come in yet or not. You keep reloading and keep wasting your data. To cut a long story short, users may abandon sites where they have to reload pages to see a new comment.

重新加載頁面以查看新評論可能會很麻煩，而且也很費力，因為您甚至不知道對評論的回復是否到來。您不斷重新加載并不斷浪費您的數據。簡而言之，用戶可能會放棄必須重新加載頁面才能看到新評論的網站。

To follow through with this tutorial, we will use MSSQL as our database engine. Please ensure that it is up and running.

為了繼續學習本教程，我們將使用MSSQL作為數據庫引擎。請確保它已啟動并正在運行。

To follow this tutorial, please ensure that you are familiar with the basics of:

要遵循本教程，請確保您熟悉以下基礎知識：

設置Pusher帳戶和應用 (Setting up a Pusher account and app)

Pusher is a hosted service that makes it super-easy to add realtime data and functionality to web and mobile applications.

Pusher是一項托管服務，可以非常輕松地向Web和移動應用程序添加實時數據和功能。

Pusher acts as a real-time layer between your servers and clients. Pusher maintains persistent connections to the clients (over Web-socket if possible and falling back to HTTP-based connectivity) so that as soon as your servers have new data they want to push to the clients they can do so, via Pusher.

Pusher充當服務器和客戶端之間的實時層。 Pusher維護與客戶端的持久連接(如果可能，通過Web套接字，然后回退到基于HTTP的連接)，以便服務器一旦擁有新數據，便希望通過Pusher將其推送到客戶端。

If you do not already have one, head over to Pusher and create a free account.

如果您還沒有，請前往Pusher并創建一個免費帳戶。

We will register a new app on the dashboard. The only compulsory options are the app name and cluster. A cluster represents the physical location of the Pusher server that will handle your app’s requests. Also, copy out your App ID, Key, and Secret from the App Keys section, as we will need them later on.

我們將在儀表板上注冊一個新應用。唯一的強制性選項是應用程序名稱和群集。群集代表將處理您的應用程序請求的Pusher服務器的物理位置。另外，從“應用程序密鑰”部分復制您的應用程序ID，密鑰和機密，因為稍后我們將需要它們。

在Visual Studio中設置Asp.Net項目 (Setting up the Asp.Net project in Visual Studio)

The next thing we need to do is create a new Asp.Net MVC application.

接下來需要做的是創建一個新的Asp.Net MVC application 。

To do so, let’s:

為此，讓我們：

Open Visual Studio and select New Project from the sidebar
打開Visual Studio然后從邊欄中選擇“ New Project ”
Under templates, select Visual C#
在模板下，選擇“ Visual C#
Next, select Web
接下來，選擇Web
In the middle section, select ASP.NET Web Application
在中間部分中，選擇“ ASP.NET Web Application
For this tutorial, I named the project: Real-Time-Commenting
在本教程中，我將項目命名為： Real-Time-Commenting
Now we are almost ready. The next step will be to install the official Pusher library for ASP.NET using the NuGet Package
現在我們快要準備好了。下一步將使用NuGet Package為ASP.NET安裝官方Pusher庫。

To do this, we go to tools on the top bar, click on NuGet Package Manager, on the drop-down we select Package Manager Console.

為此，我們轉到頂部欄上的工具，單擊NuGet Package Manager ，在下拉菜單中選擇Package Manager Console 。

We will see the Package Manager Console at the bottom of our Visual Studio. Next, let’s install the package by running:

我們將在Visual Studio的底部看到Package Manager Console 。接下來，讓我們運行以下命令來安裝軟件包：

精心設計我們的應用程序 (Crafting our application)

Now that our environment is set up and ready, let’s dive into writing code.

現在我們的環境已經準備就緒，讓我們開始編寫代碼。

By default, Visual Studio creates three controllers for us. But, we will use the HomeController for the application logic.

默認情況下，Visual Studio為我們創建三個控制器。但是，我們將HomeController用于應用程序邏輯。

The first thing we want to do is to define a model that stores the list of articles we have in the database. Let’s call this model BlogPost. So, let’s create a file called BlogPost.cs in our models folder, and add:

我們要做的第一件事是定義一個模型，該模型存儲我們在數據庫中擁有的文章列表。我們將此模型BlogPost 。因此，讓我們在models文件夾中創建一個名為BlogPost.cs文件，然后添加：

In this code block, we have defined the model that holds our blog posts. The properties which we have defined here include:

在此代碼塊中，我們定義了用于保存博客文章的模型。我們在此處定義的屬性包括：

The id of the post, called BlogPostID (usually the primary key).
帖子的ID，稱為BlogPostID (通常是主鍵)。
The title of our post, called Title (defined as a string)
我們帖子的標題，稱為Title (定義為字符串)
The body of the post which we will be creating (defined as a string)
我們將要創建的帖子的正文(定義為字符串)

Next, let us create the model called Comment, which we had referenced earlier on. Let’s create a file called Comment.cs in our models folder and add:

接下來，讓我們創建一個稱為Comment的模型，該模型先前已被引用。讓我們在模型文件夾中創建一個名為Comment.cs文件并添加：

Looking at the code above, we notice that we have declared the following properties:

查看上面的代碼，我們注意到我們已經聲明了以下屬性：

The ID of our comment called CommentID (Usually the primary key)
我們的注釋的ID稱為CommentID (通常是主鍵)
The name of the person commenting
發表評論的人的名字
The body of the comment
評論正文
The ID of the post we are commenting on
我們正在評論的帖子的ID

Now that we have defined our model, let’s reference it in our default database context called ApplicationDbContext.

現在我們已經定義了模型，讓我們在名為ApplicationDbContext默認數據庫上下文中引用它。

To do this, let’s open models\IdentityModels.cs file. Locate the class called ApplicationDbContext and add the following after the create function:

為此，我們打開models\IdentityModels.cs文件。找到名為ApplicationDbContext的類，并在create函數之后添加以下內容：

In the code block above, the DbSet class represents an entity set used for read, update, and delete operations.

在上面的代碼塊中， DbSet類表示用于讀取，更新和刪除操作的實體集。

Here, we have defined two entities, our BlogPost and Comment models. We will now have access to them from an instance of the ApplicationDbContext .

在這里，我們定義了兩個實體，即BlogPost和Comment模型。現在，我們可以從ApplicationDbContext實例訪問它們。

連接到我們的數據庫 (Connecting to our database)

Although our model is set up, we still need to attach a database to our application. To do so, select the Server Explorer on the left-hand side of our Visual Studio, right click on Data Connections and add a database. There are various databases that are lightweight and can fit into the application we are building, such as:

盡管已經建立了模型，但是我們仍然需要將數據庫附加到我們的應用程序。為此，選擇Visual Studio左側的服務器資源管理器，右鍵單擊“數據連接”并添加數據庫。有許多輕量級的數據庫，可以適合我們正在構建的應用程序，例如：

Microsoft access database
Microsoft Access數據庫
Sqlite Database
SQLite數據庫
MSSQL Server
MSSQL服務器

For this tutorial, I used the MSSQL Server.

在本教程中，我使用了MSSQL Server。

創建我們的控制器 (Creating our controller)

Now both our model and database are setup, let’s go ahead creating our index route. Open the HomeController and replace it with:

現在我們的模型和數據庫都已建立，讓我們繼續創建索引路徑。打開HomeController并將其替換為：

In the code block above, we have defined six different functions :

在上面的代碼塊中，我們定義了六個不同的函數：

The Index function, which shows a quick list of all our blog posts
Index功能，顯示我們所有博客文章的快速列表
The Create function, which handles the addition of new BlogPosts for both GET and POST requests
Create函數，用于為GET和POST請求添加新的BlogPosts
The Details function, which returns the full view of our post
Details函數，它返回我們帖子的完整視圖
The Comments function, which returns a JSON data of all the comments for a particular post
Comments功能，可返回特定帖子的所有評論的JSON數據
The Comment function, which handles the addition of a new comment and emitting the data to Pusher.
Comment函數，用于處理新注釋的添加并將數據發送給Pusher。

Before looking at our controller functions, we notice that there is an import of our DB context into our class with the line that says:

在查看控制器功能之前，我們注意到將數據庫上下文導入到類中，并顯示以下行：

This makes it possible to access the database model which we have defined in our ApplicationDbContext class.

這樣就可以訪問我們在ApplicationDbContext類中定義的數據庫模型。

In the Index function we return our View, passing in a list of all the posts we have in our database, which will be looped.

在Index函數中，我們返回View，并傳入我們數據庫中所有帖子的列表，該列表將循環顯示。

Next, In the Create function that handles our GET request, we simply return the view for creating a new post.

接下來，在處理GET請求的Create函數中，我們僅返回用于創建新帖子的視圖。

We move to the Create function that handles our POST request, which receives an argument called post of type BlogPost . In this function we add a new post into the database, after which we return a redirect to our Index function.

我們轉到Create處理POST請求的Create函數，該函數接收一個稱為BlogPost類型的post的參數。在此函數中，我們將一個新post添加到數據庫中，然后將重定向返回到Index函數。

In our Details function, we return an instance of a particular post to our view which will be displayed. This view will also display the form which allows us to add comments.

在Details函數中，我們將特定post的實例返回到我們的視圖中，該實例將被顯示。該視圖還將顯示允許我們添加評論的表格。

In our Comments function, we return all the comments that belong to a particular post, the ID of which was supplied as JSON. This method will be called via an AJAX POST.

在Comments函數中，我們返回屬于特定post所有comments ，其ID以JSON的形式提供。該方法將通過AJAX POST調用。

Finally, our Comment function handles adding the comments to the database, and sending the data to Pusher. We notice here that this function is an async method. This is because the Pusher library sends the data asynchronously, and we have to await its response.

最后，我們的Comment函數處理將注釋添加到數據庫，并將數據發送到Pusher。我們在這里注意到，該函數是async方法。這是因為Pusher庫異步發送數據，因此我們必須等待其響應。

Also, we need to replace XXX_APP_CLUSTER, XXX_APP_ID, XXX_APP_KEY and XXX_APP_SECRET with our app cluster, ID, key and secret which we got from Pusher earlier on.

另外，我們需要用XXX_APP_CLUSTER從Pusher獲得的應用集群，ID，密鑰和機密替換XXX_APP_CLUSTER ， XXX_APP_ID ， XXX_APP_KEY和XXX_APP_SECRET 。

創建我們的視圖文件 (Creating our view files)

To complete our application we will need 3 different view files, which we will discuss below.

為了完成我們的應用程序，我們將需要3個不同的視圖文件，我們將在下面進行討論。

索引視圖 (The index view)

Let us replace the default content in the Index.cshtml file at Views\Home\Index.cshtml with:

讓我們將Views\Home\Index.cshtml的Index.cshtml文件中的默認內容替換為：

Looking at the HTML structure above, we notice we have defined a table which lists all our posts and links them to the details page.

查看上面HTML結構，我們注意到我們已經定義了一個表格，該表格列出了我們所有的帖子，并將它們鏈接到詳細信息頁面。

創建視圖 (The Create View)

Here, we need to create a new file called Create.cshtml in the View\Home folder and paste the following into it:

在這里，我們需要在View\Home文件夾中創建一個名為Create.cshtml的新文件，并將以下內容粘貼到其中：

In the HTML structure above we have three main inputs:

在上面HTML結構中，我們有三個主要輸入：

A text input element, which holds the title of the post
文本輸入元素，其中包含帖子標題
A text input element, which holds the content of the post
文本輸入元素，用于保存帖子的內容
A button element, which is used to submit the new entry
button元素，用于提交新條目

The Details View and Vue Bindings

詳細信息視圖和Vue綁定

This is the final View file we will be needing. This file also handles binding to Pusher events and updating the comments in realtime using Pusher and Vue. Let us create a new file called Details.cshtml in our Views\Home folder and add the following content into it:

這是我們將需要的最終View文件。該文件還處理與Pusher事件的綁定，并使用Pusher和Vue實時更新注釋。讓我們在Views\Home文件夾中創建一個名為Details.cshtml的新文件，并將以下內容添加到其中：

https://gist.github.com/755c0e5e8cbf53dbb9560deafdd50a21

In the above block of code, we have displayed the title and content of the current post, and the number of comments it has.

在上面的代碼塊中，我們顯示了當前帖子的標題和內容以及其評論的數量 。

We have also created our comment form which comprises three main elements, which are:

我們還創建了包含三個主要元素的評論表單：

Text input for the name of the person making the comment
輸入發表評論者姓名的文字
Textarea for the body of the comment
評論正文的Textarea
Button to save the new comment into the database
將新評論保存到數據庫中的按鈕

Notice that we have used Vue’s v-for directive to iterate and display the comments which are available.

請注意，我們已經使用Vue的v-for指令來迭代并顯示可用的注釋。

Also, note we have included some required libraries such as:

另外，請注意，我們包含了一些必需的庫，例如：

axios JavaScript library
axios JavaScript庫
Vue js JavaScript library
Vue JS JavaScript庫
Pusher JavaScript library
Pusher JavaScript庫

推桿綁定和Vue代碼段 (Pusher Bindings and Vue snippet)

Below is our example Vue snippet used to handle the comment submission and Pusher’s realtime updates.

下面是我們的示例Vue代碼段，用于處理評論提交和Pusher的實時更新。

In the code block above, we have done two major activities, which are:

在上面的代碼塊中，我們完成了兩個主要活動：

上載注釋代碼 (Uploading Comment Code)

To process new comments from the client side to the server, the following steps were followed:

要處理從客戶端到服務器的新注釋，請執行以下步驟：

We attached a Vue event listener @click to our submit button which fires a method called submit_comment
我們將Vue事件偵聽器@click到了我們的@click按鈕，該按鈕觸發了一個名為submit_comment的方法。
We defined a function called submit_comment which uses axios to make a POST request to our comment function
我們定義了一個名為submit_comment的函數，該函數使用axios向我們的comment函數發出POST請求

從其他客戶端訂閱服務器上的Feed添加 (Subscribing for Feed Additions on Server from other clients)

After the comment has been sent to the server, a request is sent to Pusher to return an event with the new data we have broadcasted. To listen for these realtime events, we have:

將評論發送到服務器后，將請求發送到Pusher，以返回包含我們廣播的新數據的事件。要收聽這些實時事件，我們有：

Initialized a Pusher object while passing our app key and cluster
在傳遞我們的應用程序密鑰和集群時初始化Pusher對象
Subscribed to our channel called asp_channel
訂閱了我們稱為asp_channel的頻道
In the listen method in our Vue code, we declared a binding to our event called asp_event. In the callback function of this binding, we push the new data to our list of comments
在Vue代碼的listen方法中，我們聲明了對名為asp_event的事件的綁定。在此綁定的回調函數中，我們將新數據推送到我們的注釋列表中

That’s it! Now, once a new comment is made, it also gets broadcast and we can listen using our channel to update the comments in realtime.

而已！現在，一旦做出了新評論，它也會被廣播，我們可以使用我們的頻道收聽實時更新評論。

結論 (Conclusion)

In this article, we have covered how to create a live comments feature using .NET and Pusher, and creating a mini blog engine in .NET.

在本文中，我們介紹了如何使用.NET和Pusher創建實時評論功能，以及如何在.NET中創建小型博客引擎。

The codebase to this tutorial is available in a public Github repository. You can download it for educational purposes.Have any reservations or comments, let us know your feedback in the comments.

本教程的代碼庫可在公共Github存儲庫中找到。您可以出于教育目的下載它。如有任何保留或評論，請在評論中告訴我們您的反饋。

This post was originally published by the author on Pusher’s blog here

這篇文章最初是由作者發表在推的博客在這里