Monday, November 24, 2014

SignalR

                                       

What is SignalR?
SignalR  simplifies the process of adding real-time web functionality to applications. Real-time web functionality is the ability to have server code push content to connected clients instantly as it becomes available, rather than having the server wait for a client to request new data.

Steps to Implement  SignalR

1. Create a sample web application from visual studio.

2. In Solution Explorer, right-click the project, select Add | SignalR Hub Class. Name the class ChatHub.cs and add it to the project. This step creates the ChatHub class and adds to the project a set of script files and assembly references that support SignalR.

3. You can also add SignalR to a project by opening the Tools | Library Package Manager | Package Manager Console and running a command:
install-package Microsoft.AspNet.SignalR.

Note: If you are using Visual Studio 2012, the SignalR Hub Class template will not be available. You can add a plain Class called ChatHub instead.

4. In Solution Explorer, expand the Scripts node. Script libraries for jQuery and SignalR are visible in the project.
Let us write a method in hub class

public void GetUsersNotifications()
{
      // Call the broadcastMessage method to update clients.
      Clients.All.ShowNotifications (notifications);
}


Note: In JavaScript the reference to the server class and its members is in camel case. The code sample references the C# ChatHub class in JavaScript as chatHub.

6. The HTML page in the code sample shows how to use the SignalR jQuery library to communicate with a SignalR hub.
<!--Reference the autogenerated SignalR hub script. -->
    <script src="signalr/hubs"></script>

var chat = $.connection.chatHub;

chat.client.shownotifications = function (notifications) {
  //To show notifications for the user.
           $(‘#divDisplay’).html(notifications);
          };
7. The below approach ensures that the connection is established before the event handler executes.
        
  $.connection.hub.start().done(function () {
           chat.server.send.getusersnotifications ();
          });


8. so, your final html code will be as,

<!DOCTYPE html>
<html>
<head>
    <title>SignalR Simple Chat</title>
    <style type="text/css">
        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>

    <div id="divDisplay">
    </div>
</body>
</html>


<!--Reference the autogenerated SignalR hub script. -->
<script src="signalr/hubs"></script>

<script>
    $(function () {
          
        callSignalRIndex();
        var myVar = setInterval(function () {callSignalRIndex() }, 10000);
    });

    function callSignalRIndex() {
        var chat = $.connection.chatHub;

        chat.client.shownotifications = function (count)
        {
            //To show notifications for the user.
            $('#divDisplay').html(count);
        }


        // Start the connection.
        $.connection.hub.start().done(function () {
            chat.server.send.getusersnotifications ();
        });
    }

</script>


No comments:

Post a Comment