An Example of SignalR

Posted 2020-10-04 tomclock

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