ios pusher使用_如何使用.NET和Pusher构建照片供稿

ios pusher使用

by Ogundipe Samuel

由Ogundipe Samuel

如何使用.NET和Pusher构建照片供稿 (How to build a photo feed using .NET and Pusher)

Today, we will make a real-time photo feed using .NET and Pusher.

今天，我们将使用.NET和Pusher进行实时照片供稿。

We will build a mini system that allows people to upload their images/photographs for everyone to view in real-time. It’s like a mini-Instagram without the comment, like, and views aspect.

我们将构建一个微型系统，使人们可以上传他们的图像/照片供所有人实时查看。 就像一个迷你Instagram，没有评论，赞和观看方面。

Sounds cool? Let’s ride on.

听起来不错？ 让我们继续前进。

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 real-time data and functionality to web and mobile applications.

Pusher是一项托管服务，可以非常轻松地向Web和移动应用程序添加实时数据和功能。

Pusher sits as a real-time layer between your servers and your clients. Pusher maintains persistent connections to the clients (over Websockets 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维护与客户端的持久连接(如果可能，通过Websocket并回落到基于HTTP的连接)，以便服务器一旦拥有要推送到客户端的新数据，便可以通过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, select jQuery as the front-end technology and ASP.NET as the back-end tech for this tutorial. For other projects, you can choose as per your requirements.

我们将在仪表板上注册一个新应用。 唯一的强制性选项是应用程序名称和群集。 群集代表将处理您的应用程序请求的Pusher服务器的物理位置。 另外，在本教程中，选择jQuery作为前端技术，并选择ASP.NET作为后端技术。 对于其他项目，您可以根据需要选择。

Next, copy out your App ID, Key, and Secret from the App Keys section, as we will need them later on.

接下来，从“ App Keys部分复制您的应用程序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.To do so, let’s:

我们需要做的下一件事是创建一个新的Asp.Net MVC应用程序。

• Open Visual Studio and select new project from the sidebar
  打开Visual Studio，然后从边栏中选择新项目

• Under templates, select Visual C#

  在模板下，选择“ Visual C#

• Next, select web
  接下来，选择网站

• In the middle section, select ASP.N``ET MVC Web Applicat``ion

  在中间部分中，选择ASP.N``ET MVC Web Applicat``ion

For this tutorial, I named the project: Real-time-photo-feed.

在本教程中，我将项目命名为： Real-time-photo-feed 。

Now we are almost ready. The next step will be to install the official Pusher library for .Net using the NuGet Package.

现在我们快要准备好了。 下一步将使用NuGet Package为.Net安装官方的Pusher库。

To do this, we go to tools, via the menu 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 。 接下来，让我们运行以下命令来安装软件包：

Alternatively, we can also install the Pusher library using the NuGet Package Manager UI. To do this, in the Solution Explorer, right-click either References or a project and select Manage NuGet Packages. The Browse tab displays available packages by popularity. Search for the Pusher package by typing in PusherServer into the search box on the top right. Select the Pusher package to display the package information on the right and to enable the Install button.

另外，我们也可以使用NuGet Package Manager UI安装Pusher库。 为此，在Solution Explorer ，右键单击“ References或项目，然后选择“ Manage NuGet Packages 。 浏览选项卡按受欢迎程度显示可用软件包。 通过在PusherServer的搜索框中键入PusherServer来搜索Pusher软件包。 选择Pusher软件包以在右侧显示软件包信息并启用“ Install按钮。

精心设计我们的应用程序 (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. However, we will use the HomeController for the application logic. The first thing we want to do is to define a model that stores the list of images we have in the database.

默认情况下，Visual Studio为我们创建三个控制器。 但是，我们将HomeController用于应用程序逻辑。 我们要做的第一件事是定义一个模型，该模型存储数据库中我们拥有的图像列表。

Under the models folder, let’s create a file named PhotoFeed.cs and add the following content:

在models文件夹下，让我们创建一个名为PhotoFeed.cs的文件并添加以下内容：

In the above block of code, we have declared a model called PhotoFeed with three main properties:

在上面的代码块中，我们声明了一个名为PhotoFeed的模型，该模型具有三个主要属性：

• Id: This is the primary key of the model table
  ID：这是模型表的主键
• Comment: The description of the image
  评论：图片说明
• Imagepath: The path to the stored image
  Imagepath：所存储图像的路径

Now we have defined our model, let’s reference it in our default database context called ApplicationDbContext. To do this, let’s open models\IdentityModels.cs file, then locate the class called ApplicationDbContext and add the following after the create function:

现在，我们已经定义了模型，让我们在名为ApplicationDbContext默认数据库上下文中进行引用。 为此，让我们打开models\IdentityModels.cs文件，然后找到名为ApplicationDbContext的类，并在create函数之后添加以下内容：

In the code block above, the DBSet class represents an entity set used for reading, updating, and deleting operations. The entity which we will use to do CRUD operations is the PhotoFeed model we created earlier, and we have given it the name FeedModel.

在上面的代码块中， DBSet类代表用于读取，更新和删除操作的实体集。 我们将用来执行CRUD操作的实体是我们先前创建的PhotoFeed模型，我们FeedModel指定了名称FeedModel 。

连接我们的数据库 (Connecting 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.

尽管已经建立了模型，但是我们仍然需要将数据库附加到我们的应用程序。 为此，选择Visual Studio左侧的服务器资源管理器，右键单击“数据连接”，然后添加一个数据库。

There are various databases that are lightweight and can fit into the application we are building, such as:

有许多轻量级的数据库，可以适合我们正在构建的应用程序，例如：

• Microsoft access database
  Microsoft Access数据库
• Sqlite Database
  SQLite数据库
• MSSQL Server
  MSSQL服务器
• Firebird
  火鸟
• VistaDb
  VistaDb

For this tutorial, I used the MSSQL Server.

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

创建我们的索引路径 (Creating our index route)

Now both our model and database is set to work. Let’s go ahead and create our index route. Open the HomeController and replace it with the following code:

现在，我们的模型和数据库都可以使用了。 让我们继续创建索引路径。 打开HomeController并将其替换为以下代码：

In the code block above, we have defined our Index function for both GET and POST requests.

在上面的代码块中，我们为GET和POST请求定义了Index函数。

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

在查看我们的GET和POST控制器功能之前，我们注意到将db上下文导入到我们的类中，并显示以下行：

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

这使得它可以访问我们已使用定义我们的数据库模型DbSet我们班ApplicationDbContext类。

In the GET function, we have returned the view with which we will handle the addition and real-time updating of our feed.

在GET函数中，我们返回了视图，通过该视图我们将处理提要的添加和实时更新。

Notice that in the GET function, we pass a variable into the view function called me. This variable is a queryable version of our BlogFeed model. This will be passed to the view, which is later looped and rendered.

注意，在GET函数中，我们将一个变量传递给名为me的视图函数。 此变量是BlogFeed模型的可查询版本。 这将被传递到视图，稍后循环并呈现。

Observe that the POST method is set to be asynchronous. This is because the Pusher .NET library uses the await operator to wait for the asynchronous response from the data sent to Pusher.

观察到POST方法设置为异步。 这是因为Pusher .NET库使用await操作符来等待来自发送到Pusher的数据的异步响应。

In this function, we first add our new movie to the database, then we trigger an event. Once the event has been emitted, we then return an ok string.

在此功能中，我们首先将新影片添加到数据库中，然后触发事件。 发出事件后，我们将返回一个确定的字符串。

However, please note that the code above would not handle any error if the image was saved in DB but not posted using Pusher. We might need to use a try and catch statement to handle failures posting to Pusher.

但是，请注意，如果图像保存在数据库中但未使用Pusher发布，则上面的代码将不会处理任何错误。 我们可能需要使用try and catch语句来处理将故障发布到Pusher。

创建我们的视图文件 (Creating our view files)

Let’s open up our Views\Home\Index.cshtml and replace the content with the following:

让我们打开Views\Home\Index.cshtml并将内容替换为以下内容：

In the above block of code, we have created our form which comprises three main elements, which are:

在上面的代码块中，我们创建了包含三个主要元素的表单，它们是：

• Text input for the comment of the image.
  用于图像注释的文本输入。
• File input for selecting the image we want to feed.
  选择我们要输入的图像的文件输入。
• Button to save the new entry into the database.
  用于将新条目保存到数据库中的按钮。

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

另外，请注意，我们包含了一些必需的库，例如：

• Bootstrap CSS
  引导CSS
• jQuery JavaScript library
  jQuery JavaScript库
• Pusher JavaScript library
  Pusher JavaScript库

Pusher绑定和jQuery代码段 (Pusher Bindings And jQuery Snippet)

Below is our example jQuery snippet used to handle the file upload and Pusher’s real-time updates.

以下是我们的示例jQuery代码段，用于处理文件上传和Pusher的实时更新。

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

在上面的代码块中，我们注意到我们已经完成了两项主要活动：

上传图片代码 (Uploading Image Code)

To process the upload of images from the client side to the server, the following steps were followed:

要处理从客户端到服务器的图像上传，请执行以下步骤：

• We attached an event listener to our file input button that stores our image into a variable called files.

  我们在文件输入按钮上附加了事件侦听器，该按钮将图像存储到名为files的变量中。

• We defined a function called feed_it which creates a new FormData, then appends our image and description to the form data. This function then makes an AJAX POST request to our index route.

  我们定义了一个名为feed_it的函数，该函数创建一个新的FormData ，然后将我们的图像和描述附加到表单数据中。 然后，此函数向我们的index路由发出AJAX POST请求。

从其他客户端订阅服务器上的Feed添加 (Subscribing for Feed Additions on Server from other clients)

After the image 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 this real-time events, we have:

在将图像发送到服务器后，将请求发送到Pusher，以返回包含我们已广播的新数据的事件。 要收听此实时事件，我们有：

• Initialized a Pusher object while passing our app key and cluster.
  在传递我们的应用程序密钥和集群时初始化Pusher对象。

• Subscribed to our channel called a_channel.

  订阅了我们的名为a_channel的频道。

• Declared a binding to our event called an_event. In the callback function of this binding, we have pre-pended the new data to our list of feeds.

  声明一个绑定到名为an_event的事件。 在此绑定的回调函数，我们必须pre-pended的新数据给我们供稿的名单。

That’s it! Now, once a photo gets uploaded, it also gets broadcast and we can listen using our channel to update the feed in real-time.

而已！ 现在，一旦照片被上传，它也将被广播，我们可以使用我们的频道收听实时更新供稿。

Below is an image of what we have built:

下面是我们构建的图像：

结论 (Conclusion)

In this article, we have covered how to create a real-time photo feed using .NET and Pusher as well as handling file uploads in .NET.

在本文中，我们介绍了如何使用.NET和Pusher创建实时照片供稿以及如何在.NET中处理文件上传。

The code base to this tutorial is available in a public GitHub repository. You can download it for educational purposes.

可以在公共GitHub 存储库中找到本教程的代码库 。 您可以出于教育目的下载它。

Have a better way we could have built our application, reservations or comments? Let us know in the comments.

有更好的方法来构建应用程序，保留或评论吗？ 让我们在评论中知道。

This post was originally published on Pusher’s blog here.

这篇文章最初发表在推的博客在这里 。

This version has been edited for clarity and may appear different from the original post.

为了清晰起见，已对该版本进行了编辑，该版本可能与原始帖子有所不同。

翻译自: https://www.freecodecamp.org/news/how-to-build-a-photo-feed-using-net-and-pusher-5c2dae1ee889/

ios pusher使用