Monday, August 24, 2015

Syncronizing time/watch between javascript client and ASP.NET MVC 4 server

https://codemadesimple.wordpress.com/2012/06/18/timesync-with-asp-net-mvc-4/
Posted June 18, 2012
Filed under: Ajax, ASP.NET MVC 4, DateTime, Javascript, Knockout, Software Development, Sql Server, Synchronization, Taffy DB | Tags: , , ,, , , ,  |
I just wished working with Date() in Javascript was easier.
Recently here at 4N1, we had to make some date-time calculations on the client-side of a web application. The app arquitecture is:

Client side

  • Html 5: Just added the 5 to look cool. :D
  • Javascript: You know what that is.
  • Knockout JS: An amazing Javascript MVVM framework.
  • TaffyDB: An awesome Javascript database.

Server side

Since the client and the server time can be different, we need a way to know exactly how much it is to adjust our calculation. Talking with an old colleague,Rui Milagaia, the following solution came up:
Time sync Logic
A device is anything that has a time. This logic can be applied in any scenario(computer A to computer B, client to server, server to server, device A to device B, etc).
NOTE: This solution will not guarantee milliseconds precision but if your doing calculations that go only down to the second, it should be ok.
Back to our app, since is javascript, I’ve used jquery to perform an ajax request to an MVC Action. I just needed to guarantee that the request was synchronous, otherwise the asynchronous behavior adds noise to the calculated value. I’ve created a github repository with the source code here. You can use it with another server side technologies (JSP, Rails, Grails, etc). Here is the important steps:

Client side

  1. Add a reference to the 4n1.timesync.js file:
    1
    2
    3
    4
    5
    6
    7
    8
    <!-- jQuery 1.5 or later is a foranyone.timeSync dependency -->
    <script src="jquery-1.6.4.js" type="text/javascript"></script>
     
    <!-- Reference to the 4n1.timeSync script file-->
    <script src="4n1.timeSync.js" type="text/javascript"></script>
     
    <!-- To make it easier to parse date strings with the ISO 8601 format, we use the library from https://github.com/csnover/js-iso8601 -->
    <script src="iso8601.js" type="text/javascript"></script>
  2. Set the expected properties, in my case only the url to the MVC Action, and call the foranyone.timeSync.getTimeDifference function to retrieve the time difference in milliseconds.
    1
    2
    3
    4
    foranyone.timeSync.url = "www.somedomain.com/ServerTime/GetServerTime";
     
    // This variable now has the difference from the client and the server in milliseconds. It can be positive or negative.
    var timeDifference = foranyone.timeSync.getTimeDifference();

    3. Server side

    1. Just implement an action that returns the server time:
      1
      2
      3
      4
      5
      6
      7
      8
      public class ServerTimeController
      {
          public ActionResult GetServerTime()
          {
              // Using a Iso format string without all the milliseconds because IE cannot process it :p.
              return Json(DateTime.Now.ToString("yyyy'-'MM'-'ddTHH':'mm':'ss.fff%K"), JsonRequestBehavior.AllowGet);
          }
      }
    And thats it. Happy syncronization! :D https://codemadesimple.wordpress.com/2012/06/18/timesync-with-asp-net-mvc-4/
    https://codemadesimple.wordpress.com/2012/06/18/timesync-with-asp-net-mvc-4/
Posted by at
Labels: