using System;

namespace Microsoft.AspNet.SignalR.StockTicker
{
    public class Stock
    {
        private decimal _price;

        public string Symbol { get; set; }

        public decimal DayOpen { get; private set; }

        public decimal DayLow { get; private set; }

        public decimal DayHigh { get; private set; }

        public decimal LastChange { get; private set; }

        public decimal Price
        {
            get
            {
                return _price;
            }
            set
            {
                if (_price == value)
                {
                    return;
                }

                LastChange = value - _price;
                _price = value;

                if (DayOpen == 0)
                {
                    DayOpen = _price;
                }
                if (_price < DayLow || DayLow == 0)
                {
                    DayLow = _price;
                }
                if (_price > DayHigh)
                {
                    DayHigh = _price;
                }
            }
        }

        public decimal Change
        {
            get
            {
                return Price - DayOpen;
            }
        }

        public double PercentChange
        {
            get
            {
                return (double)Math.Round(Change / Price, 4);
            }
        }
    }
}

using Microsoft.AspNet.SignalR.Hubs;
using System.Collections.Generic;

namespace Microsoft.AspNet.SignalR.StockTicker
{
    [HubName("stockTicker")]
    public class StockTickerHub : Hub
    {
        private readonly StockTicker _stockTicker;

        public StockTickerHub()

            : this(StockTicker.Instance)
        {
        }

        public StockTickerHub(StockTicker stockTicker)
        {
            _stockTicker = stockTicker;
        }

        public IEnumerable GetAllStocks()
        {
            return _stockTicker.GetAllStocks();
        }

    }
}

using Microsoft.AspNet.SignalR.Hubs;
using System;
using System.Collections.Concurrent;
using System.Collections.Generic;
using System.Threading;

namespace Microsoft.AspNet.SignalR.StockTicker
{
    public class StockTicker
    {
        #region 字段

        // 初始化StockTicker為單例實(shí)例
        private readonly static Lazy _instance = new Lazy(() => new StockTicker(  GlobalHost.ConnectionManager.GetHubContext<StockTickerHub>().Clients) );
         //在創(chuàng)建StockTicker類靜態(tài)實(shí)例的時(shí)候，把SignalR的Context引用通過(guò)構(gòu)造函數(shù)傳遞給Clients這個(gè)屬性。
         //在這里只需要獲取一次SignalR.Context，這樣做有2個(gè)好處，首先是因?yàn)楂@取SignalR.Context很耗費(fèi)資源，其次是獲取一次SignalR.Context可以保留消息發(fā)送到客戶端的預(yù)定義順序。

        private readonly object _marketStateLock = new object();
        private readonly object _updateStockPricesLock = new object();

        //為了線程安全，我們使用了ConcurrentDictionary來(lái)存放股票數(shù)據(jù)，當(dāng)然你也可以使用Dictionary對(duì)象來(lái)進(jìn)行存儲(chǔ)，但是在更新數(shù)據(jù)之前需要進(jìn)行鎖定。
        private readonly ConcurrentDictionary<string, Stock> _stocks = new ConcurrentDictionary<string, Stock>();

        // 控制股票價(jià)格波動(dòng)的百分比
        private readonly double _rangePercent = 0.002;

        private readonly TimeSpan _updateInterval = TimeSpan.FromMilliseconds(250);
        private readonly Random _updateOrNotRandom = new Random();

        private Timer _timer;

        //使用volatile修飾符來(lái)標(biāo)記_updatingStockPrices變量，該修飾符指示一個(gè)字段可以由多個(gè)同時(shí)執(zhí)行的線程修改，聲明為volatile的字段不受編譯器優(yōu)化（假定由單個(gè)線程訪問(wèn)）的限制，這樣可以確保該字段在任何時(shí)間呈現(xiàn)的都是最新的值。
        //該修飾符通常用于由多個(gè)線程訪問(wèn)但不使用lock語(yǔ)句對(duì)訪問(wèn)進(jìn)行序列化的字段。
        private volatile bool _updatingStockPrices;

        #endregion 字段

        #region 構(gòu)造函數(shù)

        private StockTicker(IHubConnectionContext<dynamic> clients)
        {
            Clients = clients;

            _stocks.Clear();

            var stocks = new List
            {
                new Stock { Symbol = "MSFT", Price = 41.68m },
                new Stock { Symbol = "AAPL", Price = 92.08m },
                new Stock { Symbol = "GOOG", Price = 543.01m }
            };

            stocks.ForEach(stock => _stocks.TryAdd(stock.Symbol, stock));

            _timer = new Timer(UpdateStockPrices, null, _updateInterval, _updateInterval);//定時(shí)更新股價(jià)
        }

        #endregion 構(gòu)造函數(shù)

        #region 屬性

        private IHubConnectionContext<dynamic> Clients { get; set; } //使用Clients屬性，可以使您和在Hub類中一樣，通過(guò)它來(lái)調(diào)用客戶端的方法。

        public static StockTicker Instance
        {
            get
            {
                return _instance.Value;
            }
        }

        #endregion 屬性

        #region 方法

        //獲取所有股價(jià)
        public IEnumerable GetAllStocks()
        {
            return _stocks.Values;
        }

        //在更新之前，我們使用了_updateStockPricesLock對(duì)象將需要更新的部份進(jìn)行鎖定，并通過(guò)_updatingStockPrices變量來(lái)確定是否有其它線程已經(jīng)更新了股票的價(jià)格。
        //然后通過(guò)對(duì)每一個(gè)股票代碼執(zhí)行TryUpdateStockPrice方法來(lái)確定是否更新股票價(jià)格以及股票價(jià)格的波動(dòng)幅度。如果檢測(cè)到股票價(jià)格變動(dòng)，將會(huì)通過(guò)BroadcastStockPrice方法將最新的股票價(jià)格推送給每一個(gè)連接的客戶端。
        private void UpdateStockPrices(object state)
        {
            // 此函數(shù)必須可重入re-entrant，因?yàn)樗亲鳛橛?jì)時(shí)器間隔處理程序運(yùn)行的。
            lock (_updateStockPricesLock)
            {
                if (!_updatingStockPrices)
                {
                    _updatingStockPrices = true;

                    foreach (var stock in _stocks.Values)
                    {
                        if (TryUpdateStockPrice(stock))
                        {
                            BroadcastStockPrice(stock);
                        }
                    }

                    _updatingStockPrices = false;
                }
            }
        }

        private bool TryUpdateStockPrice(Stock stock)
        {
            // 隨機(jī)選擇是否更新該股票
            var r = _updateOrNotRandom.NextDouble();
            if (r > 0.1)
            {
                return false;
            }

            // 以范圍百分比的隨機(jī)因子更新股票價(jià)格
            var random = new Random((int)Math.Floor(stock.Price));
            var percentChange = random.NextDouble() * _rangePercent;
            var pos = random.NextDouble() > 0.51;
            var change = Math.Round(stock.Price * (decimal)percentChange, 2);
            change = pos ? change : -change;

            stock.Price += change;
            return true;
        }

        private void BroadcastStockPrice(Stock stock)
        {
            Clients.All.updateStockPrice(stock); //Clients.All是dynamic類型的,意味著發(fā)送給所有的客戶端，同時(shí)SignalR還提供了用來(lái)指定具體的客戶端或組的屬性，具體信息可以參考HubConnectionContext。
        }

        #endregion 方法
    }
}

using Owin;

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ASP.NET SignalR Stock Ticker</title>
    <link href="StockTicker.css" rel="external nofollow"  rel="stylesheet" />
</head>
<body>
    <h1>ASP.NET SignalR Stock Ticker Sample</h1>


    <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>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="jquery.color-2.1.2.min.js"></script>
    <script src="../Scripts/jquery.signalR-2.4.1.js"></script>
    <script src="../signalr/hubs"></script>
    <script src="SignalR.StockTicker.js"></script>
</body>
</html>

// Crockford's supplant method (poor man's templating)自定義的模板方法
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;
            }
        );
    };
}

// A simple background color flash effect that uses jQuery Color plugin
jQuery.fn.flash = function (color, duration) {
    var current = this.css('backgroundColor');
    this.animate({ backgroundColor: 'rgb(' + color + ')' }, duration / 2)
        .animate({ backgroundColor: current }, duration / 2);
};

$(function () {

    var ticker = $.connection.stockTicker, //$.connection即是指SignalR代理，這行代碼表示將StockTickerHub類的代理的引用保存在變量ticker中，代理的名稱即為服務(wù)器端通過(guò)[HubName]屬性設(shè)置的名稱。
        up = '▲',
        down = '▼',
        $stockTable = $('#stockTable'),
        $stockTableBody = $stockTable.find('tbody'),
        rowTemplate = '{Symbol}{Price}{DayOpen}{DayHigh}{DayLow}{Direction} {Change}{PercentChange}',
        $stockTicker = $('#stockTicker'),
        $stockTickerUl = $stockTicker.find('ul'),
        liTemplate = '
{Symbol} {Price} {Direction} {Change} ({PercentChange})
';

    function formatStock(stock) {
        return $.extend(stock, {
            Price: stock.Price.toFixed(2),
            PercentChange: (stock.PercentChange * 100).toFixed(2) + '%',
            Direction: stock.Change === 0 ? '' : stock.Change >= 0 ? up : down,
            DirectionClass: stock.Change === 0 ? 'even' : stock.Change >= 0 ? 'up' : 'down'
        });
    }

    function scrollTicker() {
        var w = $stockTickerUl.width();
        $stockTickerUl.css({ marginLeft: w });
        $stockTickerUl.animate({ marginLeft: -w }, 15000, 'linear', scrollTicker);
    }

    function stopTicker() {
        $stockTickerUl.stop();
    }

    //init方法調(diào)用服務(wù)端的getAllStocks方法，并將返回的數(shù)據(jù)顯示在Table中。服務(wù)端我們默認(rèn)會(huì)使用帕斯卡命名法，而SignalR會(huì)在生成客戶端的代理類時(shí)，自動(dòng)將服務(wù)端的方法改成駱駝命名法，不過(guò)該規(guī)則只對(duì)方法名及Hub名稱有效。
    //而對(duì)于對(duì)象的屬性名，則仍然和服務(wù)器端的一樣，比如stock.Symbol、stock.Price，而不是stock.symbol、stock.price。
    //如果你想在客戶端使用與服務(wù)器商相同的名稱（包括大小寫(xiě)），或者想自己定義其它的名稱，那么你可以通過(guò)給Hub方法加上HubMethodName標(biāo)簽來(lái)實(shí)現(xiàn)這個(gè)功能，而HubName標(biāo)簽則可以實(shí)現(xiàn)自定義的Hub名稱。
    function init() {
        return ticker.server.getAllStocks().done(function (stocks) {
            $stockTableBody.empty();
            $stockTickerUl.empty();
            //遍歷服務(wù)端返回的股票數(shù)據(jù)，然后通過(guò)調(diào)用formatStock來(lái)格式化成我們想要的格式，接著通過(guò)supplant方法（在StockTicker.js的最頂端）來(lái)生成一條新行，并把這個(gè)新行插入到表格里面。
            $.each(stocks, function () {
                var stock = formatStock(this);
                $stockTableBody.append(rowTemplate.supplant(stock));                 
                $stockTickerUl.append(liTemplate.supplant(stock));
            });
        });
    }

    //為了讓服務(wù)器能夠調(diào)用客戶的代碼，我們需要把updateStockPrice添加到stockTicker代理的client對(duì)象中
    $.extend(ticker.client, {
        updateStockPrice: function (stock) {
            var displayStock = formatStock(stock),
                $row = $(rowTemplate.supplant(displayStock)),
                $li = $(liTemplate.supplant(displayStock)),
                bg = stock.LastChange < 0
                        ? '255,148,148' // red
                        : '154,240,117'; // green
            //該updateStockPrice方法和init方法一樣，通過(guò)調(diào)用formatStock來(lái)格式化成我們想要的格式，接著通過(guò)supplant方法（在StockTicker.js的最頂端）來(lái)生成一條新行，不過(guò)它并不是將該新行追加到Table中，而是找到Table中現(xiàn)有的行，然后使用新行替換它。
            $stockTableBody.find('tr[data-symbol=' + stock.Symbol + ']')
                .replaceWith($row);
            $stockTickerUl.find('li[data-symbol=' + stock.Symbol + ']')
                .replaceWith($li);

            $row.flash(bg, 1000);
            $li.flash(bg, 1000);
            scrollTicker();
        }
    });

    // 客戶端的代碼編寫(xiě)好之后，就可以通過(guò)最后的這行代碼來(lái)與服務(wù)器建立連接，由于這個(gè)start方法執(zhí)行的是異步操作，并會(huì)返回一個(gè)jQuery延時(shí)對(duì)象，所以我們要使用jQuery.done函數(shù)來(lái)處理連接成功之后的操作。
    //這個(gè)init方法其實(shí)是在start方法完成異步操作后作為回調(diào)函數(shù)執(zhí)行的，如果你把init作為一個(gè)獨(dú)立的JavaScript語(yǔ)句放在start方法之后的話，那么程序?qū)?huì)出錯(cuò)，因?yàn)檫@樣會(huì)導(dǎo)致服務(wù)端的方法在客戶端還沒(méi)有與服務(wù)器建立連接之前就被調(diào)用。
    $.connection.hub.start().done(init);

});

// Start the connection
$.connection.hub.logging = true;
$.connection.hub.start().done(init);