Asp.net SignalR創建即時聊天應用程式

一.概述

使用 ASP.NET 那麼 SignalR 2 建立一個即時聊天應用程式。將 SignalR 新增 MVC 5 應用程式中，並建立​​聊天視圖傳送並顯示訊息。

在Demo中，將學習SignalR 開發任務包括 ︰

向 MVC 5 應用程式添加那麼 SignalR 圖書館。
建立集線器和浩然啟動類，以將內容推送到客戶端。
使用 web 頁中的那麼 SignalR jQuery 庫發送郵件並顯示更新從集線器。

下面的螢幕快照顯示在瀏覽器中運行的已完成的聊天應用程式。

二.實作

建立一個 ASP.NET MVC 5 應用程序，安裝 SignalR 庫，新增和建立聊天應用程式。

1）.在Visual Studio 中，建立一個C# ASP.NET 應用程式的目標.NET 框架4.5，命名為SignalRChat，並按確定.

2）.在New ASP.NET Project中，選擇MVC和點擊更改身份驗證

注意：如果應用程式選擇不同的身份驗證提供程序，將創建Startup.cs類，這裡選擇無身份驗證所有我們自己創建一個Startup類。

3）.安裝SignalR
開啟工具 |程式庫管理器 |套件管理員控制台，然後執行下列指令。此步驟為專案中新增一組腳本檔案和啟用那麼 SignalR 功能的組件參考。

輸入：install-package Microsoft.AspNet.SignalR

安裝完成，Scripts資料夾下出現了這樣的檔案：

4）. ，命名為Startup：

using Owin;
using Microsoft.Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
 public class Startup
 {
  public void Configuration(IAppBuilder app)
  {
   // Any connection or hub wire up and configuration should go here
   app.MapSignalR();
  }
 }
}

5）.在專案中新增Hubs資料夾，新增現有項目：

滑鼠右鍵點選Hubs資料夾，請點選新增|新項目，選擇Visual C# |Web |那麼SignalR節點在已安裝窗格中，從中心窗格中，選取那麼SignalR 集線器類別(v2)並建立名為ChatHub.cs。

修改程式碼：

using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
 public class ChatHub : Hub
 {
  public void Send(string name, string message)
  {
   // Call the addNewMessageToPage method to update clients.
   Clients.All.addNewMessageToPage(name, message);
  }
 }
}

   

6）.編輯HomeController類別發現在Controllers/HomeController.cs中，將下列方法加入類別。此方法傳回的聊天的視圖，您將在後面的步驟中建立。

public ActionResult Chat()
 
{
 
 return View();
 
}

   

7）.在Chat()方法上右鍵>新增視圖頁

修改碼為：

@{
 ViewBag.Title = "Chat";
}
<h2>Chat</h2>
<div class="container">
 <input type="text" id="message" />
 <input type="button" id="sendmessage" value="Send" />
 <input type="hidden" id="displayname" />
 <ul id="discussion"></ul>
</div>
@section scripts {
 <!--Script references. -->
 <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
 <!--Reference the SignalR library. -->
 <script src="~/Scripts/jquery.signalR-2.0.3.min.js"></script>
 <!--Reference the autogenerated SignalR hub script. -->
 <script src="~/signalr/hubs"></script>
 <!--SignalR script to update the chat page and send messages.-->
 <script>
  $(function () {
   // 建立对应server端Hub class的对象，请注意ChatHub(Hubs文件夹下的类名)的第一个字母要改成小写
   var chat = $.connection.chatHub;
   // 定义client端的javascript function，供server端hub，通过dynamic的方式，调用所有Clients的javascript function
   chat.client.addNewMessageToPage = function (name, message) { //这里的fuction(name,message)=>ChatHub.cs 中的Send(string name, string message)
    //当server端调用sendMessage时，将server push的message数据，呈现在wholeMessage中
    $(&#39;#discussion&#39;).append(&#39;<li><strong>&#39; + htmlEncode(name)
     + &#39;</strong>: &#39; + htmlEncode(message) + &#39;</li>&#39;);
   };
   // Get the user name and store it to prepend to messages.
   $(&#39;#displayname&#39;).val(prompt(&#39;Enter your name:&#39;, &#39;&#39;));
   // Set initial focus to message input box.
   $(&#39;#message&#39;).focus();
   //把connection打开
   $.connection.hub.start().done(function () {
    $(&#39;#sendmessage&#39;).click(function () {
     //调用叫server端的Hub对象，将#message数据传给server
     chat.server.send($(&#39;#displayname&#39;).val(), $(&#39;#message&#39;).val());
     $(&#39;#message&#39;).val(&#39;&#39;).focus();
    });
   });
  });
  // This optional function html-encodes messages for display in the page.
  function htmlEncode(value) {
   var encodedValue = $(&#39;<div />&#39;).text(value).html();
   return encodedValue;
  }
 </script>
}

修改碼為：

即時加入即時同步聊天。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持PHP中文網。

更多Asp.net SignalR創建即時聊天應用程式相關文章請關注PHP中文網！