SignalR+Asp.net高频率实时消息传递应用

1.概述:

使用 ASP.NET 和SignalR 2高频率的实时消息功能。高频率消息在这种情况下就意味着更新发送以固定的速率;

本教程中创建的应用程序显示一个用户可以拖动的形状。在所有其他连接浏览器形状的位置然后将更新以匹配拖动形状使用定时的更新的位置。在拖动过程中是一个高频率的实时消息传递。

最后Demo的效果如下:

2.实现:

1>.在 Visual Studio 中创建一个 4.5框架的ASP.NET Web 应用程序。

2>.在新的 ASP.NET 项目窗口中,保留空选定,然后单击创建项目。

3>.在解决方案资源管理器中,右键单击项目,选择添加|那么 SignalR 集线器类 (v2).

也可以向项目添加那么 SignalR 通过单击工具 |库包管理器 |程序包管理器控制台和运行命令.

install-package Microsoft.AspNet.SignalR.
4>.单击工具|库包管理器 |程序包管理器控制台。在软件包管理器窗口中,运行以下命令 :

Install-Package jQuery.UI.Combined
这将安装 jQuery UI 库,您将使用对形状进行动画处理。

5>.安装完成之后查看解决方法:多出了Scripts和Content,表面安装成功。

6>.添加MoveShapeHub类:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Newtonsoft.Json;

namespace MoveShapeDemo
{
    public class MoveShapeHub : Hub
    {
        public void UpdateModel(ShapeModel clientModel)
        {
            clientModel.LastUpdatedBy = Context.ConnectionId;
            //更新位置
            Clients.AllExcept(clientModel.LastUpdatedBy).updateShape(clientModel);
        }
    }
    /// <summary>
    /// 同步客户端和服务器模型
    /// </summary>
    public class ShapeModel
    {
        //给客户端返回left属性
        [JsonProperty("left")]
        public double Left { get; set; }

        //给客户端返回top属性
        [JsonProperty("top")]
        public double Top { get; set; }

        //不给客户端返回LastUpdatedBy属性
        [JsonIgnore]
        public string LastUpdatedBy { get; set; }
    }
}

7>.添加Startup类。

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(MoveShapeDemo.Startup))]
namespace MoveShapeDemo
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            //任何连接或集线器连接和配置会去这里
            app.MapSignalR();
        }
    }
}

8.>添加客户端:

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>SignalR MoveShape Demo</title>
 6 </head>
 7 <body>
 8     <script src="Scripts/jquery-1.6.4.min.js"></script>
 9     <script src="Scripts/jquery-ui-1.11.4.min.js"></script>
10     <script src="Scripts/jquery.signalR-2.2.0.js"></script>
11     <script src="/signalr/hubs"></script>
12     <script>
13         $(function () {
14             ///--鸣人
15             var moveShapeHub = $.connection.moveShapeHub,//MoveShapeHub.cs 此处开头字母要小写
16             $shape = $("#shape"), //移动对象
17
18             messageFrequency = 10,
19             updateRate = 1000 / messageFrequency,
20
21             shapeModel = {        //移动坐标
22                 left: 0,
23                 top: 0
24             };
25
26             moved = false;
27
28             //接收服务器的脚步信息
29             moveShapeHub.client.updateShape = function (model) {
30                 shapeModel = model;
31                 //改变位置
32                 $shape.css({ left: model.left, top: model.top });
33                 //$shape.animate(shapeModel, { duration: updateRate, queue: false });
34             };
35             //开启
36             $.connection.hub.start().done(function () {
37                 $shape.draggable({
38                     drag: function () {
39                         shapeModel = $shape.offset();
40                         moveShapeHub.server.updateModel(shapeModel);
41                     }
42                 });
43                 setInterval(updateServerModel, updateRate);
44             });
45
46             function updateServerModel() {
47                 //如果我们有一个新的移动只更新服务器
48                 if (moved) {
49                     moveShapeHub.server.updateModel(shapeModel);
50                     moved = false;
51                 }
52             }
53         });
54     </script>
55     <div id="shape"><img src="userimg.jpg" style="width:100px;height:200px;" /></div>
56 </body>
57 </html>

按 f5 键启动该应用程序。复制的页的 URL,并将其粘贴到另一个浏览器窗口。

将形状拖在一个浏览器窗口;另一个浏览器窗口中的形状应移动。在另一个窗口形状的运动不生涩,很平滑。

时间: 2024-10-10 03:54:11

SignalR+Asp.net高频率实时消息传递应用的相关文章

ASP.NET Core的实时库: SignalR -- 预备知识

大纲 本系列会分为2-3篇文章. 第一篇介绍SignalR的预备知识和原理 然后会介绍SignalR和如何在ASP.NET Core里使用SignalR. 本文的目录如下: 实时Web简述 Long Polling SSE (Server Sent Events) Websocket 实时Web简述 大家都见过和用过实时Web, 例如网页版的即时通讯工具, 网页直播, 网页游戏, 还有股票仪表板等等. 传统的Web应用是这样工作的: 浏览器发送HTTP请求到ASP.NET Core Web服务器

Asp.net+WebSocket+Emgucv实时人脸识别

上个月在网上看到一个用web实现简单AR效果的文章,然后自己一路折腾,最后折腾出来一个 Asp.net+WebSocket+Emgucv实时人脸识别的东西,网上也有不少相关资料,有用winform的也有asp.net的.其实人脸识别技术早就成熟了,就是没机会接触这方面.百度了一下 找到好多,JqueryFaceDetection,face++,face core,opencv,emgucv等等,这些我都折腾了一遍,并不能很好的满足我的需求,我就是想像手机QQ里边的拍照的时候能识别到人脸并且对图像

防止黑客远程高频率请求网站解决方案

最近给学校做了一个最美系部投票网站,不少人想通过sql注入漏洞攻击网站,我也是被逼无赖好好的和这些人战斗了2天. 一开始他们应该使用了一些工具不断的去检测我的sql注入点,这是我第二次正式做这种大型的投票系统,本来我已近很注意了没有留下注入点. 只是在查询语句中是使用的 sql字符串拼凑,我想查询语句应该不能做什么吧.后来发现他们不断的对拼凑的地方进行攻击,于是我就好好的想了想 也在网站上找了许多资料,发现只要是有sql拼凑的地方就有可能注入漏洞. -- 比如一个: SELECT * FORM

Asp.Net 高清图片缩略图生成

生成缩略图核心代码: /// <summary> /// 图片上传 生成缩略图 /// </summary> /// <param name="files">文件上传控件</param> /// <param name="path">文件夹名称</param> /// <param name="fname">文件名称</param> /// <p

bilibili高并发实时弹幕系统的实战之路

高并发实时弹幕是一种互动的体验.对于互动来说,考虑最多的地方就是:高稳定性.高可用性以及低延迟这三个方面. 高稳定性,为了保证互动的实时性,所以要求连接状态稳定: 高可用性,相当于提供一种备用方案,比如,互动时如果一台机器挂了,此时必须保证可以和另外一台机器连接,这样就从侧面解决了,用户连接不中断的问题: 低延迟,弹幕的延迟周期控制在1秒以内,响应是比较快的,所以可以满足互动的需求. B站直播弹幕服务架构(下面简称GOIM)的出现就是为了解决这一系列的需求.下面将对此进行详细的介绍. B站直播弹

高并发实时直播弹幕研发实践

高并发实时直播弹幕研发实践 直播间特点 聊天室限制人数的原因 应对万级以上的实时互动 跨服务器是为了解决单一服务器接入数量限制.发布消息吞吐限制等问题: 多进程并发则是为了充分利用多核CPU以及减小一个循环规模从而达到降低延迟的目的. 云巴实时系统的设计 云巴是基于MQTT协议实现的实时通信系统,采用Erlang/OTP的架构设计.简单地来说,云巴实时系统的设计包括多层结构.微服务两个要点. 多层结构 云巴系统设计中,多层结构意味着一个基本业务逻辑的完成需要经历多个模块(如图上所示). 云巴多层

.net环境下跨进程、高频率读写数据

原文:.net环境下跨进程.高频率读写数据 一.需求背景 1.最近项目要求高频次地读写数据,数据量也不是很大,多表总共加起来在百万条上下. 单表最大的也在25万左右,历史数据表因为不涉及所以不用考虑, 难点在于这个规模的热点数据,变化非常频繁. 数据来源于一些检测设备的采集数据,一些大表,有可能在极短时间内(如几秒钟)可能大部分都会变化, 而且主程序也有一些后台服务需要不断轮询.读写某种类型的设备,所以要求信息交互时间尽可能短. 2.之前的解决方案是把所有热点数据,统一加载到共享内存里边,到也能

高并发实时弹幕系统 并发数一定是可以进行控制的 每个需要异步处理开启的 Goroutine(Go 协程)都必须预先创建好固定的个数,如果不提前进行控制,那么 Goroutine 就随时存在爆发的可能。

小结: 1.内存优化1.一个消息一定只有一块内存使用 Job 聚合消息,Comet 指针引用. 2.一个用户的内存尽量放到栈上内存创建在对应的用户 Goroutine(Go 程)中. 3.内存由自己控制主要是针对 Comet 模块所做的优化,可以查看模块中各个分配内存的地方,使用内存池. 2.模块优化1.消息分发一定是并行的并且互不干扰要保证到每一个 Comet 的通讯通道必须是相互独立的,保证消息分发必须是完全并列的,并且彼此之间互不干扰. 2.并发数一定是可以进行控制的每个需要异步处理开启的

由电能高频率变化使物质发生衰变的机器

[url]:-|^|-::-|^|-:[/url] 由电能高频率变化使物质发生衰变的机器技术领域 [url]:-|^|-::-|^|-:[/url] 功能描述,该机器可以成功的使正常物质发生自发衰变,使质子,中子衰变成自旋为其他类型的夸克,背景技术 [url]:-|^|-::-|^|-:[/url] 产品描述,本设计公开了一种由电能高频率变化使物质发生衰变的机器.发明内容它包括以下几部分:1.核反应堆.它通过U235裂变产生的能量加热水堆,带动蒸汽轮机转动.2.高压发电机.它由核反应堆的蒸汽轮机