• 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();

            }

    在ViewHome里增加视图 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、测试效果

  • 相关阅读:
    分布式文档存储数据库 MongoDB
    MongoDB运行状态、性能监控,分析
    Mongodb在Linux下的安装和启动和配置
    mongodb 状态监控命令详解
    Asp.net Core 入门实战 2.请求流程
    Asp.net Core 入门实战
    前后端分离之CORS和WebApi
    2.CLI标准
    JavaScript的引入方式
    CSS选择器的优先级
  • 原文地址:https://www.cnblogs.com/kikizhong/p/4863501.html
Copyright © 2020-2023  润新知