实现服务器端与客户端的高频实时通信 SignalR(2)

说明：本篇文章与上篇文章实现服务器端与客户端的实时通信 SignalR(1) 基本代码类似，只是做了些处理高频的改动。

一、本文出处：SignalR 实例介绍（建议看原著里面有DEMO下载）

二、这篇文章介绍如何利用 VS2012 创建一个简单的实时高频反馈系统，建好后的样子如下：拖动某个窗口的红色框，其余窗口的红色框跟着运动。

三、Demo 创建

　　1、新建项目以及新建完成后的目录结构如上篇文章所示（项目名称为 MoveShape）：

　　2、安装 SignalR 程序包，该包实现了服务端与客户端的通信。

　　　　与上篇的区别在于，此处需要另外安装 Jquery.UI 的程序包，运行命令：Install-Package jQuery.UI.Combined。

　　 3、添加类用于接收客户端的信息以及广播收到的信息，该类的名字命名为： MoveHub.cs，该类继承自 Hub 类，并在该类中添加如下代码：

namespace MoveShape

{

    [HubName("MoveHub")]

    public class MoveHub : Hub

    {

        [HubMethodName("UpdateOtherModel")]

        public void UpdateOtherModel(ServerModel clientModel)

        {

            clientModel.LastUpdatedBy = Context.ConnectionId;

            // 更新在Web端注册的站点 Model（去掉了当前的发送者）

            Clients.AllExcept(clientModel.LastUpdatedBy).updateShape(clientModel);

        }

    }

    public class ServerModel

    {

        //将传输的 Json 属性定义为与客户端一样的名字 left top

        [JsonProperty("left")]

        public double Left1 { get; set; }

        [JsonProperty("top")]

        public double Top2 { get; set; }

        // 拒绝客户端获得 LastUpdatedBy 属性

        [JsonIgnore]

        public string LastUpdatedBy { get; set; }

    }

}

　　4、添加启动类用于配置路由，该类的名字命名为：Startup.cs，与上篇文章代码一样。

　 5、添加HTML页面用于发送以及接受消息,该HTML页面的名字命名为：MoveShape.Html ，代码如下：

　　　HTML：

<div id="shape" ></div>

　　　　CSS：

 <style>

        #shape {

            width: 100px;

            height: 100px;

            background-color: #FF0000;

        }

    </style>

　　　 脚本：

<script src="Scripts/jquery-1.6.4.min.js"></script>

    <script src="Scripts/jquery-ui-1.11.4.min.js"></script>

    <script src="Scripts/jquery.signalR-2.2.0.min.js"></script>

    <script src="/signalr/hubs"></script>

    <script>

        $(function () {

            var moveShapeHub = $.connection.MoveHub;

            $shape = $("#shape");

            shapeModel = {

                left: 0,

                top: 0

            };

            moveShapeHub.client.updateShape = function (model) {

                shapeModel = model;

                $shape.css({ left: shapeModel.left, top: shapeModel.top });

            };

            $.connection.hub.start().done(function () {

                $shape.draggable({

                    drag: function () {

                        shapeModel = $shape.offset();

                        moveShapeHub.server.UpdateOtherModel(shapeModel);

                    }

                });

            });

        });

</script>

　　6、运行该HTML页面，复制到不同标签页，就可以实现拖动功能的互动。

　7、上面的操作与我们上一篇的发送以及接受机制完全一样，但是在拖动红色框的过程中，一直在向服务器发送信息，这样非常浪费资源，因此我们可以在客户端使用 setInterval 来控制发送的频率，改动JS脚本如下：

 <script>

        $(function () {

            var moveShapeHub = $.connection.MoveHub;

            $shape = $("#shape");

            shapeModel = {

                left: 0,

                top: 0

            };

            updateRate = 2000;

         moved = false;

            moveShapeHub.client.updateShape = function (model) {

                shapeModel = model;

                $shape.css({ left: shapeModel.left, top: shapeModel.top });

            };

            $.connection.hub.start().done(function () {

                $shape.draggable({

                    drag: function () {

                        shapeModel = $shape.offset();

                        //moveShapeHub.server.UpdateOtherModel(shapeModel);

                        moved = true;

                    }

                });

                setInterval(updateServerModel, updateRate);

            });

            function updateServerModel() {

                // Only update server if we have a new movement

                if (moved) {

                    moveShapeHub.server.UpdateOtherModel(shapeModel);

                    moved = false;

                }

            }

        });

巴特西

实现服务器端与客户端的高频实时通信 SignalR(2)

最新文章

热门文章