Custom Hub Name in SignalR

Ajeet 75

Rate me:

5.00/5 (1 vote)

18 Feb 2015CPOL2 min read

29.2K

Demo to show how to use HubName and HubMethodName attributes in SignalR

Introduction

ASP.NET SignalR is ASP.NET open source library on top of .NET framework for building real–time web applications. It provides different Transport mechanism (WebSockets, long Polling, Server Side Events and Forever Frame) and Communication modes (Hub and Persistent Connection).

When a Hub Connection mode is used, then by default ASP.NET SignalR translates the Pascal naming of method names on the server side (e.g. MethodName) to a camel case (e.g. methodName). It takes the declared class names in hubs and applies camel casing to them to generate the hubs proxy. If these changes are not considered on the client side, then the application will not function.

The SignalR provides the CustomHub names by means of which no camel casing convention is done in the hubs proxy

Using the code

The below sample code demonstrate the usage of HubName attribute and HubMethodName attribute to avoid camel casing for the hub proxies. It is a simple chat application where multiple clients(browsers when running locally) can communicate with each other.

Steps:

Open Visual Studio 2013
Create a new blank web application using Visual Studio 2013. Name the application as SignalRDemo
If the application do not contains reference to SignalR library, then add the reference from Nuget Package manager.
Add a new SignalR Hub class(v2) item to the project. Name it as CustomHubName.cs

Replace the content of the CustomHubName.cs class with the below code.

using System;

using System.Web;

using Microsoft.AspNet.SignalR;

using Microsoft.AspNet.SignalR.Hubs;

namespace SignalRDemo

{

/// <summary>

/// The class uses the HubName attribute present in Microsoft.AspNet.SignalR.Hubs namespace

/// to avoid camel casing convention

/// </summary>

[HubName("CustomHubNewName")]

public class CustomHubName : Hub

{

/// <summary>

/// Method to broadcast message to all connected clients. It uses HubMethodName attribte to avoid camel

/// casing convention

/// </summary>

/// <param name="name"></param>

/// <param name="message"></param>

[HubMethodName("CustomSendMethod")]

public void Send(string name, string message)

{

Clients.All.broadcastMessage(name, message);

}

}

}

Add a new HTML Page to the project. Name it as CustomHubNameDemo.html. Set the page as start up page.

Replace the content of the HTML page with the below code

Sample HTML page

HTML

<!DOCTYPE html>

<html>

<head>

<title>SignalR Simple Chat using Custom Hub Name</title>

<style type="text/css">

.container {

background-color: #99CCFF;

border: thick solid #808080;

padding: 20px;

margin: 20px;

}

</style>

</head>

<body>

<div class="container">

<input type="text" id="message" />

<input type="button" id="sendmessage" value="Send" />

<input type="hidden" id="displayname" />

<ul id="discussion"></ul>

</div>

<!--Script references. -->

<!--Reference the jQuery library. -->

<script src="Scripts/jquery-1.10.2.min.js"></script>

<!--Reference the SignalR library. -->

<script src="Scripts/jquery.signalR-2.0.0.min.js"></script>

<!--Reference the autogenerated SignalR hub script. -->

<script src="signalr/hubs"></script>

<!--Add script to update the page and send messages.-->

<script type="text/javascript">

$(function () {

// Declare a proxy to reference the custom Hub name.

var customHubChat = $.connection.CustomHubNewName;

// Create a function that the hub can call to broadcast messages.

customHubChat.client.broadcastMessage = function (name, message) {

// Html encode display name and message.

var encodedName = $('<div />').text(name).html();

var encodedMsg = $('<div />').text(message).html();

// Add the message to the page.

$('#discussion').append('<li><strong>' + encodedName

+ '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');

};

// Get the user name and store it to prepend to messages.

$('#displayname').val(prompt('Enter your name:', ''));

// Set initial focus to message input box.

$('#message').focus();

// Start the connection.

$.connection.hub.start().done(function () {

$('#sendmessage').click(function () {

// Call the Send method on the Custom Hub name.

customHubChat.server.CustomSendMethod($('#displayname').val(), $('#message').val());

// Clear text box and reset focus for next comment.

$('#message').val('').focus();

});

});

});

</script>

</body>

</html>

Run the application.

The application will be executed succesfully.

Points of Interest

If the HubName and HubMethodName attributes are removed from the Hub Class and executed, then the application will fail.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Ajeet 75

Architect

India

I am having 10+ years of extensive experience on Microsoft .NET Technologies. Currently, working as a Technical Architect

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Custom Hub Name in SignalR

Introduction

Using the code

Points of Interest

License

Comments and Discussions