當(dāng)前位置：首頁(yè) > 编程语言 > asp.net >内容正文

asp.net

asp.net应用程序_如何在ASP.NET中为聊天应用程序构建键入指示器

發(fā)布時(shí)間：2023/11/29 asp.net 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 asp.net应用程序_如何在ASP.NET中为聊天应用程序构建键入指示器小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

asp.net應(yīng)用程序

by Neo Ighodaro

由新Ighodaro

如何在ASP.NET中為聊天應(yīng)用程序構(gòu)建鍵入指示器 (How to build a typing indicator for your chat app in ASP.NET)

A basic understanding of ASP.NET and jQuery is needed to follow this tutorial.要學(xué)習(xí)本教程，需要對(duì)ASP.NET和jQuery有基本的了解。

When you’re using a chat app, knowing when the person you are chatting with is typing a message can improve your user experience. It gives you some feedback that you’re not alone in the conversation, and that a message is coming your way.

當(dāng)您使用聊天應(yīng)用程序時(shí)，知道與您聊天的人何時(shí)鍵入消息可以改善您的用戶體驗(yàn)。它為您提供了一些反饋，表明您并不孤單，并且有消息在向您發(fā)送。

In this tutorial, we will go through some simple steps to create this feature using C#, .NET, and Pusher.

在本教程中，我們將通過(guò)一些簡(jiǎn)單的步驟使用C＃、. NET和Pusher創(chuàng)建此功能。

At the end of this tutorial we will have something like this:

在本教程的最后，我們將提供以下內(nèi)容：

This tutorial assumes prior knowledge of:

本教程假定您具有以下先驗(yàn)知識(shí)：

C#
C＃
.NET MVC
.NET MVC
JavaScript (jQuery)
JavaScript(jQuery)

When you’re ready, let’s begin.

準(zhǔn)備就緒后，就開(kāi)始吧。

設(shè)置我們的項(xiàng)目 (Setting up our project)

We’ll be using Visual Studio, which is an IDE popularly used for building .NET projects. Visual Studio 2017 is free and available for most Operating Systems. You can view installation details here.

我們將使用Visual Studio ，這是一個(gè)廣泛用于構(gòu)建.NET項(xiàng)目的IDE。 Visual Studio 2017是免費(fèi)的，適用于大多數(shù)操作系統(tǒng)。您可以在此處查看安裝詳細(xì)信息。

After installing Visual Studio, launch it and create a new project by clicking New Project from the dashboard. Following the New Project wizard we:

安裝Visual Studio之后，啟動(dòng)它并通過(guò)從儀表板上單擊“ 新建項(xiàng)目”來(lái)創(chuàng)建一個(gè)新項(xiàng)目。遵循“ 新建項(xiàng)目”向?qū)?#xff0c;我們：

Set C# as our language
將C＃設(shè)置為我們的語(yǔ)言
Select .NET MVC Project as the template
選擇.NET MVC Project作為模板
Fill in the Project name (for example “HeyChat” — but any name would do)
填寫(xiě)項(xiàng)目名稱(例如“ HeyChat”，但可以使用任何名稱)
Fill in the Solution name (that is, the application name — “HeyChat” or any name would do).
填寫(xiě)解決方案名稱(即應(yīng)用程序名稱-“ HeyChat”或任何名稱)。

編寫(xiě)服務(wù)器端(C)代碼 (Writing the server-side (C) code)

To display a typing indicator, our chat app needs to be able to recognize who is typing at any given time. For this, we will add some limited form of identification. We’re not doing any authentication at all, because this tutorial does not require it.

要顯示打字指示符，我們的聊天應(yīng)用程序需要能夠在任何給定時(shí)間識(shí)別誰(shuí)在打字。為此，我們將添加一些有限形式的身份證明。我們根本不進(jìn)行任何身份驗(yàn)證，因?yàn)楸窘坛滩恍枰?

? For the purpose of this tutorial, we will assume that this chat is open to all users. All that will be required is that our users specify their names on first entry.

？就本教程而言，我們假定此聊天對(duì)所有用戶開(kāi)放。所需要做的就是讓我們的用戶在第一次輸入時(shí)指定他們的姓名。

路線定義 (Route definition)

We can define some of the routes that we need to make this feature, which are:

我們可以定義實(shí)現(xiàn)此功能所需的一些路線，這些路線是：

A home route which renders the first page that takes the user’s name.
一個(gè)家庭路線，該路線顯示使用用戶名的第一頁(yè)。
A login route which accepts a POST request of the user’s name.
接受用戶名的POST請(qǐng)求的登錄路由。
A chat route which renders the chat view.
提供聊天視圖的聊天路徑。

? We may need some other routes as we go along, but this is enough for starters.

？我們可能會(huì)需要一些其他路線，但這對(duì)初學(xué)者來(lái)說(shuō)足夠了。

To add these routes, we open the RouteConfig.cs file in the App_Start directory of our application. And in it, we add the routes we have defined.

要添加這些路由，我們?cè)趹?yīng)用程序的App_Start目錄中打開(kāi)RouteConfig.cs文件。然后在其中添加我們定義的路由。

routes.MapRoute( name: "Home", url: "", defaults: new { controller = "Home", action = "Index" } );routes.MapRoute( name: "Login", url: "login", defaults: new { controller = "Login", action = "Index" } );routes.MapRoute( name: "ChatRoom", url: "chat", defaults: new {controller = "Chat", action="Index"} );

Using the Home route as a sample, the route definition states that / requests will be handled by the HomeController which is found in the Controllers/HomeController.cs file and the Index method of that controller. Next, we will create the controllers we’ll need.

使用Home路由作為示例，路由定義指出/請(qǐng)求將由HomeController處理，該請(qǐng)求可在Controllers/HomeController.cs文件和該Controllers/HomeController.cs的Index方法中找到。接下來(lái)，我們將創(chuàng)建所需的控制器。

創(chuàng)建控制器和動(dòng)作方法 (Creating controllers and action methods)

To create a new controller, right-click the Controller directory and select Add → Controller. In the resulting form, we type in the name of our controller and select the empty template.

要?jiǎng)?chuàng)建新的控制器，請(qǐng)右鍵單擊Controller目錄，然后選擇Add → Controller 。在生成的表單中，我們輸入控制器的名稱，然后選擇空模板。

? When our application is created, it includes a HomeController with an Index action method by default, so we’ll perform the above steps to create our LoginController and ChatController.

？創(chuàng)建我們的應(yīng)用程序時(shí)，默認(rèn)情況下它包括帶有Index操作方法的HomeController，因此我們將執(zhí)行上述步驟來(lái)創(chuàng)建LoginController和ChatController。

In our LoginController class, we create the Index action method specifying [HttpPost] at the top of the action method to indicate that it handles POST requests.

在我們的LoginController類中，我們創(chuàng)建Index操作方法，在該操作方法的頂部指定[HttpPost] ，以指示它處理POST請(qǐng)求。

public class LoginController : Controller { [HttpPost] public ActionResult Index() {} }

The Index action of the LoginController will receive the request payload, read the username from the payload, and assign it to the current user session. Then it will redirect our user to the chat page. When we add this to our action method, we’ll have:

LoginController的Index操作將接收請(qǐng)求有效負(fù)載，從有效負(fù)載中讀取用戶名，并將其分配給當(dāng)前用戶會(huì)話。然后它將把我們的用戶重定向到聊天頁(yè)面。將其添加到操作方法時(shí)，將具有：

public class LoginController : Controller { [HttpPost] public ActionResult Index() { string user = Request.Form["username"]; if (user.Trim() == "") { return Redirect("/"); } Session["user"] = user; return Redirect("/chat"); } }

? In a real-world chat app, we would add the user to a database and mark the user as logged in so that other users could see the available chat options. But that is beyond the scope of this tutorial, so adding to a session will suffice.

？在實(shí)際的聊天應(yīng)用程序中，我們會(huì)將用戶添加到數(shù)據(jù)庫(kù)中，并將該用戶標(biāo)記為已登錄，以便其他用戶可以看到可用的聊天選項(xiàng)。但這超出了本教程的范圍，因此添加一個(gè)會(huì)話就足夠了。

In our ChatController class, we will add the Index action method. The Index action of the ChatController will render our chat view and pass along the current user to the view.

在我們的ChatController類中，我們將添加Index操作方法。 ChatController的Index操作將呈現(xiàn)我們的聊天視圖，并將當(dāng)前用戶傳遞到該視圖。

public class ChatController : Controller { public ActionResult Index() { if (Session["user"] == null) { return Redirect("/"); }ViewBag.currentUser = Session["user"];return View (); } }

? By default, action methods handle GET requests, so we will not need to add [HttpGet] to the top of our method. We’ve also added a simple check to prevent access to the chat page if there is no logged in user.

？默認(rèn)情況下，操作方法處理G ET請(qǐng)求，因此我們無(wú)需在方法頂部添加[ HttpGet] 。我們還添加了一個(gè)簡(jiǎn)單的檢查，以防止在沒(méi)有登錄用戶的情況下訪問(wèn)聊天頁(yè)面。

Let’s not forget about our Home route. In the HomeController, we’ll add the code to render the front page.

讓我們不要忘記我們的回家路線。在HomeController中，我們將添加代碼以呈現(xiàn)首頁(yè)。

public class HomeController : Controller { public ActionResult Index() { if ( Session["user"] != null ) { return Redirect("/chat"); }return View(); } }

? We’ve also added a small check to prevent multiple logins in the same user session.

？我們還添加了一個(gè)小檢查，以防止在同一用戶會(huì)話中多次登錄。

At this point, we’ve created the Controllers and methods to serve our views (which we haven’t created yet), so trying to run this will give you some errors! Let’s fix that.

至此，我們已經(jīng)創(chuàng)建了Controllers和方法來(lái)服務(wù)于我們的視圖(尚未創(chuàng)建)，因此嘗試運(yùn)行它會(huì)給您一些錯(cuò)誤！讓我們修復(fù)它。

實(shí)施應(yīng)用程序的視圖 (Implementing the application’s views)

Based on the routes we’ve defined so far, we will need two views:

根據(jù)到目前為止我們定義的路線，我們將需要兩個(gè)視圖：

The front page view with the login form — served by the Indexaction method of the HomeController class
具有登錄表單的首頁(yè)視圖—由HomeController類的Index action方法提供服務(wù)
The chat view where the typing indicator feature will be seen — served by ChatController class’ Index action method
可以看到鍵入指示符功能的聊天視圖-由ChatController類的Index操作方法提供

For our front page, we’ll create a page with a form that asks for the user’s username and shows them a button to submit for login. Referring to our controller code:

對(duì)于我們的首頁(yè)，我們將創(chuàng)建一個(gè)帶有表單的頁(yè)面，該表單要求用戶的用戶名，并向他們顯示一個(gè)提交登錄的按鈕。參考我們的控制器代碼：

public class HomeController : Controller { public ActionResult Index() { if ( Session["user"] != null ) { return Redirect("/chat"); } return View(); } }

? The View function creates a view response which we return. When View() is invoked, C# looks for the default view of the calling controller class. This default view is the index.cshtml file found in the Views directory, in a directory with the same name as the Controller. That is, the default view of the HomeController class will be the Views/Home/index.cshtml file.

？ V iew函數(shù)創(chuàng)建一個(gè)視圖響應(yīng)，我們將其返回。調(diào)用V iew()時(shí) ，C＃查找調(diào)用控制器類的默認(rèn)視圖。該默認(rèn)視圖是在Views目錄中的i ndex.cshtml文件，該目錄與Controller的名稱相同。也就是說(shuō)，HomeController類的默認(rèn)視圖將是iews/Home/index.cshtml文件。

To create our HomeController default view, we:

要?jiǎng)?chuàng)建我們的HomeController默認(rèn)視圖，我們：

Right-click on the Views directory and select Add New Folder,
右鍵點(diǎn)擊Views目錄，然后選擇Add New Folder ，
Fill in Home as the folder name,
填寫(xiě)首頁(yè)作為文件夾名稱，
Right click the newly created Home folder and select Add New View,
右鍵點(diǎn)擊新創(chuàng)建的主文件夾，然后選擇Add New View ，
Fill in the view name (in our case index), select Razor as the view engine, and click OK.
填寫(xiě)視圖名稱(在本例中為索引 )，選擇Razor作為視圖引擎，然后單擊“確定”。

Now that we’ve created our front page view file, we’ll add the markup for the login form.

現(xiàn)在，我們已經(jīng)創(chuàng)建了首頁(yè)視圖文件，我們將為登錄表單添加標(biāo)記。

<div class="container"> <div class="row"> <div class="col-md-5 col-md-offset-4"> <div class="panel panel-default"> <div class="panel-body"> <form action="/login" method="post" style="margin:0"> <div class="form-group"> <input type="text" name="username" id="username" placeholder="Enter Username" class="form-control" required minlength="3" maxlength="15" /> </div> <button type="submit" class="btn btn-primary btn-block"> Enter Chat </button> </form> </div> </div> </div> </div> </div>

聊天頁(yè)面 (The chat page)

We’ll create the view for the chat page following the same steps as above, but using Chat as our folder name rather than Home.

我們將按照與上述相同的步驟為聊天頁(yè)面創(chuàng)建視圖，但是使用“ Chat作為我們的文件夾名稱而不是“ Home 。

In the chat view, we add markup up to give us a sidebar of available users and an area for chatting.

在聊天視圖中，我們添加了標(biāo)記，以便為我們提供可用用戶的側(cè)邊欄和一個(gè)聊天區(qū)域。

<!DOCTYPE html> <html> <head> <title>pChat — Private Chatroom</title> <link rel="stylesheet" href="@Url.Content("~/Content/app.css")"> </head> <body> @{ var currentUser = ViewBag.currentUser; }  <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">pChat</a> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Log Out</a></li> </ul> </div> </nav>  <div class="container"> <div class="row"> <div class="col-xs-12 col-md-3"> <aside class="main"> <div class="row"> <div class="col-xs-12"> <div class="panel panel-default users__bar"> <div class="panel-heading users__heading"> Online Users (1) </div> <div class="panel-body users__body"> <ul class="list-group"> @if( @currentUser == "Daenerys" ) { <li class="user__item"> <div class="avatar"></div> <a href="#">Jon</a> </li> } else if( @currentUser == "Jon") { <li class="user__item"> <div class="avatar"></div> <a href="#">Daenerys</a> </li> } </ul> </div> </div> </div> </div> </aside> </div> <div class="col-xs-12 col-md-9 chat__body"> <div class="row"> <div class="col-xs-12"> <ul class="list-group chat__main"> <div class="row __chat__par__"> <div class="__chat__ from__chat"> <p>Did you see Avery's sword???</p> </div> </div> <div class="row __chat__par__"> <div class="__chat__ receive__chat"> <p>Err Looked normal to me...</p> </div> </div> <div class="row __chat__par__"> <div class="__chat__ receive__chat"> <p>maybe I'm a hater</p> </div> </div> <div class="row __chat__par__"> <div class="__chat__ from__chat"> <p>Lmaooo</p> </div> </div> </ul> </div> <div class="chat__type__body"> <div class="chat__type"> <textarea id="msg_box" placeholder="Type your message"></textarea> </div> </div> <div class="chat__typing"> <span id="typerDisplay"></span> </div> </div> </div> </div> </div> <script src="@Url.Content("~/Content/app.js")"></script> </body> </html>

We’re using the razor template engine, which gives us the ability to read data passed from the C# code and assign them to variables that can be used in our frontend. Using @{ var currentUser = ViewBag.currentUser } we have passed in the name of the current user, which will come in handy shortly.

我們使用的是razor模板引擎，它使我們能夠讀取從C＃代碼傳遞的數(shù)據(jù)，并將其分配給可在前端使用的變量。使用@{ var currentUser = ViewBag.currentUser }我們傳入了當(dāng)前用戶的名稱，這很快就會(huì)派上用場(chǎng)。

? To keep things quick and simple, we have assumed that there are only two possible users: Daenerys or Jon. So using the razor @if{ } condition, we are showing who is available to chat with.

？為了使事情變得簡(jiǎn)單快捷，我們假設(shè)只有兩個(gè)可能的用戶：D aenerys或J on。 因此，使用剃刀@ if{ }條件，我們正在顯示可以與誰(shuí)聊天。

Now that we have our views in place, we can move on to our typing indicator feature!

現(xiàn)在我們已經(jīng)有了自己的視圖，我們可以繼續(xù)使用打字指示器功能！

實(shí)施打字指示器 (Implementing the typing indicator)

聆聽(tīng)打字事件 (Listening for the typing event)

In most chat applications, the feature becomes visible when someone is typing. To implement it, we’ll start off by listening for the typing event in the chat text area using jQuery. We’ll also pass the currentUser variable we defined earlier with razor to our script.

在大多數(shù)聊天應(yīng)用程序中，當(dāng)有人鍵入內(nèi)容時(shí)，該功能將變?yōu)榭梢?jiàn)。為了實(shí)現(xiàn)它，我們將從使用jQuery聊天文本區(qū)域中的鍵入事件開(kāi)始。我們還將把之前用剃刀定義的currentUser變量傳遞給腳本。

var currentUser = @currentUser;$('#msg_box').on('keydown', function () { //stub });

We added a listener to the keydown event in our typing area to help us monitor when someone is typing.

我們?cè)阪I入?yún)^(qū)域的keydown事件中添加了一個(gè)偵聽(tīng)器，以幫助我們監(jiān)視某人何時(shí)鍵入。

Now that we’ve created our listeners, we’ll make them send a message that someone is typing to the other members of the chat. To do this, we’ll create an endpoint in our C# code to receive this request and broadcast it via Pusher.

現(xiàn)在，我們已經(jīng)創(chuàng)建了偵聽(tīng)器，我們將使他們向聊天的其他成員發(fā)送一條消息，指出有人正在鍵入消息。為此，我們將在C＃代碼中創(chuàng)建一個(gè)端點(diǎn)，以接收此請(qǐng)求并通過(guò)Pusher廣播該請(qǐng)求。

We’ll implement all the client code (assuming that our C# endpoint exists, then we’ll actually create the endpoint later).

我們將實(shí)現(xiàn)所有客戶端代碼(假設(shè)我們的C＃端點(diǎn)存在，然后稍后再實(shí)際創(chuàng)建該端點(diǎn))。

? To prevent excessive requests to our C# code, that is sending a request as every key on the keypad is pressed or released, we’ll throttle the sending of the requests using a debounce function. This debounce function just ignores a function for a while if it keeps occurring.

？為防止對(duì)C＃代碼的過(guò)多請(qǐng)求(即在按下或釋放鍵盤(pán)上的每個(gè)鍵時(shí)發(fā)送請(qǐng)求)，我們將使用反跳功能來(lái)限制請(qǐng)求的發(fā)送。如果該反跳功能持續(xù)發(fā)生，則會(huì)暫時(shí)忽略該功能。

// Debounce function // Credit: https://davidwalsh.name/javascript-debounce-function// Returns a function, that, as long as it continues to be invoked, will not // be triggered. The function will be called after it stops being called for // N milliseconds. If `immediate` is passed, trigger the function on the // leading edge, instead of the trailing. function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; };

Now that we have a debounce function, we’ll create the callback function for our keydown event:

現(xiàn)在我們有了一個(gè)去抖動(dòng)功能，我們將為keydown事件創(chuàng)建回調(diào)函數(shù)：

var isTypingCallback = debounce( function() { $.post('/chat/typing', { typer: currentUser, }); }, 600, true);

and pass the callback to our event listeners.

并將回調(diào)傳遞給我們的事件監(jiān)聽(tīng)器。

$('#msg_box').on('keydown',isTypingCallback);

創(chuàng)建由鍵入事件觸發(fā)的端點(diǎn) (Creating the endpoint triggered by the typing event)

Earlier, we had our event listeners send a POST request to the /chat/typing Route on the client side. Now we’ll create this Route, which will transmit the typing event to other client users using Pusher.

之前，我們讓事件監(jiān)聽(tīng)器將POST請(qǐng)求發(fā)送到客戶端的/chat/typing Route。現(xiàn)在，我們將創(chuàng)建此Route，它將使用Pusher將鍵入事件傳輸給其他客戶端用戶。

First, we’ll create the route for the endpoint in our RouteConfig.cs file.

首先，我們將在RouteConfig.cs文件中為端點(diǎn)創(chuàng)建路由。

... routes.MapRoute( name: "UserTyping", url: "chat/typing", defaults: new { controller = "Chat", action = "Typing" } );

? We’ve created this endpoint to be handled by the Typing action method of the ChatController.

？我們創(chuàng)建了此端點(diǎn)，以使用C hatController的T yping action方法進(jìn)行處理。

Next, we’ll create our Typing action method in the ChatController:

接下來(lái)，我們將在ChatController創(chuàng)建Typing action方法：

[HttpPost] public ActionResult Typing() { //stub }

使用Pusher實(shí)時(shí)更新我們的應(yīng)用程序 (Using Pusher to make our application update in realtime)

Our /`chat/typing` endpoint will receive a post payload of the user who is doing the typing. We’re going to use Pusher to transmit this to everyone else.

我們的/`聊天/打字”端點(diǎn)將收到正在進(jìn)行打字的用戶的帖子負(fù)載。我們將使用Pusher將其傳輸給其他人。

On our Pusher dashboard, we’ll create a new app filling out the information requested — app name, frontend tech, and so on. You can register for free if you don’t have an account. Next, we’ll install the Pusher Server package in our C# code using NuGet, a packer manager for .NET.

在Pusher 儀表板上，我們將創(chuàng)建一個(gè)新應(yīng)用，填寫(xiě)所需的信息-應(yīng)用名稱，前端技術(shù)等。如果您沒(méi)有帳戶，可以免費(fèi)注冊(cè) 。接下來(lái)，我們將使用.NET的打包程序管理器NuGet將Pusher Server軟件包安裝在C＃代碼中。

? To install the package, we right-click the Packages directory, select the add Package option, and select the Pusher Server package.

？要安裝該軟件包，我們右鍵單擊P ackages目錄，選擇dd軟件包選項(xiàng)，然后選擇P 服務(wù)器服務(wù)器軟件包。

Then we’ll add the Pusher broadcasting to our Typing action event. To use Pusher, we’ll have to import the Pusher Server namespace into our code.

然后，我們將Pusher廣播添加到我們的Typing action事件中。要使用Pusher，我們必須將Pusher Server名稱空間導(dǎo)入我們的代碼中。

... using PusherServer;namespace HeyChat.Controllers { public class ChatController : Controller { ...[HttpPost] public ActionResult Typing() { string typer = Request.Form["typer"]; string socket_id = Request.Form["socket_id"];var options = new PusherOptions(); options.Cluster = "PUSHER_APP_CLUSTER";var pusher = new Pusher( "PUSHER_APP_ID", "PUSHER_APP_KEY", "PUSHER_APP_SECRET", options);pusher.TriggerAsync( "chat", "typing", new { typer = typer }, new TriggerOptions() { SocketId = socket_id });return new HttpStatusCodeResult(200); } ...

We initialized Pusher using our PUSHER_APP_ID, PUSHER_APP_KEY, PUSHER_APP_SECRET, and PUSHER_APP_CLUSTER (be sure to replace these with the actual values from your dashboard). Then we broadcast an object containing the typer — which is the person typing — on the typing event via the chat channel.

我們使用PUSHER_APP_ID ， PUSHER_APP_KEY ， PUSHER_APP_SECRET和PUSHER_APP_CLUSTER初始化了Pusher(請(qǐng)確保將其替換為儀表板上的實(shí)際值)。然后，我們廣播一個(gè)包含 導(dǎo)電型測(cè)量?jī)x -這是人打字-對(duì)typing通過(guò)事件chat通道。

? We’ve added new TriggerOptions() { SocketId = socket_id } to our Pusher triggerAsync function. This is to prevent the sender of the broadcast from receiving the broadcast as well. To do this, we’ve assumed we’re receiving socket_id in our payload along with typer, so on our client side, we’ll add it to the payload sent.

？我們?cè)赑usher t riggerAsync函數(shù)中添加了ew TriggerOptions() { SocketId = socket_id } 。這是為了防止廣播的發(fā)送者也接收廣播。為此，我們假設(shè)我們?cè)谪?fù)載中收到了s ocket_id和yper,因此在客戶端，我們將其添加到發(fā)送的負(fù)載中。

Now, whenever there’s a typing event, our C# code broadcasts it on Pusher. All that is left is to listen to that broadcast and display the ‘xxxx is typing…’ feature.

現(xiàn)在，每當(dāng)發(fā)生打字事件時(shí)，我們的C＃代碼都會(huì)在Pusher中廣播該事件。剩下的就是收聽(tīng)廣播并顯示“ xxxx正在輸入...”功能。

First, we’ll initialize Pusher in the script section of our chat page using our PUSHER_APP_KEY and PUSHER_APP_CLUSTER (once again, replace these with the values from your dashboard).

首先，我們將在聊天頁(yè)面的腳本部分中使用PUSHER_APP_KEY和PUSHER_APP_CLUSTER初始化Pusher(再次將它們替換為儀表板中的值)。

var pusher = new Pusher('PUSHER_APP_KEY', { cluster:'PUSHER_APP_CLUSTER' });

To implement the broadcaster exemption we mentioned earlier, we’ll get the socket id from our client pusher instance and amend our payload for the typing request to the server to include it.

為了實(shí)現(xiàn)我們前面提到的廣播商豁免，我們將從客戶端pusher實(shí)例中獲取套接字ID，并修改向服務(wù)器的鍵入請(qǐng)求的有效負(fù)載以將其包括在內(nèi)。

Now that Pusher is initialized on our client side, we’ll subscribe to the chat channel and implement our feature using the typer passed.

現(xiàn)在，在客戶端初始化了Pusher，我們將訂閱聊天頻道并使用傳遞的typer來(lái)實(shí)現(xiàn)我們的功能。

結(jié)論 (Conclusion)

In this tutorial, we’ve walked through implementing the popular typing indicator feature using Pusher, .NET, C# code and some jQuery. We’ve also seen how to broadcast messages and avoid the sender responding to a message they sent.

在本教程中，我們逐步使用了Pusher，.NET，C＃代碼和一些jQuery實(shí)現(xiàn)了流行的打字指示器功能。我們還看到了如何廣播消息以及如何避免發(fā)件人對(duì)他們發(fā)送的消息作出響應(yīng)。

This post was first published to Pusher.

該帖子最初發(fā)布給Pusher 。

翻譯自: https://www.freecodecamp.org/news/how-to-build-a-typing-indicator-for-your-chat-app-in-asp-net-2b008680a69a/