VS2012+MVC4+(signalR-2.2.0自带案例)
Signalr2.0的DEMO确实翻遍了整个网络没有实现出来这个DEMO,这个和我学习的扎实程度有一定的关系。
Signal2.0的使用,主要是想在项目上挂一个持久连接达到推送到WEB目的。
1、工具准备
SignalR运行在.Net4.5平台上,所以需要安装.Net4.5。为了方便演示,本示例使用ASP.NET
MVC在Win7系统来实现。
安装ASP.NET MVC4.
2、建立工程
打开Vs2012/VS2012 新建名为SignalRDemo的ASP.NET MVC4 Web Application 工程,选择 Internet Application 模板,Razor视图引擎及勾选 Use HTML 5标签。
3,安装 SignalR.Sample
打开 NuGet 的 package manager console(Tools->Library package manager),输入:Install-package Microsoft.AspNet.signalr.sample(安装如果失败,查看网络是否连同),回车安装。如图所示:
安装成功后,提示修改配置,确认同意。
4、修改配置
打开Startup.cs 修改文档如下
using Microsoft.Owin;
[assembly: OwinStartup(typeof(Microsoft.AspNet.SignalR.StockTicker.Startup))]
namespace Microsoft.AspNet.SignalR.StockTicker
{
public static class Startup
{
public static void ConfigureSignalR(IAppBuilder app)
{
// For more information on how to configure your application using OWIN startup, visit http://go.microsoft.com/fwlink/?LinkID=316888
app.MapSignalR();
}
public static void Configuration(IAppBuilder app)
{
Microsoft.AspNet.SignalR.StockTicker.Startup.ConfigureSignalR(app);
}
}
}
5、设计前台测试页面
在HomeController里增加类
public ActionResult testv()
{
ViewBag.Message = "你的应用程序说明页。";
return View();
}
在View\Home里增加视图 testv.cshtml 增加代码:
@{
ViewBag.Title = "SignalR Test";
}
<script src="~/SignalR.Sample/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="~/signalr/hubs"></script>
//网上都说这句非常重要把我绕进了非常大的圈子,我根本找不到路径,后来在一些网站里,一些网友说是程序运行时候自动生成的。
<script src="~/SignalR.Sample/SignalR.StockTicker.js"></script>
<h1>ASP.NET SignalR Stock Ticker Sample</h1>
<input type="button" id="open" value="Open Market" />
<input type="button" id="close" value="Close Market" disabled="disabled" />
<input type="button" id="reset" value="Reset" />
<h2>Live Stock Table</h2>
<div id="stockTable">
<table border="1">
<thead>
<tr><th>Symbol</th><th>Price</th><th>Open</th><th>High</th><th>Low</th><th>Change</th><th>%</th></tr>
</thead>
<tbody>
<tr class="loading"><td colspan="7">loading...</td></tr>
</tbody>
</table>
</div>
<h2>Live Stock Ticker</h2>
<div id="stockTicker">
<div class="inner">
<ul>
<li class="loading">loading...</li>
</ul>
</div>
</div>
6、测试效果