Asp.net SignalR創(chuàng)建實(shí)時(shí)聊天應(yīng)用程序
一.概述
使用 ASP.NET 那么 SignalR 2 創(chuàng)建一個(gè)實(shí)時(shí)聊天應(yīng)用程序。將 SignalR 添加 MVC 5 應(yīng)用程序中,并創(chuàng)建聊天視圖發(fā)送并顯示消息。
在Demo中,將學(xué)習(xí)SignalR 開(kāi)發(fā)任務(wù)包括 ︰
向 MVC 5 應(yīng)用程序添加那么 SignalR 圖書(shū)館。
創(chuàng)建集線器和浩然啟動(dòng)類(lèi),以將內(nèi)容推送到客戶端。
使用 web 頁(yè)中的那么 SignalR jQuery 庫(kù)發(fā)送郵件并顯示更新從集線器。
下面的屏幕快照顯示在瀏覽器中運(yùn)行的已完成的聊天應(yīng)用程序。

二.實(shí)現(xiàn)
創(chuàng)建一個(gè) ASP.NET MVC 5 應(yīng)用程序,安裝 SignalR 庫(kù),添加和創(chuàng)建聊天應(yīng)用程序。
1).在 Visual Studio 中,創(chuàng)建一個(gè) C# ASP.NET 應(yīng)用程序的目標(biāo).NET 框架 4.5,命名為 SignalRChat,并單擊確定.

2).在New ASP.NET Project對(duì)話框中,選擇MVC和單擊更改身份驗(yàn)證

注意:如果應(yīng)用程序選擇一個(gè)不同的身份驗(yàn)證提供程序,將創(chuàng)建Startup.cs類(lèi),這里選擇無(wú)身份驗(yàn)證所有我們自己創(chuàng)建一個(gè)Startup類(lèi)。
3).安裝SignalR
打開(kāi)工具 |庫(kù)包管理器 |程序包管理器控制臺(tái),然后運(yùn)行以下命令。此步驟向項(xiàng)目中添加一組腳本文件和啟用那么 SignalR 功能的程序集引用。
輸入:install-package Microsoft.AspNet.SignalR

安裝完成,Scripts文件夾下出現(xiàn)了這樣的文件:

4).創(chuàng)建Startup類(lèi):
在根目錄下創(chuàng)建類(lèi),命名為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).在項(xiàng)目中添加Hubs文件夾,添加現(xiàn)有項(xiàng):
鼠標(biāo)右鍵單擊Hubs文件夾,請(qǐng)單擊添加|新項(xiàng)目,選擇Visual C# |Web |那么 SignalR節(jié)點(diǎn)在已安裝窗格中,從中心窗格中,選擇那么 SignalR 集線器類(lèi) (v2)并創(chuàng)建名為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類(lèi)發(fā)現(xiàn)在Controllers/HomeController.cs中,將以下方法添加到類(lèi)。此方法返回的聊天的視圖,您將在后面的步驟中創(chuàng)建。
public ActionResult Chat()
{
return View();
}
7).在Chat()方法上右鍵>添加視圖頁(yè)

修改代碼為:
@{
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 () {
// 建立對(duì)應(yīng)server端Hub class的對(duì)象,請(qǐng)注意ChatHub(Hubs文件夾下的類(lèi)名)的第一個(gè)字母要改成小寫(xiě)
var chat = $.connection.chatHub;
// 定義client端的javascript function,供server端hub,通過(guò)dynamic的方式,調(diào)用所有Clients的javascript function
chat.client.addNewMessageToPage = function (name, message) { //這里的fuction(name,message)=>ChatHub.cs 中的Send(string name, string message)
//當(dāng)server端調(diào)用sendMessage時(shí),將server push的message數(shù)據(jù),呈現(xiàn)在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打開(kāi)
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
//調(diào)用叫server端的Hub對(duì)象,將#message數(shù)據(jù)傳給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運(yùn)行項(xiàng)目就可以實(shí)現(xiàn)上面的效果,可以有用戶實(shí)時(shí)加入實(shí)時(shí)同步聊天。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
MVC4制作網(wǎng)站教程第二章 部分用戶功能實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了MVC4制作網(wǎng)站教程,部分用戶功能實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08
關(guān)于dotnet?替換?ASP.NET?Core?的底層通訊為命名管道的?IPC?庫(kù)的問(wèn)題
這篇文章主要介紹了dotnet?替換?ASP.NET?Core?的底層通訊為命名管道的?IPC?庫(kù),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-02-02
asp.net 動(dòng)態(tài)創(chuàng)建TextBox控件及狀態(tài)數(shù)據(jù)如何加載
接著上文Asp.net TextBox的TextChanged事件你真的清楚嗎?這里我們來(lái)說(shuō)說(shuō)狀態(tài)數(shù)據(jù)時(shí)如何加載的,需要的朋友可以參考下2012-12-12
ASP.NET 在下載文件時(shí)對(duì)其重命名的思路及實(shí)現(xiàn)方法
ASP.NET 在下載文件時(shí)對(duì)其重命名的思路及實(shí)現(xiàn)方法,需要的朋友可以參考一下2013-06-06
擴(kuò)展 Entity Framework支持復(fù)雜的過(guò)濾條件(多個(gè)關(guān)鍵字模糊匹配)
之前遇到一個(gè)棘手的Linq to EF查詢的技術(shù)問(wèn)題,現(xiàn)有產(chǎn)品表Product,需要根據(jù)多個(gè)關(guān)鍵字模糊匹配產(chǎn)品名稱, 現(xiàn)將解決方案分享出來(lái),按興趣的朋友可以參考下2012-12-12
ASP.NET數(shù)據(jù)綁定GridView控件使用技巧
這篇文章主要為大家詳細(xì)介紹了ASP.NET數(shù)據(jù)綁定GridView控件使用技巧,感興趣的小伙伴們可以參考一下2016-03-03

