Introduction to SignalR“Persistent connection” between clients and server in ASP.NET
Introduction to SignalR     Why real-time & how ?Users want the latest info, NOW !
Introduction to SignalR
Introduction to SignalR        Where are we ? On the web !       HTTP  request/response   It is a unidirectional protocol...
Introduction to SignalR
Introduction to SignalR   HTML5 WebSockets     Extension to HTTP     Provide raw sockets over HTTP     Full-duplex     Tra...
Introduction to SignalR                             SignalRCreate a “persistent connection” between client andserver allow...
Introduction to SignalRThe connection between clients & server is persistedover best possible transport mechanism, which c...
Introduction to SignalR                 Two connection modelsHubs (high level)Can communicate with 1..N clientsAbstraction...
Introduction to SignalR <script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="Scripts/jq...
Introduction to SignalR                                  Hubs (high level)$(function () {   // Proxy created on the fly   ...
Introduction to SignalR                            Hubs (high level) public class HubChat1 : Hub  {    // Call the chat me...
Introduction to SignalR                                Hubs (high level)    public class PaginaController : Controller    ...
Introduction to SignalR      DEMO
Introduction to SignalR                     PersistentConnection (low level) $(function () {    var connection = $.connect...
Introduction to SignalR                PersistentConnection (low level)public class MyEndPoint : PersistentConnection{  pr...
Introduction to SignalR      DEMO
Introduction to SignalRYou can download the demo code at this link: http://sdrv.ms/RJgdUp There is also a video on YouTube...
Upcoming SlideShare
Loading in …5
×

Introduction to SignalR using mvc with ajax/javascript (async real-time web application)

4,472 views

Published on

"Persistent connection" between client and server allow you to push data from server to client. The connection between clients and server is persisted over best possible transport mechanism, which could be a combination of periodic polling, long polling and websockets (new html5 specification). In this way transport layer is abstracted to provide a seamless persistent connection. There are two connection models: Hubs (high level) and PersistentConnection (low level) . Client side will be created an ajax / javascript proxy-hub that intercept the callback coming from the server. The proxy-hub will be also used to send calls from client to server. You can also use (for example) SignalR in an ArcGis web map application to create a layer with point coming from some sensor or a windows phone checkin message. You can download the demo code at this link: http://sdrv.ms/RJgdUp There is also a video on YouTube: http://youtu.be/qUG0BQYfmLM

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,472
On SlideShare
0
From Embeds
0
Number of Embeds
840
Actions
Shares
0
Downloads
69
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduction to SignalR using mvc with ajax/javascript (async real-time web application)

  1. 1. Introduction to SignalR“Persistent connection” between clients and server in ASP.NET
  2. 2. Introduction to SignalR Why real-time & how ?Users want the latest info, NOW !
  3. 3. Introduction to SignalR
  4. 4. Introduction to SignalR Where are we ? On the web ! HTTP  request/response It is a unidirectional protocol statelessNever designed for real-time communications
  5. 5. Introduction to SignalR
  6. 6. Introduction to SignalR HTML5 WebSockets Extension to HTTP Provide raw sockets over HTTP Full-duplex Traverses proxies Not every browser supports it Not every proxy server supports it Not every webserver supports it They are raw sockets !
  7. 7. Introduction to SignalR SignalRCreate a “persistent connection” between client andserver allowing you to push data from server to client. Abstracts away the transport Provides just one programming model Not an official Microsoft project yet For more details: https://github.com/SignalR/SignalR
  8. 8. Introduction to SignalRThe connection between clients & server is persistedover best possible transport mechanism, which couldbe a combination of long polling, periodic polling &sockets. In this way transport layer is abstracted toprovide a seamless persistent connection
  9. 9. Introduction to SignalR Two connection modelsHubs (high level)Can communicate with 1..N clientsAbstraction over PersistentConnectionRoute automatically mapped (/signalr/hubs)Can send messages and call methodsSignalR defines the protocolPersistentConnection (low level)Can communicate with 1..N clientsIs an IHttpHandlerRequires a route to be definedLimited to sending messagesYou define the “protocol”
  10. 10. Introduction to SignalR <script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="Scripts/jquery.signalR.min.js" type="text/javascript"></script> <script src="signalr/hubs" type="text/javascript"></script>SignalR registers some code to run at application start time that finds all hubs inyour application. On the first request to signalr/hubs, the proxy is generated andcached for the lifetime of the application.If you navigate to signalr/hubs in your browser, youll see a script that isdynamically generated based on the hubs declared on the server. Each hub on theserver will become a property on the client side $.connection.myHub /$.connection.
  11. 11. Introduction to SignalR Hubs (high level)$(function () { // Proxy created on the fly var chat = $.connection.hubChat1; // Declare a function on hub so the server can invoke it chat.addMessage1 = function (message) { $(#messages).append(<li> + message + </li>); }; // Call the chat method on the server $("#broadcast").click(function () { chat.send1($(#msg).val()); }); // Start the connection $.connection.hub.start();});
  12. 12. Introduction to SignalR Hubs (high level) public class HubChat1 : Hub { // Call the chat method on the server public void Send1(string message) { // Call the addMessage method on all clients Clients.addMessage1(message); } }Invoking methods on the Clients property will broadcast that message to allconnected clients (see above). But there are some cases where we want tosend a message to specific clients. We can use the indexer on the Clientsobject to specify a connection id. Clients[Context.ConnectionId].addMessage(data);
  13. 13. Introduction to SignalR Hubs (high level) public class PaginaController : Controller { public ActionResult Index() { return View(); } public ActionResult Command() { var context = GlobalHost.ConnectionManager.GetHubContext<HubChat1>(); context.Clients.addMessage1(“Hello world”); return null; } }If you call an action method into the controller, you can also call a javascriptcallback. To get the context object for a hub, use this method. GlobalHost.ConnectionManager.GetHubContext<T>()
  14. 14. Introduction to SignalR DEMO
  15. 15. Introduction to SignalR PersistentConnection (low level) $(function () { var connection = $.connection(/echo); connection.received(function (data) { $(#messages).append(<li> + data + </li>); }); $("#broadcast").click(function () { connection.send($(#msg).val()); }); connection.start(); });The "PersistentConnection" requires a route to be defined, it is limited to sendingmessages and you must define the protocol.
  16. 16. Introduction to SignalR PersistentConnection (low level)public class MyEndPoint : PersistentConnection{ protected override Task OnConnectedAsync(IRequest request, string connId) { return Connection.Broadcast("Connection " + connectionId + " connected"); } protected override Task OnReceivedAsync(IRequest request, string connId, string data) { return Connection.Broadcast("Connection " + connectionId+ " sent " + data); } protected override Task OnDisconnectAsync(string connId) { return Connection.Broadcast("Connection " + connectionId+ " disconncted"); }}
  17. 17. Introduction to SignalR DEMO
  18. 18. Introduction to SignalRYou can download the demo code at this link: http://sdrv.ms/RJgdUp There is also a video on YouTube: http://youtu.be/qUG0BQYfmLM

×