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

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