一.概述
使用 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | using Owin;
using Microsoft.Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
app.MapSignalR();
}
}
}
|
登入後複製
5).在專案中新增Hubs資料夾,新增現有項目:
滑鼠右鍵點選Hubs資料夾,請點選新增|新項目,選擇Visual C# |Web |那麼SignalR節點在已安裝窗格中,從中心窗格中,選取那麼SignalR 集線器類別(v2)並建立名為ChatHub.cs。
修改程式碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
public class ChatHub : Hub
{
public void Send(string name, string message)
{
Clients.All.addNewMessageToPage(name, message);
}
}
}
|
登入後複製
6).編輯HomeController類別發現在Controllers/HomeController.cs中,將下列方法加入類別。此方法傳回的聊天的視圖,您將在後面的步驟中建立。
1 2 3 4 5 6 7 | public ActionResult Chat()
{
return View();
}
|
登入後複製
7).在Chat()方法上右鍵>新增視圖頁
修改碼為:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | @{
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 () {
var chat = $.connection.chatHub;
chat.client.addNewMessageToPage = function (name, message) {
$('#discussion').append('<li><strong>' + htmlEncode(name)
+ '</strong>: ' + htmlEncode(message) + '</li>');
};
$('#displayname').val(prompt('Enter your name:', ''));
$('#message').focus();
$.connection.hub.start().done( function () {
$('#sendmessage').click( function () {
chat.server.send($('#displayname').val(), $('#message').val());
$('#message').val('').focus();
});
});
});
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
</script>
}
|
登入後複製
修改碼為:
即時加入即時同步聊天。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持PHP中文網。
更多Asp.net SignalR創建即時聊天應用程式相關文章請關注PHP中文網!