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

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