SignalR Tutorial, Part 2: Communicating with Hub without SignalR Generated Proxy

03. September 2015 SignalR 4

In the previous post you saw how to create a very simple chat application using SignalR generated proxy. In this sample you will learn how to communicate with hub without using SignalR generated proxy.

The generated proxy simplifies the process of creating hub and calling methods on the server. It enables you to create a hub, calling a method on server, etc. by simply calling a method.

Open the project and then open index.html. Remove the reference to the signalr/hubs:

...
    <script src="Scripts/jquery-1.6.4.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.js"></script>
    <!--<script src="signalr/hubs"></script>-->
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/sampleChat.js"></script>
</body>
...

 

Open the sampleChat.js and modify it as below. Notice the lines of code which used the generated proxy are commented so you can compare:

(function () {
    var app = angular.module('chat-app', []);
 
    app.controller('ChatContoller', function ($scope) {
        // scope variables
        $scope.name = 'Guest'; // holds the user's name
        $scope.message = ''; // holds the new message
        $scope.messages = []; // collection of messages coming from server
        $scope.chatHub = null; // holds the reference to hub
 
        var connection = $.hubConnection();
 
        //$scope.chatHub = $.connection.chatHub; // initializes hub
        $scope.chatHub = connection.createHubProxy('chatHub');
 
        //$.connection.hub.start(); // starts hub
        connection.start(); // starts hub
 
        // register a client method on hub to be invoked by the server
        //$scope.chatHub.client.broadcastMessage = function (name, message) {
        $scope.chatHub.on('broadcastMessage', function (name, message) {
            var newMessage = name + ' says: ' + message;
 
            // push the newly coming message to the collection of messages
            $scope.messages.push(newMessage);
            $scope.$apply();
        });
 
        $scope.newMessage = function () {
            // sends a new message to the server
            //$scope.chatHub.server.sendMessage($scope.name, $scope.message);
            $scope.chatHub.invoke('sendMessage', $scope.name, $scope.message);
 
            $scope.message = '';
        }
    })
}());

First you need to create a hub connection:

var connection = $.hubConnection();

In order to create proxy you need use the hubConnection createHubProxy method and pass the hub name, then start the hub:

connection.createHubProxy('chatHub');
connection.start();

To create a callback method which the server will use to broadcast message:

$scope.chatHub.on('broadcastMessage', function (name, message) {
    var newMessage = name + ' says: ' + message;

    $scope.messages.push(newMessage);
    $scope.$apply();
});

The first parameter is the client method name, the same as the hub is using to communicate with the clients.

To invoke a method on the hub:

$scope.chatHub.invoke('sendMessage', $scope.name, $scope.message);

The first parameter is the hub method name. Following parameters are the hub’s method parameter.

By running the application you will get the same functionality as using the generated proxy.

Download the project


4 thoughts on “SignalR Tutorial, Part 2: Communicating with Hub without SignalR Generated Proxy”

  • 1
    balram on December 12, 2015 Reply

    help me understand this ,i also have this problem. using web api 2 project for services and mvc 5 project as client app,my hub is at web api now i want to call a hub method from client application. #1. i am not able to generate automatic proxy probably because of separate projects. #2. if i use without generated proxy method ,server method dosent gets called , i get error at console log that ,error calling server method.

  • 2
    Anon on April 8, 2016 Reply

    Great write up, came in very useful thanks.

  • 3
    Natarajan on January 12, 2018 Reply

    Getting the below error.

    “SignalR: Connection has not been fully initialized. Use .start().done() or .start().fail() to run logic after the connection has started.”

    Please help.

  • 4

    “SignalR: Connection has not been fully initialized. Use .start().done() or .start().fail() to run logic after the connection has started.”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.