Sunday, April 7, 2013

(roundtrip) around the world, the Hello World of SignalR that is

The thing I've been building here, here, here, and here (where MagicStringFactory has not yet been renamed to MagicStringLibrary) now has blossomed to the point of a functioning SignalR application. Observe:

using System.Threading.Tasks;
using Microsoft.AspNet.SignalR;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using ShockCaperShivers.Core;
using StructureMap;
namespace ShockCaperShivers.SignalR
{
   public class EchoConnection : PersistentConnection
   {
      protected override Task OnConnected(IRequest request, string connectionId)
      {
         return base.OnConnected(request, connectionId);
      }
      
      protected override Task OnReceived(IRequest request, string connectionId,
            string data)
      {
         var json = (JObject)JsonConvert.DeserializeObject(data);
         IClockRepository clockRepository = ObjectFactory
               .GetInstance<IClockRepository>();
         Hand hand = HandFactory.CreateHand(json["HandAtHand"].ToString(),
               json["IpIdentity"].ToString(), clockRepository);
         IHandRepository handRepository = ObjectFactory.GetInstance<IHandRepository>();
         string status = Game.Play(hand, handRepository);
         var message = new { body = status };
         return this.Connection.Broadcast(message);
      }
   }
}

 
 

Every browser bringing up the following view will catch and work with the anonymous type at second to last line of the second method above. This will happen "in real time" and whenever applicable without a user needing to update a browser manually.

@model ShockCaperShivers.Models.Ip
@{
   Layout = null;
}
<!DOCTYPE html>
<html>
<head>
   <title>Shock Caper Shivers</title>
</head>
   <body>
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/signalr")
      @Html.Hidden("ip", Model.Address)
      <button id="@ShockCaperShivers.Core.MagicStringLibrary.Rock" class="hand">
            </button>
      <button id="@ShockCaperShivers.Core.MagicStringLibrary.Paper" class="hand">
            </button>
      <button id="@ShockCaperShivers.Core.MagicStringLibrary.Scissors" class="hand">
            </button>
      <div id="outcome"></div>
      <script language="javascript">
         $(function () {
            var connection = $.connection("/signal");
            connection.start();
            $('.hand').bind('click', function () {
               var hand = {
                  HandAtHand: $(this).attr("id"),
                  IpIdentity: $('#ip').val()
               };
               var string = JSON.stringify(hand);
               connection.send(string);
            });
            connection.received(function (message) {
               var status = message.body;
               var location = "|" + $('#ip').val() + "|";
               if (status.indexOf(location) >= 0) {
                  var identity = location + "(YOURSELF)";
                  $("#outcome").html(status.replace(location, identity).replace(location + " ",
                        identity + " "));
               }
            });
         });
      </script>
   </body>
</html>

No comments:

Post a Comment