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類：

在根目錄下建立類，命名為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中    $('#discussion').append('<li><strong>' + htmlEncode(name)     + '</strong>: ' + htmlEncode(message) + '</li>');   };   // Get the user name and store it to prepend to messages.   $('#displayname').val(prompt('Enter your name:', ''));   // Set initial focus to message input box.   $('#message').focus();   //把connection開啟   $.connection.hub.start().done(function () {    $('#sendmessage').click(function () {     //調用叫server端的Hub對象，將#message資料傳給server     chat.server.send($('#displayname').val(), $('#message').val());     $('#message').val('').focus();    });   });  });  // This optional function html-encodes messages for display in the page.  function htmlEncode(value) {   var encodedValue = $('<div />').text(value).html();   return encodedValue;  } </script>}

F5運行項目就可以實現上面的效果，可以有使用者即時加入即時同步聊天。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援topic.alibabacloud.com。