An Example of SignalR

SignalR can keep communication with the client and Server on real time. It`s a very wonderful independent tool for MVC development.

Here I just finished an example by myself . And try to deepen my understanding in it.

SignalR was supported by the windows server 2012 that under the IIS 8 and .NET Framework4.5 environment. In the backaround, it`s

support the WebSocket.

At first, just try to add the package by Nuget

1. Microsoft.AspNet.SignalR

2.Microsoft.AspNet.SignalR.Client

@{
    ViewBag.Title = "Home Page";
}

<!-- 自動生成されたサンプルのHTMLは、すべてコメントアウト
<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>
-->

<!-- 以下のコードを追加 -->
<br />

<div class="row">
    <div class="col-md-2">
        <input type="button" onclick="StartInvoicing()" value="SignalRテスト" />
    </div>

    <div class="col-md-7">
        <div class="progress">
            <div class="progress-bar" id="progressBar" role="progressbar" style="width: 0%;">
            </div>
        </div>
    </div>

    <div class="col-md-1">
        <label id="progressNum">進捗率</label>
    </div>
</div>

<div>
    <label id="message"></label>
</div>

<script type="text/javascript">
function StartInvoicing()
{
    var progressNotifier = $.connection.progress;

    // サーバー側からのメッセージを受信する部分
    progressNotifier.client.sendMessage = function (message, count) {
        UpdateProgress(message, count);
    };

    // サーバー側にメッセージを送る部分
    $.connection.hub.start().done(function () {
        progressNotifier.server.getCountAndMessage("Hello");
    });
}

function UpdateProgress(message, count) {
    $("#progressNum").html(count + ‘%‘);
    $("#progressBar").css({ ‘width‘: count + ‘%‘ });

    $("#message").html(message);
}
</script>

3. in view file support the last request as the source attacker.

You‘d better bring the java script to your html file.

pasting

<!-- 以下のコードを追加 -->
<br />

<div class="row">
    <div class="col-md-2">
        <input type="button" onclick="StartInvoicing()" value="SignalRテスト" />
    </div>

    <div class="col-md-7">
        <div class="progress">
            <div class="progress-bar" id="progressBar" role="progressbar" style="width: 0%;">
            </div>
        </div>
    </div>

    <div class="col-md-1">
        <label id="progressNum">進捗率</label>
    </div>
</div>

<div>
    <label id="message"></label>
</div>

<script type="text/javascript">
function StartInvoicing()
{
    var progressNotifier = $.connection.progress;

    // サーバー側からのメッセージを受信する部分
    progressNotifier.client.sendMessage = function (message, count) {
        UpdateProgress(message, count);
    };

    // サーバー側にメッセージを送る部分
    $.connection.hub.start().done(function () {
        progressNotifier.server.getCountAndMessage("Hello");
    });
}

function UpdateProgress(message, count) {
    $("#progressNum").html(count + ‘%‘);
    $("#progressBar").css({ ‘width‘: count + ‘%‘ });

    $("#message").html(message);
}
</script>

4,   And a ProgressHub.cs as the following

pasting

using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using System.Threading.Tasks;
using System.Threading;

namespace WebApplication1
{
    [HubName("progress")]
    public class ProgressHub : Hub
    {
        public int count = 1;

        public static void SendMessage(string msg, int count)
        {
            var hubContext = GlobalHost.ConnectionManager.GetHubContext<ProgressHub>();
            hubContext.Clients.All.sendMessage(string.Format(msg), count);
        }

        public void GetCountAndMessage(string msg)
        {
            ProgressStart();
            Clients.Caller.sendMessage(string.Format(msg), count);
        }

        private void ProgressStart()
        {
            Task.Run(() => {
                for (int i=1; i<=100; i++)
                {
                    Thread.Sleep(500);
                    SendMessage("処理中...", i);
                }
            });
        }
    }
}

5. Edit the Startup.cs file.

pasting

namespace WebApplication1
{
    public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            ConfigureAuth(app);
            app.MapSignalR(); // ← この行を追加
        }
    }
}

References

https://github.com/SignalR/SignalR/tree/dev/src/Microsoft.AspNet.SignalR.Client.Portable

时间: 2024-11-09 00:13:03

An Example of SignalR的相关文章

使用SignalR实现消息提醒

Asp.net SignalR是微软为实现实时通信的一个类库.一般情况下,SignalR会使用JavaScript的长轮询(long polling)的方式来实现客户端和服务器通信,随着Html5中WebSockets出现,SignalR也支持WebSockets通信.另外SignalR开发的程序不仅仅限制于宿主在IIS中,也可以宿主在任何应用程序,包括控制台,客户端程序和Windows服务等,另外还支持Mono,这意味着它可以实现跨平台部署在Linux环境下. SignalR内部有两类对象:

【SignalR学习系列】2. 第一个SignalR程序

新建项目 1.使用VisualStudio 2015 新建一个Web项目 2.选择空模板 3.添加一个新的SignalR Hub Class (v2)类文件,并修改类名为ChatHub 4.修改ChatHub代码 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Microsoft.AspNet.SignalR; namespace SignalRDemo { pu

Asp.Net SignalR 多平台的Client与Server

多平台 SignalR在.Net的大环境下都可以做到即时通讯,也就是说都可以使用,客户端也不仅是js.下面就来一个控制台的Client 我们需要在nuget上下载包 Microsoft.AspNet.SignalR.Client 有了它,我就可以进行开发了 下面创建一个Hub集线器的连接,地址填的之前的集线器server,可以看到使用与js的语法类似.客户端的服务是用on而执行服务器的方法副作用Invoke static void Main(string[] args) { var hub =

SignalR——聊天室的实现

秒懂——SignalR ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指这样一种功能:当所连接的客户端变得可用时服务器代码可以立即向其推送内容,而不是让服务器等待客户端请求新的数据. 具体Demo参考:http://pan.baidu.com/s/1jH8LLie

ASP.NET SignalR入门

前言 之前在培训ASP.NET WebAPI的时候有提过SignalR这个技术,但当时只是讲了是用来做什么的,并没有多说.因为自己也是画图找资料的时候见到的.后来当一直关注的前端大神贤心发布LayIM2.0之后,于是对Web聊天产生了兴趣.那么在.NET平台下的Web聊天有哪些呢?查找资料发现了ASP.NET SignalR.于是乎...So...Just do it! 简介 按照惯例,先介绍一下什么是SignalR.简单的说,ASP .NET SignalR 是一个ASP .NET 下的类库,

AngularJS+ASP.NET MVC+SignalR实现消息推送

原文:http://www.mincoder.com/article/4565.shtml 背景 OA管理系统中,员工提交申请单,消息实时通知到相关人员及时进行审批,审批之后将结果推送给用户. 技术选择 最开始发现的是firebase,于是很兴奋的开始倒腾起来.firebase用 起来倒是简单:引用一个js即可,按官网上的教程很快便应用到了项目中.第二天打开项目发现推送功能不好使了,这是为何?最后发现firebase官网打 不开了...难道firebase被google收了也会被天朝给墙掉?也许

Asp.net SignalR 实现服务端消息推送到Web端

原文:http://www.cnblogs.com/wintersun/p/4148223.html 之前的文章介绍过Asp.net SignalR,  ASP .NET SignalR是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.  今天我们来实现服务端消息推送到Web端,   首先回顾一下它抽象层次图是这样的: 实际上 Asp.net SignalR 2 实现 服务端消息推送到Web端, 更加简单. 为了获取更好的可伸缩性, 我们引入消息队列, 看如下

ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(一) 之 基层数据搭建,让数据活起来(数据获取)

大家好,本篇是接上一篇 ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(零) 前言  ASP.NET SignalR WebIM系列第二篇.本篇会带领大家将 LayIM界面中的数据动态化.当然还不涉及即时消息通讯,如果你已经搞定了数据界面,那么本文您可以简单的看一下,或者略过. 进入正题,layim帮我们定义好了数据规则,我们只要写一个接口实现那个json规范就可以了,剩下的事情就交给layim去做,看一下json格式.(对应文件夹:demo/json/getLi

【使用SignalR+Asp.net创建实时聊天应用程序】

一.概述: 使用 ASP.NET 那么 SignalR 2 创建一个实时聊天应用程序.将 SignalR 添加 MVC 5 应用程序中,并创建聊天视图发送并显示消息. 在Demo中,将学习SignalR 开发任务包括 ︰ 向 MVC 5 应用程序添加那么 SignalR 图书馆. 创建集线器和浩然启动类,以将内容推送到客户端. 使用 web 页中的那么 SignalR jQuery 库发送邮件并显示更新从集线器. 下面的屏幕快照显示在浏览器中运行的已完成的聊天应用程序. 2.实现: 创建一个 A

[Asp.net 开发系列之SignalR篇]专题三:使用SignalR实现聊天室的功能

一.引言 在前一篇文章中,我向大家介绍了如何实现实现端对端聊天的功能的,在这一篇文章中将像大家如何使用SignalR实现群聊这样的功能. 二.实现思路 要想实现群聊的功能,首先我们需要创建一个房间,然后每个在线用户可以加入这个房间里面进行群聊,我们可以为房间设置一个唯一的名字来作为标识.那SignalR类库里面是否有这样现有的方法呢?答案是肯定的. // IGroupManager接口提供如下方法 // 作用:将连接ID加入某个组 // Context.ConnectionId 连接ID,每个页