使用SignalR开发一个数据广播的应用程序

来源：互联网发布：淘宝客基础api 编辑：程序博客网时间：2024/05/30 04:37

ASP.NET SignalR 是实时应用（RealTime Application）的具体技术。蒋金楠说学习一个技术之前，最好思考一下为什么这个技术会出现。我个人觉得现在互联网盛行，很多的互联网应用对实时性要求很高，比如股票交易，秒杀、限时抢购等等，都需要实时的网络技术的支持。这些技术的基础其实还是TCP/IP协议，由于TCP/IP协议是无状态的协议，所以就需要使用一种长轮询的机制来处理请求。

ASP.NET 提供了这样一套框架，使得我们开发实时应用程序非常方便。我们现在有一个应用场景是我们在某个数据列表里面添加一条数据之后，我们希望把这个事件及事件的参数传播到所有客户端。具体情形如下：

左边是客户端1，右边是客户端2，点击add按钮之后，我们的其他所有客户端都可以增加一条数据。

具体做法如下：

1）前端页面

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>MySignalR Chart Demo</title>    <style type="text/css">        .container {            background-color: #99CCFF;            border: thick solid #808080;            padding: 20px;            margin: 20px;        }        #shape {            width: 100px;            height: 100px;            background-color: #FF0000;        }    </style>    <script src="Scripts/jquery-1.6.4.min.js"></script>    <script src="Scripts/jquery.signalR-2.0.0.min.js"></script>    <script src="/signalr/hubs"></script>    <script src="Scripts/knockout-3.3.0.js"></script>    <link href="CSS/bootstrap.css" rel="stylesheet" />    <link href="CSS/bootstrap.min.css" rel="stylesheet" />    <script src="Scripts/jquery-ui-1.10.3.min.js"></script>    <script type="text/javascript">        $(document).ready(function () {            var mychart = $.connection.myChartHub;                        mychart.client.broadcastMessage = function (name, message) {                /*                var encodedName = $('<div />').text(name).html();                var encodedMsg = $('<div />').text(message).html();                // Add the message to the page.                $('#discussion').append('<li><strong>' + encodedName                    + '</strong>:  ' + encodedMsg + '</li>');                */                if (name == "data") {                    options.records.push($.parseJSON(message));                    viewModelInstance.records(options.records);                } else {                    var encodedName = $('<div />').text(name).html();                    var encodedMsg = $('<div />').text(message).html();                    // Add the message to the page.                    $('#discussion').append('<li><strong>' + encodedName                        + '</strong>:  ' + encodedMsg + '</li>');                }            }            //$('#displayname').val(prompt('Enter your name:', ''));            // Set initial focus to message input box.            //$('#message').focus();            $.connection.hub.start().done(function () {                                $('#sendmessage').click(function() {                    console.log(mychart);                    // Call the Send method on the hub.                    //chat.server.send($('#displayname').val(), $('#message').val());                    mychart.server.sendMessage($('#displayname').val(), $('#message').val());                    // Clear text box and reset focus for next comment.                    $('#message').val('').focus();                });                                $("#btnAdd").bind("click", function () {                    var item = {                        Id: index+1,                        RequestType: "ResourceRequest",                        RequestName: "VirtualMachine"                    };                    //options.records.unshift(item);                    //viewModelInstance.records(options.records);                    index++;                                        mychart.server.sendMessage("data", JSON.stringify(item));                });            });            var index = 1;            var options = {                records: [                    {                        Id: "1",                        RequestType: "BaseType",                        RequestName: "BaseName"                    }                ]            };            function viewModel(o) {                this.records = ko.observableArray(o.records);            };            var viewModelInstance = new viewModel(options);            ko.applyBindings(viewModelInstance);        });    </script></head>    <body>    <!--    <div class="container">        <h2>Chat</h2>        <input type="text" id="message" />        <input type="button" id="sendmessage" value="Send" />        <input type="hidden" id="displayname" />        <ul id="discussion"></ul>    </div>    -->        <div class="container">            <h2>Data Broadcast</h2>            <table border="1px" class="table-bordered">                <thead>                    <tr>                        <th><a>Id</a></th>                        <th><a>RequestType</a></th>                        <th><a>RequestName</a></th>                    </tr>                </thead>                <tbody data-bind="foreach: records">                    <tr>                        <td data-bind="text: Id"></td>                        <td data-bind="text: RequestType"></td>                        <td data-bind="text: RequestName"></td>                    </tr>                </tbody>            </table>            <br />            <input id="btnAdd" type="button" value="add" />        </div></body></html>

2.后端代码

using System;using System.Collections.Generic;using System.Linq;using System.Web;using Microsoft.AspNet.SignalR;namespace MySignalRChart{    public class MyChartHub:Hub    {        public void SendMessage(string key, string value)        {            Clients.All.broadcastMessage(key, value);        }    }}

注意:使用NuGet获取SignalR相关JAR包即可。

源代码下载地址：http://download.csdn.net/detail/afandaafandaafanda/8833381

0 0