Click here to Skip to main content
15,438,712 members
Articles / SignalR
Tip/Trick
Posted 18 Feb 2015

Stats

25.6K views
3 bookmarked

Custom Hub Name in SignalR

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
18 Feb 2015CPOL2 min read
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:

  1. Open Visual Studio 2013
  2. Create a new blank web application using Visual Studio 2013. Name the application as SignalRDemo
  3. If the application do not contains reference to SignalR library, then add the reference from Nuget Package manager.
  4. Add a new SignalR Hub class(v2) item to the project. Name it as CustomHubName.cs
  5. Replace the content of the CustomHubName.cs class with the below code.
    C#
    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);
    
    }
    
    }
    
    }
  6. Add a new HTML Page to the project. Name it as CustomHubNameDemo.html. Set the page as start up page.
  7. 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>
  8. 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
Architect
India India
I am having 10+ years of extensive experience on Microsoft .NET Technologies. Currently, working as a Technical Architect

Comments and Discussions

 
QuestionCustom hum method name Pin
Rajesh Londhe12-May-16 23:28
MemberRajesh Londhe12-May-16 23:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

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