Tag Archives: SignalR

Using SignalR to show server-side trace messages in a SPA


Using SignalR to show server-side trace messages in a SPA
// CodeProject Latest Articles

This article shows how SignalR can be used to show Trace messages in real-time fashion in the browser to trace and debug a Single Page Application.

ASP.NET SignalR IIS hosting


ASP.NET SignalR IIS hosting
// ASP.NET Articles of the Day

This article explains, with an example, how to host an ASP.NET SignalR hub on IIS as a separate application.

AngularJS and SignalR


AngularJS and SignalR
// Kogonuso

sshot-10200.png
The goal of this post is to connect and use SignalR from AngularJS. All the code is available in GitHub. All code is available here: GitHub Link

The application used in this post allows to add tasks to a collaborative list of tasks to do. The application displays a list with all the tasks pending to do and also allows to remove them from the list. SignalR will push the notification “newTask” and “taskDone” to all connected users.

Feel free to get the code from github and run the application in more than one place (different tabs in your explorer) to see how SignalR synchronizes all of them.
The simplicity of the application allows to focus on the goal of this post: SignalR and AngularJS.

This is a screenshot of the running application.
Screenshot of the signalR and angularJS app.

SignalR Hub

The first thing that we need is to configure the OWIN startup, we need this class in our project:

1
2
3
4
5
6
7
8
9
10
11
12
[assembly: OwinStartup(typeof(Startup))]
namespace AngularJS_SignalR
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// SignalR
app.MapSignalR();
}
}
}

The signalR hub type is “INotesCallbacks”, this interface defines the callbacks that the hub can make to the connected clients.

1
2
3
4
5
6
7
8
// Client callbacks
public interface INotesCallbacks
{
// Notify note added
Task BroadcastNewNote(Note newNote);
// Notify note removed
Task BroadcastRemoveNote(int noteId);
}

The hub also implement the interface “INotesCalls” this interfaces defines the hub methods that clients can call.

1
2
3
4
5
6
7
8
9
10
// Client calls
public interface INotesCalls
{
// Add note
Task AddNote(string note);
// Get all notes
IEnumerable
// Remove note
Task RemoveNote(int roomId);
}

This is the implementation of the hub:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
[HubName("notesHub")]
public class NotesHub : Hub
{
public async Task AddNote(string note)
{
Note newNote = NotesService.Add(note);// All connected clients will receive this call
await Clients.All.BroadcastNewNote(newNote);
}

public IEnumerable
{
return NotesService.GetAll();
}

public async Task RemoveNote(int noteId)
{
if (NotesService.Remove(noteId))
{
// All connected clients will receive this call
await Clients.All.BroadcastRemoveNote(noteId);
}
}
}

Angular

The application has a controller with all the bindings that the view can do and a service with all the logic needed to:

  • stablish a connection with SignalR
  • register callbacks functions
  • make hub calls

You can see the view here, the controller here and the service here.

Stablish the connection with SignalR

The angular service implement a method “initialize” that makes the connection to SignalR and broadcast an event when the connection was established.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var _hubConnection = $.hubConnection();
var _notesHubProxy = undefined;//// Service methods implementation
function _initialize() {

// Hub Proxy (allows to make calls and register callbacks handlers)
_notesHubProxy = _hubConnection.createHubProxy(notesSignalR.hubName);

// signalR callbacks handlers
_notesHubProxy.on(notesSignalR.onNewNote, broadcastNewNote);
_notesHubProxy.on(notesSignalR.onRemoveNote, broadcastRemoveNote);

// connect
_hubConnection.start()
.done(connectedToSignalR)
.fail(function () { console.error('Error connecting to signalR'); });
}

function connectedToSignalR() {
console.debug('connected to signalR, connection ID =' + _hubConnection.id);
$rootScope.$broadcast(signalR.onConnected, { connectionId: _hubConnection.id });
}

To avoid magic strings on the javascript code we define this constants:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function signalR() {
}// connected event
signalR.onConnected = "signalRConnected";

function notesSignalR() {
}

// hub
notesSignalR.hubName = "notesHub";

// client calls
notesSignalR.addNote = "addNote";
notesSignalR.removeNote = "removeNote";
notesSignalR.getAllNotes = "getAllNotes";

// client callbacks
notesSignalR.onNewNote = "broadcastNewNote";
notesSignalR.onRemoveNote = "broadcastRemoveNote";

Three different scenarios to communicate with SignalR from AngularJS will be described:

  • Register functions to be run when SignalR makes a callback to the client.
  • Call SignalR from AngularJS. Functions without a return parameter.
  • Call SignalR from AngularJS. Function returning values to the client.

Register functions to SignalR callbacks

The chosen implementation will register a function that broadcasts the callback received from SignalR. All the controllers interested in this callback shall be register to this AngularJS broadcast, controllers don’t even know that trigger was SignalR.

1
2
3
4
5
6
7
8
9
10
11
12
13
// signalR callbacks handlers
_notesHubProxy.on(notesSignalR.onNewNote, broadcastNewNote);
_notesHubProxy.on(notesSignalR.onRemoveNote, broadcastRemoveNote);function broadcastNewNote(note) {
console.debug(notesSignalR.onNewNote + " " + note.text);
$rootScope.$broadcast(notesSignalR.onNewNote, { note: note });
}

function broadcastRemoveNote(noteId) {
console.debug(notesSignalR.onRemoveNote + " " + noteId);
$rootScope.$broadcast(notesSignalR.onRemoveNote, { noteId: noteId });
}

The controller register this functions when the previous events are broadcast:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//// PRIVATE Functions - Public Methods Implementation
function _activate() {
notesService.initialize();$scope.$on(signalR.onConnected, function (event, args) {
connectedToSignalR(args.connectionId);
});

$scope.$on(notesSignalR.onNewNote, function (event, args) {
$scope.$apply(function() {
vm.notes.push(args.note);
});
});

$scope.$on(notesSignalR.onRemoveNote, function (event, args) {
$scope.$apply(function () {
removeNote(args.noteId);
});
});
}

function _addNote() {
notesService.addNote(vm.newNote);
vm.newNote = "";
}

function _removeNote(id) {
notesService.removeNote(id);
removeNote(id);
}

Call SignalR from AngularJS

To call SignalR from angular we only need a simple invoke in our service:

1
2
3
4
5
6
7
function _addNote(note) {
_notesHubProxy.invoke(notesSignalR.addNote, note);
}function _removeNote(noteId) {
_notesHubProxy.invoke(notesSignalR.removeNote, noteId);
}

Call SignalR from AngularJS with return values. Promises.

Things are a little bit more complicated if we expect a return value from the method in SignalR because the call is asynchronous. An example is the “GetAllNotes” that the hub defines.
The method in our service will return a promise, from the controller we need to call the method and register the function that shall be executed after the asynchronous call is finished, i.e. the promise was resolved.
The method in our service:

1
2
3
4
5
6
7
8
9
10
11
function _getAllNotesAsync() {

var deferred = $q.defer();

_notesHubProxy.invoke(notesSignalR.getAllNotes)
.done(function (notes) {
deferred.resolve(notes);
});

return deferred.promise;
}

How to call this method from the controller:

1
2
3
4
// load all notes
notesService.getAllNotesAsync().then(function(notes) {
vm.notes = notes;
});

Fell free to leave a comment!

Tutorial: Server Broadcast with SignalR 2


via Tutorial: Server Broadcast with SignalR 2 | The ASP.NET Site.

This tutorial shows how to create a web application that uses ASP.NET SignalR 2 to provide server broadcast functionality. Server broadcast means that communications sent to clients are initiated by the server. This scenario requires a different programming approach than peer-to-peer scenarios such as chat applications, in which communications sent to clients are initiated by one or more of the clients.

Getting Started with SignalR


via Getting Started with SignalR | .NET Code Geeks.

SignalR is an open source .NET library enabling real-time broadcasts of data on the web. Typical example applications include chats, stock tickers, and even games. It does this by leveraging and abstracting a number of different technologies, choosing the most suitable transport mechanismbased on what the client and server support (since WebSocket support is not yet widespread).

At the time of writing this article, SignalR v2 is the latest implementation, but SignalR v3 is in beta along with ASP .NET 5. I’ll be using VS2015 for this article.

In this article, we’ll cover some really simple examples that will get you up and running fast.

The source code for this article is available on the Gigi Labs BitBucket repository:

Building a Chat Application with SignalR


via Building a Chat Application with SignalR.

SignalR is an open source library for ASP.NET developers. It’s the equivalent of what Socket.IO is for Node.js (if you want, you can check out a comparison on Stack Overflow). SignalR can be used to provide real-time web features to your applications. Usually, if you are into Ember and JavaScript, you might be inclined to choose Socket.IO and stick to JavaScript. One of the reasons why I chose SignalR is that it has a more extended documentation and several resources to refer to. Moreover, you can get all the benefits of ASP.NET world for free.

In this article, I’ll show you how to build a simple chat application using SignalR. If you haven’t done it yet, I suggest you to read my previous one titled “A Chat Application Using Socket.IO” in order to have a more complete overview of these topics and then compare pros and cons of both the approaches.

ASP.Net SignalR: Building a Simple Real-Time Chat Application


via ASP.Net SignalR: Building a Simple Real-Time Chat Application.

SignalR is a pretty new and very exciting feature in ASP.NET. It offers a simple and clean API that allows you to create real-time web applications where the server needs to continuously push data to clients. Common applications are chat, news feeds, notifications and multi-player games.

For this exercise we’re going to build a simple chat application in ASP.NET MVC 4 using the power of SignalR. I presume that you already have the basic knowledge on ASP.NET MVC and how stuff works (for example Model, View and Controller) in the MVC development approach because the details of them will not be covered in this exercise.