Use SignalR to receive highlighting updates

HangfireIO · Apr 23, 2014 · e4fdf1a · e4fdf1a
1 parent 4497da3
commit e4fdf1a
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 18 deletions.
diff --git a/HangFire.Highlighter/Content/ajax-loader.gif b/HangFire.Highlighter/Content/ajax-loader.gif
diff --git a/HangFire.Highlighter/Controllers/HomeController.cs b/HangFire.Highlighter/Controllers/HomeController.cs
@@ -4,7 +4,9 @@
 using System.Net.Http;
 using System.Threading.Tasks;
 using System.Web.Mvc;
+using HangFire.Highlighter.Hubs;
 using HangFire.Highlighter.Models;
+using Microsoft.AspNet.SignalR;
 
 namespace HangFire.Highlighter.Controllers
 {
@@ -61,6 +63,10 @@ public static void HighlightSnippet(int snippetId)
                 snippet.HighlightedAt = DateTime.UtcNow;
 
                 db.SaveChanges();
+
+                var hubContext = GlobalHost.ConnectionManager.GetHubContext<SnippetHub>();
+                hubContext.Clients.Group(SnippetHub.GetGroup(snippet.Id))
+                    .highlight(snippet.HighlightedCode);
             }
         }
 

diff --git a/HangFire.Highlighter/Hubs/SnippetHub.cs b/HangFire.Highlighter/Hubs/SnippetHub.cs
@@ -0,0 +1,18 @@
+using System.Threading.Tasks;
+using Microsoft.AspNet.SignalR;
+
+namespace HangFire.Highlighter.Hubs
+{
+    public class SnippetHub : Hub
+    {
+        public Task Subscribe(int snippetId)
+        {
+            return Groups.Add(Context.ConnectionId, GetGroup(snippetId));
+        }
+
+        public static string GetGroup(int snippetId)
+        {
+            return "snippet:" + snippetId;
+        }
+    }
+}
diff --git a/HangFire.Highlighter/Views/Home/Details.cshtml b/HangFire.Highlighter/Views/Home/Details.cshtml
@@ -17,20 +17,14 @@
 </div>
 
 <div>
-    @if (Model.HighlightedCode == null)
-    {
-        <div class="alert alert-info">
-            <h4>Highlighted code is not available yet.</h4>
-            <p>Don't worry, it will be highlighted even in case of a disaster
-                (if we implement failover strategies for our job storage).</p>
-            <p><a href="javascript:window.location.reload()">Reload the page</a>
-                manually to ensure your code is highlighted.</p>
-        </div>
-
-        @Model.SourceCode
-    }
-    else
-    {
-        @Html.Raw(Model.HighlightedCode)
-    }
-</div>
+    <div id="sourceCode" data-snippet="@Model.Id" data-subscribe="@(Model.HighlightedCode == null)">
+        @if (Model.HighlightedCode == null)
+        {
+            <img src="~/Content/ajax-loader.gif" />
+        }
+        else
+        {
+            @Html.Raw(Model.HighlightedCode)
+        }
+    </div>
+</div>
diff --git a/HangFire.Highlighter/Views/Shared/_Layout.cshtml b/HangFire.Highlighter/Views/Shared/_Layout.cshtml
@@ -4,8 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>@ViewBag.Title - My ASP.NET Application</title>
-    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
     <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
+    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
     <script src="~/Scripts/modernizr-2.6.2.js"></script>
     @StackExchange.Profiling.MiniProfiler.RenderIncludes()
 </head>
@@ -37,5 +37,26 @@
 
     <script src="~/Scripts/jquery-1.10.2.min.js"></script>
     <script src="~/Scripts/bootstrap.min.js"></script>
+    <script src="~/Scripts/jquery.signalR-2.0.3.min.js"></script>
+    <script src="~/signalr/hubs"></script>
+    <script>
+        $(function () {
+            $('#sourceCode[data-subscribe="True"]').each(function () {
+                var snippetId = $(this).data('snippet');
+                var snippet = $.connection.snippetHub;
+
+                snippet.client.highlight = function (highlightedCode) {
+                    $('#sourceCode').html(highlightedCode);
+                };
+
+                console.log('Connecting to the SnippetHub');
+
+                $.connection.hub.start().done(function () {
+                    console.log('Subscribing to snippet #' + snippetId);
+                    snippet.server.subscribe(snippetId);
+                });
+            });
+    });
+</script>
 </body>
 </html>