SignalR: Building real time web applications

SignalR: Building real time web applications

Rate This
  • Comments 6

Note: This sample is targeting SignalR 1.0.1 

SignalR offers a simple and clean API to write real time web applications where the server needs to continuously push data to clients. Common applications are chat, news feed, notifications, multiplayer games.

In this sample, I demonstrate powerful features like:

  • A server implementation hosted in IISExpress
  • Client implementations running on IISExpress, a Console Application, a Windows Store App, and a Silverlight App
  • Doing request/response operations sync and async
  • Server pushing broadcast messages to ALL clients
  • Server pushing group messages to specific devices like a web browser, a desktop, or a tablet.

Server

Server derives the Hub class, and it handles incoming requests in two ways:

  1. Method "y Request(x)" transparently sends a response to client
  2. Method “Task<y> RequestAsync(x)” allows server to do async long processing and transparently sends a response to client
  3. Method "Task RequestWithCallbackAsync(x)" uses Clients.Others.<DynamicMethod> to send a response to all other clients connected at the moment
public class SampleHub : Hub
{
  public FromServerToClientData Request(FromClientToServerData request)
  {
    FromServerToClientData response = new FromServerToClientData();
    response.Text = "Responding to: " + request.Text;
    return response;
  }

  public async Task<FromServerToClientData> RequestAsync(FromClientToServerData request)
  {
    FromServerToClientData response = new FromServerToClientData();
    response.Text = "Responding to: " + request.Text;
    await Task.Delay(TimeSpan.FromSeconds(5));
    return response;
  }

  public async Task RequestWithCallbackAsync(FromClientToServerData request)
  {
    FromServerToClientData response = new FromServerToClientData();
    response.Text = "Responding to: " + request.Text;
    await Task.Delay(TimeSpan.FromSeconds(5));
    Clients.Others.OthersCallback(response);
  }

  public void JoinGroup(string groupName)
  {
    Groups.Add(Context.ConnectionId, groupName);
  }
}

Server is also pushing data to clients in two ways using the BackgroundThread class:

  1. hubContext.Clients.All.<DynamicMethod>
  2. hubContext.Clients.Group(groupName).<DynamicMethod>
public class BackgroundThread
{
  public static void Start()
  {
    ThreadPool.QueueUserWorkItem(_ =>
    {
    IHubContext hubContext = GlobalHost.ConnectionManager.GetHubContext<SampleHub>();

    while (true)
    {
      ...
      hubContext.Clients.All.Broadcast(data);
      hubContext.Clients.Group("WebApp").BroadcastToGroup(
        string.Format("WebApp {0}", DateTime.Now));
      hubContext.Clients.Group("ConsoleApp").BroadcastToGroup(
        string.Format("ConsoleApp {0}", DateTime.Now));
      hubContext.Clients.Group("SilverlightApp").BroadcastToGroup(
        string.Format("SilverlightApp {0}", DateTime.Now));
      hubContext.Clients.Group("WindowsStoreApp").BroadcastToGroup(
        string.Format("WindowsStoreApp {0}", DateTime.Now));
    }        
    }
  });
}

As you can see, dynamic methods define the events that need to be handled on the client side. Think of them as if they were interface methods to execute remote calls.

 

Client

To write a client, you must define how to handle Server <DynamicMethods>: "client.Broadcast", "client.Group", and "client.ResponseAsync".

Then, client is started, and after the connection succeeds, the client can make requests to server by invoking "server.requestAsync" and "server.joinGroup".

You will see similar patterns in the ConsoleApp and WindowsStoreApp clients.

$(function () {
  $.connection.sampleHub.client.broadcast = function (value) {
    $('#BroadcastText').html('<pre>Broadcast: ' + value.Now + ' ' +
      value.Integer + ' ' + value.Text + '</pre>');
  }

  $.connection.sampleHub.client.broadcastToGroup = function (value) {
    $('#BroadcastToGroupText').html('<pre>BroadcastToGroup: ' + value + '</pre>');
  }

  $.connection.sampleHub.client.othersCallback = function (value) {
    $('#OthersCallbackText').html('<pre>OthersCallback: ' + value.Text + '</pre>');
  }

  $.connection.hub.logging = true;
  $.connection.hub.start().done(function () {
    var request = {};
    request.Text = 'This is a request from a WebApp!'

    $.connection.sampleHub.server.request(request).done(function (response) {
      $('#ResponseText').html('<pre>Response: ' + response.Text + '</pre>');
    });
    $.connection.sampleHub.server.requestAsync(request).done(function (response) {
      $('#ResponseAsyncText').html('<pre>ResponseAsync: ' + response.Text + '</pre>');
    });
    $.connection.sampleHub.server.requestWithCallbackAsync(request);
    $.connection.sampleHub.server.joinGroup('WebApp');
  });
});

There is more information about how I wrote the code when running the sample, simply follow these instructions:

  1. Download and extract SignalR.Sample.zip
  2. On Visual Studio 2012, open SignalR.Sample.sln
  3. Right-click the solution and select "Set Startup Projects…"
  4. Select "Multiple startup projects", and set the projects in this order:
    • SignalR.Sample
    • SignalR.Sample.Client
    • SignalR.Sample.WinRTClient
  5. Set "Action" column in all projects to "Start". Click OK.
  6. Ctrl-F5 to run the projects, it will start a browser, a console app, and a windows store app.

There are more advanced samples in the SignalR source code repository, follow these steps to get them:

  1. Install the latest Git for Windows
  2. Open a Command Prompt, create a folder, and download source code

md C:\SignalR\release
cd C:\SignalR\release
git clone -b release https://github.com/SignalR/SignalR.git .
  1. On Visual Studio 2012, open C:\SignalR\release\Microsoft.AspNet.SignalR.sln

SignalR has recently shipped as RC, more details here. For the RTM version, I want to post a more complex sample, my idea is to demonstrate how to publish the server implementation on Azure and use scale-out with Service Bus. Please post a comment if you are interested to see something else.

Attachment: SignalR.Sample.zip
Leave a Comment
  • Please add 8 and 1 and type the answer here:
  • Post
  • I want to use this to make facebook like chat system how?

  • Hi Salman, follow the steps I mentioned to get the samples from "SignalR source code repository". There is a chat demo there, you can quickly look at the code in github.com/.../Chat

  • Just tried the demo, tried to set startup projects to be told '◦SignalR.Sample.WinRTClient' cannot be loaded as I am not running windows 8 (Im using 7)!!

  • Hi David, Win7 does not support WinRT (Windows Store Apps). Simply remove the WinRT project from the solution and the other projects should work fine, there are no dependencies.

  • Hi, where can I find SignalR client for .net 3.5 ?

    As I saw on github the old .net 3.5 clients are removed.

    thanks

  • We are not shipping the .net 3.5 client anymore. You could get the code and compile it, it should work for now, but we don't plan to support it/ship it.

Page 1 of 1 (6 items)