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

最新推荐文章于 2024-08-16 09:43:46 发布

feng1456

最新推荐文章于 2024-08-16 09:43:46 发布

阅读量1.1k

点赞数

分类专栏： ASP.NET MVC 文章标签： signalR 即时通讯

本文链接：https://blog.csdn.net/afandaafandaafanda/article/details/46389927

版权

ASP.NET MVC 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

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包即可。