【SignalR学习系列】4. SignalR广播程序

于 2021-02-24 17:50:49 发布
阅读量288 收藏
点赞数
原文链接：https://www.cnblogs.com/Soulless/p/7224442.html
版权

转自：https://www.cnblogs.com/Soulless/p/7224442.html

创建项目

创建一个空的 Web 项目，并在 Nuget 里面添加 SignalR，jQuery UI 包，添加以后项目里包含了 jQuery，jQuery.UI ，和 SignalR 的脚本。

 

服务端代码

创建 Stock 类

复制代码 
using System;

namespace SignalRDemo4
{
public class Stock
{
private decimal _price;

    </span><span style="color: rgba(0, 0, 255, 1)">public</span> <span style="color: rgba(0, 0, 255, 1)">string</span> Symbol { <span style="color: rgba(0, 0, 255, 1)">get</span>; <span style="color: rgba(0, 0, 255, 1)">set</span><span style="color: rgba(0, 0, 0, 1)">; }

    </span><span style="color: rgba(0, 0, 255, 1)">public</span> <span style="color: rgba(0, 0, 255, 1)">decimal</span><span style="color: rgba(0, 0, 0, 1)"> Price
    {
        </span><span style="color: rgba(0, 0, 255, 1)">get</span><span style="color: rgba(0, 0, 0, 1)">
        {
            </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> _price;
        }
        </span><span style="color: rgba(0, 0, 255, 1)">set</span><span style="color: rgba(0, 0, 0, 1)">
        {
            </span><span style="color: rgba(0, 0, 255, 1)">if</span> (_price ==<span style="color: rgba(0, 0, 0, 1)"> value)
            {
                </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)">;
            }

            _price </span>=<span style="color: rgba(0, 0, 0, 1)"> value;

            </span><span style="color: rgba(0, 0, 255, 1)">if</span> (DayOpen == <span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">)
            {
                DayOpen </span>=<span style="color: rgba(0, 0, 0, 1)"> _price;
            }
        }
    }

    </span><span style="color: rgba(0, 0, 255, 1)">public</span> <span style="color: rgba(0, 0, 255, 1)">decimal</span> DayOpen { <span style="color: rgba(0, 0, 255, 1)">get</span>; <span style="color: rgba(0, 0, 255, 1)">private</span> <span style="color: rgba(0, 0, 255, 1)">set</span><span style="color: rgba(0, 0, 0, 1)">; }

    </span><span style="color: rgba(0, 0, 255, 1)">public</span> <span style="color: rgba(0, 0, 255, 1)">decimal</span><span style="color: rgba(0, 0, 0, 1)"> Change
    {
        </span><span style="color: rgba(0, 0, 255, 1)">get</span><span style="color: rgba(0, 0, 0, 1)">
        {
            </span><span style="color: rgba(0, 0, 255, 1)">return</span> Price -<span style="color: rgba(0, 0, 0, 1)"> DayOpen;
        }
    }

    </span><span style="color: rgba(0, 0, 255, 1)">public</span> <span style="color: rgba(0, 0, 255, 1)">double</span><span style="color: rgba(0, 0, 0, 1)"> PercentChange
    {
        </span><span style="color: rgba(0, 0, 255, 1)">get</span><span style="color: rgba(0, 0, 0, 1)">
        {
            </span><span style="color: rgba(0, 0, 255, 1)">return</span> (<span style="color: rgba(0, 0, 255, 1)">double</span>)Math.Round(Change / Price, <span style="color: rgba(128, 0, 128, 1)">4</span><span style="color: rgba(0, 0, 0, 1)">);
        }
    }
}

}

复制代码

创建 tockTicker 和 StockTickerHub 类

添加类 StockTicker

复制代码 
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using System;
using System.Collections.Concurrent;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Web;

namespace SignalRDemo4
{
public class StockTicker
{
// Singleton instance
private readonly static Lazy<StockTicker> _instance = new Lazy<StockTicker>(() => new StockTicker(GlobalHost.ConnectionManager.GetHubContext<StockTickerHub>().Clients));

    </span><span style="color: rgba(0, 0, 255, 1)">private</span> <span style="color: rgba(0, 0, 255, 1)">readonly</span> ConcurrentDictionary&lt;<span style="color: rgba(0, 0, 255, 1)">string</span>, Stock&gt; _stocks = <span style="color: rgba(0, 0, 255, 1)">new</span> ConcurrentDictionary&lt;<span style="color: rgba(0, 0, 255, 1)">string</span>, Stock&gt;<span style="color: rgba(0, 0, 0, 1)">();

    </span><span style="color: rgba(0, 0, 255, 1)">private</span> <span style="color: rgba(0, 0, 255, 1)">readonly</span> <span style="color: rgba(0, 0, 255, 1)">object</span> _updateStockPricesLock = <span style="color: rgba(0, 0, 255, 1)">new</span> <span style="color: rgba(0, 0, 255, 1)">object</span><span style="color: rgba(0, 0, 0, 1)">();

    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">stock can go up or down by a percentage of this factor on each change</span>
    <span style="color: rgba(0, 0, 255, 1)">private</span> <span style="color: rgba(0, 0, 255, 1)">readonly</span> <span style="color: rgba(0, 0, 255, 1)">double</span> _rangePercent = .<span style="color: rgba(128, 0, 128, 1)">002</span><span style="color: rgba(0, 0, 0, 1)">;

    </span><span style="color: rgba(0, 0, 255, 1)">private</span> <span style="color: rgba(0, 0, 255, 1)">readonly</span> TimeSpan _updateInterval = TimeSpan.FromMilliseconds(<span style="color: rgba(128, 0, 128, 1)">250</span><span style="color: rgba(0, 0, 0, 1)">);
    </span><span style="color: rgba(0, 0, 255, 1)">private</span> <span style="color: rgba(0, 0, 255, 1)">readonly</span> Random _updateOrNotRandom = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Random();

    </span><span style="color: rgba(0, 0, 255, 1)">private</span> <span style="color: rgba(0, 0, 255, 1)">readonly</span><span style="color: rgba(0, 0, 0, 1)"> Timer _timer;
    </span><span style="color: rgba(0, 0, 255, 1)">private</span> <span style="color: rgba(0, 0, 255, 1)">volatile</span> <span style="color: rgba(0, 0, 255, 1)">bool</span> _updatingStockPrices = <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">;

    </span><span style="color: rgba(0, 0, 255, 1)">private</span> StockTicker(IHubConnectionContext&lt;<span style="color: rgba(0, 0, 255, 1)">dynamic</span>&gt;<span style="color: rgba(0, 0, 0, 1)"> clients)
    {
        Clients </span>=<span style="color: rgba(0, 0, 0, 1)"> clients;

        _stocks.Clear();
        </span><span style="color: rgba(0, 0, 255, 1)">var</span> stocks = <span style="color: rgba(0, 0, 255, 1)">new</span> List&lt;Stock&gt;<span style="color: rgba(0, 0, 0, 1)">
        {
            </span><span style="color: rgba(0, 0, 255, 1)">new</span> Stock { Symbol = <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">MSFT</span><span style="color: rgba(128, 0, 0, 1)">"</span>, Price = <span style="color: rgba(128, 0, 128, 1)">30.31m</span><span style="color: rgba(0, 0, 0, 1)"> },
            </span><span style="color: rgba(0, 0, 255, 1)">new</span> Stock { Symbol = <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">APPL</span><span style="color: rgba(128, 0, 0, 1)">"</span>, Price = <span style="color: rgba(128, 0, 128, 1)">578.18m</span><span style="color: rgba(0, 0, 0, 1)"> },
            </span><span style="color: rgba(0, 0, 255, 1)">new</span> Stock { Symbol = <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">GOOG</span><span style="color: rgba(128, 0, 0, 1)">"</span>, Price = <span style="color: rgba(128, 0, 128, 1)">570.30m</span><span style="color: rgba(0, 0, 0, 1)"> }
        };
        stocks.ForEach(stock </span>=&gt;<span style="color: rgba(0, 0, 0, 1)"> _stocks.TryAdd(stock.Symbol, stock));

        _timer </span>= <span style="color: rgba(0, 0, 255, 1)">new</span> Timer(UpdateStockPrices, <span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">, _updateInterval, _updateInterval);

    }

    </span><span style="color: rgba(0, 0, 255, 1)">public</span> <span style="color: rgba(0, 0, 255, 1)">static</span><span style="color: rgba(0, 0, 0, 1)"> StockTicker Instance
    {
        </span><span style="color: rgba(0, 0, 255, 1)">get</span><span style="color: rgba(0, 0, 0, 1)">
        {
            </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> _instance.Value;
        }
    }

    </span><span style="color: rgba(0, 0, 255, 1)">private</span> IHubConnectionContext&lt;<span style="color: rgba(0, 0, 255, 1)">dynamic</span>&gt;<span style="color: rgba(0, 0, 0, 1)"> Clients
    {
        </span><span style="color: rgba(0, 0, 255, 1)">get</span><span style="color: rgba(0, 0, 0, 1)">;
        </span><span style="color: rgba(0, 0, 255, 1)">set</span><span style="color: rgba(0, 0, 0, 1)">;
    }

    </span><span style="color: rgba(0, 0, 255, 1)">public</span> IEnumerable&lt;Stock&gt;<span style="color: rgba(0, 0, 0, 1)"> GetAllStocks()
    {
        </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> _stocks.Values;
    }

    </span><span style="color: rgba(0, 0, 255, 1)">private</span> <span style="color: rgba(0, 0, 255, 1)">void</span> UpdateStockPrices(<span style="color: rgba(0, 0, 255, 1)">object</span><span style="color: rgba(0, 0, 0, 1)"> state)
    {
        </span><span style="color: rgba(0, 0, 255, 1)">lock</span><span style="color: rgba(0, 0, 0, 1)"> (_updateStockPricesLock)
        {
            </span><span style="color: rgba(0, 0, 255, 1)">if</span> (!<span style="color: rgba(0, 0, 0, 1)">_updatingStockPrices)
            {
                _updatingStockPrices </span>= <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">;

                </span><span style="color: rgba(0, 0, 255, 1)">foreach</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> stock <span style="color: rgba(0, 0, 255, 1)">in</span><span style="color: rgba(0, 0, 0, 1)"> _stocks.Values)
                {
                    </span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (TryUpdateStockPrice(stock))
                    {
                        BroadcastStockPrice(stock);
                    }
                }

                _updatingStockPrices </span>= <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">;
            }
        }
    }

    </span><span style="color: rgba(0, 0, 255, 1)">private</span> <span style="color: rgba(0, 0, 255, 1)">bool</span><span style="color: rgba(0, 0, 0, 1)"> TryUpdateStockPrice(Stock stock)
    {
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Randomly choose whether to update this stock or not</span>
        <span style="color: rgba(0, 0, 255, 1)">var</span> r =<span style="color: rgba(0, 0, 0, 1)"> _updateOrNotRandom.NextDouble();
        </span><span style="color: rgba(0, 0, 255, 1)">if</span> (r &gt; .<span style="color: rgba(128, 0, 128, 1)">1</span><span style="color: rgba(0, 0, 0, 1)">)
        {
            </span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">;
        }

        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Update the stock price by a random factor of the range percent</span>
        <span style="color: rgba(0, 0, 255, 1)">var</span> random = <span style="color: rgba(0, 0, 255, 1)">new</span> Random((<span style="color: rgba(0, 0, 255, 1)">int</span><span style="color: rgba(0, 0, 0, 1)">)Math.Floor(stock.Price));
        </span><span style="color: rgba(0, 0, 255, 1)">var</span> percentChange = random.NextDouble() *<span style="color: rgba(0, 0, 0, 1)"> _rangePercent;
        </span><span style="color: rgba(0, 0, 255, 1)">var</span> pos = random.NextDouble() &gt; .<span style="color: rgba(128, 0, 128, 1)">51</span><span style="color: rgba(0, 0, 0, 1)">;
        </span><span style="color: rgba(0, 0, 255, 1)">var</span> change = Math.Round(stock.Price * (<span style="color: rgba(0, 0, 255, 1)">decimal</span>)percentChange, <span style="color: rgba(128, 0, 128, 1)">2</span><span style="color: rgba(0, 0, 0, 1)">);
        change </span>= pos ? change : -<span style="color: rgba(0, 0, 0, 1)">change;

        stock.Price </span>+=<span style="color: rgba(0, 0, 0, 1)"> change;
        </span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">;
    }

    </span><span style="color: rgba(0, 0, 255, 1)">private</span> <span style="color: rgba(0, 0, 255, 1)">void</span><span style="color: rgba(0, 0, 0, 1)"> BroadcastStockPrice(Stock stock)
    {
        Clients.All.updateStockPrice(stock);
    }
}

}

复制代码

为了线程安全，把 Stock 的数据存储在了 ConcurrentDictionary 里面。

 

添加 SignalR Hub Class

复制代码 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;

namespace SignalRDemo4
{
[HubName(“stockTickerMini”)]
public class StockTickerHub : Hub
{
private readonly StockTicker _stockTicker;

    </span><span style="color: rgba(0, 0, 255, 1)">public</span> StockTickerHub() : <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">(StockTicker.Instance) { }

    </span><span style="color: rgba(0, 0, 255, 1)">public</span><span style="color: rgba(0, 0, 0, 1)"> StockTickerHub(StockTicker stockTicker)
    {
        _stockTicker </span>=<span style="color: rgba(0, 0, 0, 1)"> stockTicker;
    }

    </span><span style="color: rgba(0, 0, 255, 1)">public</span> IEnumerable&lt;Stock&gt;<span style="color: rgba(0, 0, 0, 1)"> GetAllStocks()
    {
        </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> _stockTicker.GetAllStocks();
    }
}

}

复制代码

添加 Owin 类，并在里面配置 SignalR

复制代码 
using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(SignalRDemo4.Startup))]

namespace SignalRDemo4
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=316888
app.MapSignalR();
}
}
}

复制代码

 

客户端代码

添加名为 StockTicker 的html页面，设置为启动页面，并替换为下面代码。

复制代码 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ASP.NET SignalR Stock Ticker</title>
    <style>
        body {
            font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
            font-size: 16px;
        }

    #stockTable table </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">{</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        border-collapse</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> collapse</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span>
    <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 0, 1)">

        #stockTable table th, #stockTable table td </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">{</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
            padding</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> 2px 6px</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span>
        <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 0, 1)">

        #stockTable table td </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">{</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
            text-align</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> right</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span>
        <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 0, 1)">

    #stockTable .loading td </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">{</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        text-align</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> left</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span>
    <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</head>
<body>
<h1>ASP.NET SignalR Stock Ticker Sample</h1>

<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">h2</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Live Stock Table<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">h2</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="stockTable"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">table </span><span style="color: rgba(255, 0, 0, 1)">border</span><span style="color: rgba(0, 0, 255, 1)">="1"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">thead</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Symbol<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Price<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Open<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Change<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>%<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">thead</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">tbody</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">tr </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="loading"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;</span><span style="color: rgba(128, 0, 0, 1)">td </span><span style="color: rgba(255, 0, 0, 1)">colspan</span><span style="color: rgba(0, 0, 255, 1)">="5"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>loading...<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">tbody</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">table</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)">Script references. </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)">Reference the jQuery library. </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">script </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="Scripts/jquery-3.1.1.min.js"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)">Reference the SignalR library. </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">script </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="Scripts/jquery.signalR-2.2.2.js"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)">Reference the autogenerated SignalR hub script. </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">script </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="/signalr/hubs"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)">Reference the StockTicker script. </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">script </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="Scripts/StockTicker.js"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</body>
</html>

复制代码

添加名为 StockTicker 的js文件，并添加下面代码

复制代码 
// A simple templating method for replacing placeholders enclosed in curly braces.
if (!String.prototype.supplant) {
    String.prototype.supplant = function (o) {
        return this.replace(/{([^{}]*)}/g,
            function (a, b) {
                var r = o[b];
                return typeof r === 'string' || typeof r === 'number' ? r : a;
            }
        );
    };
}

$(function () {

</span><span style="color: rgba(0, 0, 255, 1)">var</span> ticker = $.connection.stockTickerMini, <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> the generated client-side hub proxy</span>
    up = '▲'<span style="color: rgba(0, 0, 0, 1)">,
    down </span>= '▼'<span style="color: rgba(0, 0, 0, 1)">,
    $stockTable </span>= $('#stockTable'<span style="color: rgba(0, 0, 0, 1)">),
    $stockTableBody </span>= $stockTable.find('tbody'<span style="color: rgba(0, 0, 0, 1)">),
    rowTemplate </span>= '&lt;tr data-symbol="{Symbol}"&gt;&lt;td&gt;{Symbol}&lt;/td&gt;&lt;td&gt;{Price}&lt;/td&gt;&lt;td&gt;{DayOpen}&lt;/td&gt;&lt;td&gt;{Direction} {Change}&lt;/td&gt;&lt;td&gt;{PercentChange}&lt;/td&gt;&lt;/tr&gt;'<span style="color: rgba(0, 0, 0, 1)">;

</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> formatStock(stock) {
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> $.extend(stock, {
        Price: stock.Price.toFixed(</span>2<span style="color: rgba(0, 0, 0, 1)">),
        PercentChange: (stock.PercentChange </span>* 100).toFixed(2) + '%'<span style="color: rgba(0, 0, 0, 1)">,
        Direction: stock.Change </span>=== 0 ? '' : stock.Change &gt;= 0 ?<span style="color: rgba(0, 0, 0, 1)"> up : down
    });
}

</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> init() {
    ticker.server.getAllStocks().done(</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (stocks) {
        $stockTableBody.empty();
        $.each(stocks, </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> () {
            </span><span style="color: rgba(0, 0, 255, 1)">var</span> stock = formatStock(<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">);
            $stockTableBody.append(rowTemplate.supplant(stock));
        });
    });
}

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Add a client-side hub method that the server will call</span>
ticker.client.updateStockPrice = <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (stock) {
    </span><span style="color: rgba(0, 0, 255, 1)">var</span> displayStock =<span style="color: rgba(0, 0, 0, 1)"> formatStock(stock),
        $row </span>=<span style="color: rgba(0, 0, 0, 1)"> $(rowTemplate.supplant(displayStock));

    $stockTableBody.find(</span>'tr[data-symbol=' + stock.Symbol + ']'<span style="color: rgba(0, 0, 0, 1)">)
        .replaceWith($row);
}

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Start the connection</span>

$.connection.hub.start().done(init);

});

复制代码

然后按F5进行调试，打开多个浏览器，发现里面的数据会同步更新。

 

源代码链接：

链接: https://pan.baidu.com/s/1pKRIR2r 密码: em9k

 

参考链接：

https://docs.microsoft.com/zh-cn/aspnet/signalr/overview/getting-started/tutorial-server-broadcast-with-signalr

狂奔之林
关注
使用SignalR 2进行服务器广播
爱上自己，勇往直前
01-02 344
概述 在本教程中，您将创建一个股票代码应用程序，该应用程序代表您希望定期“推送”或广播从服务器到所有连接客户端的通知的实时应用程序。在本教程的第一部分中，您将从头开始创建该应用程序的简化版本。在本教程的其余部分中，您将安装包含其他功能的NuGet包，并查看这些功能的代码。 您将在本教程的第一部分中构建的应用程序显示包含库存数据的网格。 服务器会定期随机更新股票价格并将更新推送到所有连接的客户...
SignalR实现服务器推送信息：广播与“组播”
热门推荐
kmguo的专栏
02-27 2万+
SignaR可以用来实现服务器向客户端推送信息，但是SignalR的每个Hub的生命周期很短，不能长期停留在内存里。因此，如果服务器想要对客户端推送消息时，应该采用signalR的一个“全局”的上下文来实现。此功能的应用背景是：服务器的数据发生了更新，它希望向所有的用户、某个分组的用户或者是单个用户发送推送消息，而不是由客户端发送请求来检测数据是否有更新。这才是真正的SignalR要做的事！
Signalr组播与广播例子
04-25
简单介绍signalr组播域广播的使用，其思想可以用来刷新会员登陆状态，站内信，聊天等等功能
SignalR的简单实现消息广播
audi_888888的博客
07-10 475
之前由于一个项目的需要（简单说一下，一个网页游戏，裁判的页面点击开始按钮，玩家便可以开始游戏），研究了很久，最终一个同事跟我推荐了SignalR。距离项目结束已经有一段时间了，再来回顾一下SignalR的简单实现吧。 1.什么 SignalR？ 　　ASP.NET SignalR 是为.NET 开发者提供即时通讯Web 应用的类库。即时通讯Web服务就是服务器将内容自动推送到已经连接...
SignalR通讯技术详解.pptx
03-25
4. 创建`Startup.cs`配置文件，配置SignalR路由和服务。 5. 定义一个名为`ChatHub`的Hub类，其中包含服务器向客户端发送消息的方法。 6. 在视图（如`Index.cshtml`）中，引入SignalR的JavaScript库，并设置与服务器...
【ASP.NET编程知识】ASP.NET MVC中SignalR的简单应用.docx
05-17
SignalR 自动处理连接管理，可以让服务端同时向所有连接的客户端广播消息，比如聊天室。也可以向特定的客户端发送消息。 SignalR 的主要特点是支持“服务器推送”功能，其中服务器代码可以使用远程过程调用（RPC）...
.net实现Signalr即时通讯Demo.rar
10-22
通过这个 Demo，开发者可以学习如何设置 SignalR 应用，如何在服务器端创建 Hub，如何在客户端调用 Hub 方法，以及如何处理实时通信的各个方面。这为构建实时 Web 应用提供了一个基础模板，帮助开发者快速上手 ...
.net Signalr(2.4.1) Dapper示例
08-27
SignalR 是一个用于在 Web 应用程序中实现服务器到客户端实时通信的库。它支持多种传输方式，包括长轮询、WebSocket、Server-Sent Events (SSE) 等，能够自动选择最适合当前环境的传输方式。在"抢单"功能中，SignalR...
SignalR实现小程序即时聊天 C# asp.net core
12-02
SignalR 是一个实时通信库，由微软开发，用于在ASP.NET Core应用程序中构建实时、双向通信的应用。这个框架简化了服务器向客户端推送内容的过程，使得开发者可以轻松地实现实时功能，如聊天应用、协作工具或者实时...
[渣译文] SignalR 2.0 系列：SignalR的服务器广播
weixin_34290000的博客
03-13 145
英文渣水平，大伙凑合着看吧…… 这是微软官方SignalR 2.0教程Getting Started with ASP.NET SignalR 2.0系列的翻译，这里是第八篇：SignalR的服务器广播 原文：Tutorial: Server Broadcast with SignalR 2.0 概述 VS可以通过 Microsoft.AspNet.SignalR.SampleNuGet...
第六章SignalR的服务器广播
hhhhbk的专栏
04-02 1167
第六章SignalR的服务器广播 1.概述：     VS可以通过 Microsoft.AspNet.SignalR.Sample NuGet包来安装一个简单的模拟股票行情应用。在本教程的第一部分，您将从头开始创建一个应用程序的简化版本。在本教程的剩余部分，您将安装NuGet包，审阅Sample中的一些附加功能。          在本模拟股票行情应用代表了实时应用中的“推” ，或称之为
SignalR 2.0 系列：SignalR的服务器广播
a732587507的博客
08-23 126
英文渣水平，大伙凑合着看吧…… 这是微软官方SignalR 2.0教程Getting Started with ASP.NET SignalR 2.0系列的翻译，这里是第八篇：SignalR的服务器广播 原文：Tutorial: Server Broadcast with SignalR 2.0 概述 VS可以通过Microsoft.AspNet.SignalR.Sample...
SignalR 教程二 服务端广播
weixin_34417200的博客
08-02 256
转帖官方教程：Tutorial: Server Broadcast with SignalR 2 http://www.asp.net/signalr/overview/getting-started/tutorial-server-broadcast-with-signalr This tutorial shows how to create a web application that use...
asp.net signalR的组播和广播
醉梦的我
04-25 2044
什么是signalR，看这里：signalR简介 组播和广播区别：简单的讲就是组播是对一组对象播，广播就是对所有对象播 该技术使用场景：在线聊天，站内信消息推送，无刷新实时动态 ，等等各种问题 抛开他们底层技术如何实现的不说，就我个人感觉，signalr的十分牛的地方在于，客户端可以调用服务器类中的函数（比如下面例子的Chathu类的方法），服务器类可以调用客户端定义的js函数（比如， 注册一个函数，chat.cl
SignalR系列教程：服务器广播与主动数据推送
weixin_30832351的博客
07-04 214
本篇是本系列入门篇的最后一遍,由于工作关系,接触SignalR的时间不是很多。等下次有空的话我会写一个利用“SignalR”开发一个在线聊天室的系列博文。近期的话我更偏向于更新框架设计相关的文章,到时候我会在文章中分享我在工作中开发的“日志框架”、“缓存框架”,“分布式下载框架”等。有兴趣的朋友可以关注我,一起交流。 本篇博文参考：https://www.asp.net/signalr/over...
vpn集中配置方法.docx
最新发布
09-17
cisco设备配置指导
ASP.NET Core SignalR 3.1 教程：服务端与客户端实战
“.NetCore SignalR 3.1 简单应用” 本文将详细介绍如何在.NET Core 3.1环境中使用SignalR构建一个简单的实时通信应用。SignalR是ASP.NET Core框架的一部分，专为实时Web功能而设计，使得服务器可以实时地向客户端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值