asp.net mvc實(shí)現(xiàn)簡單的實(shí)時消息推送
因?yàn)轫?xiàng)目需要,需要在網(wǎng)頁上實(shí)現(xiàn)消息的推送。在百度上搜索了一下,發(fā)現(xiàn)實(shí)現(xiàn)網(wǎng)頁上的消息推送,可以使用asp.net 中的SignalR類庫,當(dāng)然也可以使用H5的WebSocket Ajax的輪回。當(dāng)然此處我們使用asp.net 中的SignalR類庫。因?yàn)樗梢詫?shí)現(xiàn)網(wǎng)頁上消息的實(shí)時推送。什么是實(shí)時推送呢,我簡單的說一下我個人的理解吧。實(shí)時:在同一時間類發(fā)生的事情,當(dāng)然在計(jì)算機(jī)中并不是絕對的實(shí)時,因?yàn)镃PU在同一時間片只能處理一個任務(wù),那么這個時候疑問又來了?
我們平時使用電腦又上網(wǎng),又聽音樂是如何實(shí)現(xiàn)的呢,因?yàn)楝F(xiàn)在的CPU的計(jì)算速度很快。CPU會把處理不同的任務(wù)的時間片,CPU會把時間片劃到很小,很小,小到我們?nèi)祟惛兄坏?。比如在現(xiàn)在這個時間片上,CPU正在處理音樂任務(wù),在下一個時間片的時候,CPU又在處理上網(wǎng)任務(wù)。所以我認(rèn)為在計(jì)算機(jī)并沒有絕對的實(shí)時,只是我們?nèi)祟惛兄坏搅T了。
推送:在此處的推送是指在網(wǎng)頁消息推送。例如:用戶A和B分別在各自的電腦打開打開一個相同的消息推送網(wǎng)頁。假設(shè)用戶A現(xiàn)在向用戶B發(fā)送消息。就要經(jīng)歷一個這樣的過程 用戶A->Server->用戶B。當(dāng)然具體的底層實(shí)現(xiàn)過程,我就不在些探討了哈。因?yàn)檫@個不是現(xiàn)在所要探討的主題。因?yàn)镾erver有地址一般是固定不變的。所以客戶端向服務(wù)器發(fā)送消息比較容易,因?yàn)槟康牡刂饭潭āD欠?wù)器如何向客戶端發(fā)送消息呢,這個就有點(diǎn)難道了因?yàn)榭蛻舳说牡刂凡还潭ǖ?,并且http是無狀態(tài)的是不能記住用戶的地址的。
所以為了解決這一個問題,計(jì)算機(jī)的先輩們用到了幾個方法:
1、客戶端"心跳"。每隔一段時間去訪問服務(wù)器,看看服務(wù)器有沒有任務(wù)給其客戶端。Ajax的輪回就是使用的這個方法。缺點(diǎn)就是實(shí)時性不太高。
2、服務(wù)端和客戶端的長連接,本文所要談到的SignalR就是用的這種思想。缺點(diǎn):服務(wù)器的壓力大。
好了,現(xiàn)在就說一下什么是SignalR吧。SignalR 是為 ASP.NET 開發(fā)人員提供的一個庫,可以簡化開發(fā)人員將實(shí)時 Web 功能添加到應(yīng)用程序的過程。實(shí)時 Web 功能是指這樣一種功能:當(dāng)所連接的客戶端變得可用時服務(wù)器代碼可以立即向其推送內(nèi)容,而不是讓服務(wù)器等待客戶端請求新的數(shù)據(jù)。這個也就實(shí)現(xiàn)消息的實(shí)時推送。我個人理解的實(shí)現(xiàn)原理是首先由服務(wù)器定制一個函數(shù)用于一個客戶端調(diào)用將消息發(fā)送給另一個客戶端。當(dāng)然客戶端也需要定抽一個函數(shù)。因?yàn)榉?wù)器需要調(diào)用客戶端的這個函數(shù)。
下面就說下具體的操作方法吧。
1、環(huán)境:win 10+VS2015 社區(qū)版
我使用asp.net mvc。首先打開VS 2015|文件|新建|項(xiàng)目(SignalRMvc)|asp.net Web應(yīng)用程序|空模板,MVC,平臺大概就是這樣了。
現(xiàn)在說下具體需要包含的文件吧。
1)、SignalR集線器類。用于寫一個訪求調(diào)用客戶段的函數(shù)。
2)、OWIN類。用于注冊服務(wù)器的函數(shù)。
3)、前臺的頁面(包括前臺的消息框的編寫,函數(shù)的編寫)當(dāng)然前臺需要一些文件。
一般VS沒有自帶SignalR類,需要我們在開始任務(wù)之前去添加這個功能。選擇VS的工具|Nuget包管理器|Nuget包管理器控制臺|Install-Package Microsoft.Aspnet.SignalR去安裝SignalR。安裝完成后,1、我們在改項(xiàng)目中新建一個文件夾為ChatHubs|新建一個SignalR集線器類,并寫上如下代碼:
using Microsoft.AspNet.SignalR;
namespace SignalRMvc.ChatHubs
{
public class ChatHub : Hub
{
public void SendMessage(string name,string message)
{
// Clients.All.hello();
Clients.All.receiveMessage(name, message);
//用戶調(diào)用客戶端的函數(shù)
}
}
}
2、在ChatHubs文件夾下新建一個OWIN類。并寫上如下代碼:
using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRMvc.ChatHubs.Startup))]
namespace SignalRMvc.ChatHubs
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
app.MapSignalR();
//服務(wù)器的hub注冊
}
}
}
3、在Controllers新建一個Home控制器。并寫上如下代碼:
using System.Web.Mvc;
namespace SignalRMvc.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult ClientChat()
{
return View();
}
}
}
4、在控制器的方法上右擊添加視圖(不使用模板,也不使用布局頁)后。并寫上如下代碼:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
@* BootStarp的引入*@
<style>
#message_box {
height: 400px;
overflow-y: scroll;
}
</style>
@* 呈現(xiàn)消息 *@
</head>
<body>
<div class="container">
<div class="row">
<div class="jumbotron">
<ul id="message_box"></ul>
</div>
發(fā)送者名稱:<input id="text_name" class="form-control" /><br />
消息內(nèi)容:
<textarea id="text_message" class="form-control" rows="3"></textarea>
<br />
<button id="btn_send" class="btn btn-block btn-success">Send</button>
</div>
</div>
<script src="~/scripts/jquery-3.1.0.min.js"></script>
<script src="~/scripts/jquery.signalR-2.2.1.min.js"></script>
@* 上述引入的兩個文件的順序不以交換,因?yàn)橄旅孢@個文件依賴于上面那個文件 *@
<script src="~/signalr/hubs"></script>
<!-- 本地沒有,動態(tài)生成 -->
<script>
$(function () {
var $messageBox = $('#message_box');
var $textMessage = $('#text_message');
var $textName = $('#text_name');
//客戶端先與服務(wù)器連接起來,拿到服務(wù)器的代理操作對象
var hubConnection = $.connection.chatHub;
//注冊客戶端函數(shù)
hubConnection.client.receiveMessage = function (name, message) {
$messageBox.append('<li><b>' + name + '</b> say:' + message + '</li>')
}
//啟動連接到服務(wù)器
$.connection.hub.start().done(function () {
$('#btn_send').bind('click', function () {
//調(diào)用服務(wù)端的函數(shù)
hubConnection.server.sendMessage($textName.val(), $textMessage.val());
});
});
});
</script>
</body>
</html>
如果直接復(fù)制使用。要注意前臺的代碼引入的文件的目錄及版本。前臺代碼的命名的首字母最好使用小寫,后臺代碼的首字母最好使用大寫。因?yàn)閖s默認(rèn)使用的是駝峰命名法,C Sharp使用帕斯卡命名方式。如果沒有注重這個細(xì)節(jié)就會很容易出錯。因?yàn)楹笈_代碼在執(zhí)行的時候會動態(tài)的生成一些JS代碼,JS代碼的默認(rèn)使用的駝峰命名法。如果你在前臺的代碼用了帕斯卡命名方式就很容易出錯了。并且還不好找。我是有過親身經(jīng)歷的。
下面我們在本地測試下:分別使用FireFox和Chrome來模擬兩個客戶端,當(dāng)然自身的電腦也就服務(wù)端。效果圖如下:

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
把a(bǔ)spx頁面?zhèn)窝b成靜態(tài)html格式的實(shí)現(xiàn)代碼
把a(bǔ)spx頁面?zhèn)窝b成靜態(tài)html格式的實(shí)現(xiàn)代碼,主要是利于搜索引擎的收錄。2011-10-10
WEB上調(diào)用HttpWebRequest奇怪問題的解決方法
WEB上調(diào)用HttpWebRequest奇怪問題的解決方法...2007-04-04
解析利用wsdl.exe生成webservice代理類的詳解
本篇文章是對利用wsdl.exe生成webservice代理類進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-05-05
asp.net request.PathInfo實(shí)現(xiàn)的url重寫
最近對在開始研究url重寫,對重寫的原理以及重寫之后引起的性能問題是研究的重點(diǎn),研究過程中發(fā)現(xiàn)了一種輕便的“url重寫方案”2009-04-04
.net SMTP發(fā)送Email實(shí)例(可帶附件)
本文為大家詳細(xì)介紹下.net SMTP發(fā)送Email同時可帶附件的具體實(shí)現(xiàn)思路及代碼,想實(shí)現(xiàn)的朋友可以參考下哈,希望對大家有所幫助2013-07-07
ASP.NET MVC異步獲取和刷新ExtJS6 TreeStore
這篇文章主要為大家詳細(xì)介紹了ASP.NET MVC異步獲取和刷新ExtJS6 TreeStore的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12

