Insights of a Full Stack dev: web

Showing posts with label web. Show all posts

Tuesday, 1 April 2014

Firebase: Store and sync data in real time

Check out this scalable, easy to use, web data storage for real time apps.

Example:

Firebase along with loads of cool demo apps and quickstart tutorials can be found here: http://firebase.com

There’s also a web UI from administering your web db.

Try this out for yourself by spinning up a couple of browsers: http://stevenhollidge.com/blog-source-code/firebase/index.html

Bear in mind the data is shared so whatever you type will appear above, be nice :)

Source:

<html>
  <head>
    <script src='https://cdn.firebase.com/v0/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
  </head>
  <body>
    <div id='messagesDiv'></div>
    <input type='text' id='nameInput' placeholder='Name'>
    <input type='text' id='messageInput' placeholder='Message'>
    <script>
      var myDataRef = new Firebase('https://d5wez3l3q02.firebaseio-demo.com/');
      $('#messageInput').keypress(function (e) {
        if (e.keyCode == 13) {
          var name = $('#nameInput').val();
          var text = $('#messageInput').val();
          myDataRef.push({name: name, text: text});
          $('#messageInput').val('');
        }
      });
      myDataRef.on('child_added', function(snapshot) {
        var message = snapshot.val();
        displayChatMessage(message.name, message.text);
      });
      function displayChatMessage(name, text) {
        $('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
        $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
      };
    </script>
  </body>
</html>

It’s written in Scala and they take care of the eventual consistency and scalability issues which leaves the developer to focus on the business problem. There’s also lots of bindings available including Angular and Ember.

Enjoy!

Saturday, 6 July 2013

C# client for Server Side Events (EventSource)

Examples of one way streaming from server to client can be found on the web but it’s pretty much always JavaScript clients. Here is a working example using the .NET stack, with WebAPI as the server and a C# console application as the client.

Download and run this WebAPI chat application which emits Server Side Events:

https://github.com/filipw/html5-push-asp.net-web-api/

I then open Visual Studio running as admin, update the code to use IIS with my machine name (Zeus) and a virtual directory, clicking the create virtual directory button, so I can track requests using Fiddler:

Then update the JavaScript within the app to use the same path:

The create a Console application, using NUGET add Json.NET and paste this code in:

using System;
using System.IO;
using System.Net;
using System.Text;
using Newtonsoft.Json;

namespace ConsoleApplication2
{
    class Program
    {
        static void Main(string[] args)
        {
            new WebClientWrapper();
            Console.ReadKey();
        }
    }

    public class WebClientWrapper
    {
        WebClient wc { get; set; }

        public WebClientWrapper()
        {
            InitialiseWebClient();   
        }

        // When SSE (Server side event) occurs this fires
        private void OnOpenReadCompleted(object sender, OpenReadCompletedEventArgs args)
        {
            using (var streamReader = new StreamReader(args.Result, Encoding.UTF8))
            {
                var cometPayload = streamReader.ReadLine();
                var jsonPayload = cometPayload.Substring(5);
                var message = JsonConvert.DeserializeObject<Message>(jsonPayload);
                Console.WriteLine("Message received: {0} {1} {2}", message.dt, message.username, message.text);
                InitialiseWebClient();
            }
        }

        private void InitialiseWebClient()
        {
            wc = new WebClient();
            wc.OpenReadAsync(new Uri("http://zeus/chatapp/api/chat/"));
            wc.OpenReadCompleted += OnOpenReadCompleted;
        }
    }

    public class Message
    {
        public string username { get; set; }
        public string text { get; set; }
        public string dt { get; set; }
    }
}

You’ll need to update the code for your machine name.

Now run Fiddler, the WebAPI project and the console app and add a message in the chat window:

In Fiddler, select the request your console just made and select Raw, you’ll see nothing. Now right click and select COMETPeek and you’ll see the payload that was streamed.

Wednesday, 13 July 2011

Visual Round Trip Analyzer

Microsoft’s Visual Round Trip Analyzer (VRTA) helps web developers and testers visualize the performance of a website by providing in depth statistics about it.

You can download the tool here:

http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=21462

Here’s my usual demo website http://footy.cloudapp.net: