Magnus Thor

Send and receive BLOBS using FileAPi and WebSockets (XSockets.NET)

2011-12-14T23:58:00.001+01:00

This is short blog post showing you all some of the work we have done on the XSockets.NET WebSocketServer. The latest two month in the XSockets team has been working on improving the API’s, plugin ,configuration and protocols. We are pleased that we decided to focus on issues, development and things in general regarding the protocol support – As we did this we will manage to deliver protocol support based on the W3C Candidate Recommendation from the 8th of December.

Don’t miss our free WebSockets CodeCamp in end of January 2012 in Stockholm Sweden

In this post I will show you a short video and some early code-snippets of how we can user the binary support of WebSockets, send and receive files in out Web browser just using WebSockets. I’m also taking advantage of the File API.

The demo reminds of an similar thing o wrote in April this year, but back back then we had to Base64 encode/decode as the protocols and browser lacked support of sending binary web sockets messages (http://dathor.blogspot.com/2011/04/html5-websockets-sending-binary-data.html for the old post )

Video (http://www.youtube.com/watch?v=GCQglS8cGQM)

JavaScript code

// Create an WebSockets instance using XSockets jsAPI
binaryWs = new jXSockets.xWebSocket("ws://127.0.0.1:4502/XSockets.Core.Handlers.Binary", "XSockets.Core.Handlers.Binary");

// Bind an "listner" for the onopen event
binaryWs.bind("open", function () {
    $("<p>").text("connected to XSockets XSockets.Core.Handlers.Binary").insertAfter("div");
    $("input").change(function (e) {
        $(this.files).each(function () {
            $("<p>").text("Sending Blob '" + this.fileName + "' size is " + this.size).insertAfter("div");
            binaryWs.send(this); // send the file (blob)
        });
    });
    // Bind a "listner" for the "blob event
    binaryWs.bind("blob", function (blob) {
        var reader = new FileReader(); // Create a FileReader using the FileAPI

        // When the "blob" i loaded, add the "image to DOM (page)
        reader.onload = function (e) {
            var data = e.target.result;
            uri = data.replace("data:base64,", "data:image/png;base64,")
            $("<img>").addClass("image").attr("src", uri).prependTo("div");
        };
        reader.readAsDataURL(blob); // Read the "blob" recived from the "WebSocket"
    })
});
});

Markup (HTML)

    <form>
    <h1>
        XSockets.NET - FileAPI + Send Blobs using WebSockets</h1>
    <p>
        Get XSockets here http://xsockets.net</p>
    <input type="file" multiple />
    </form>
    <div>
    </div>

XSockets.NET WebSocket Hander

using System;
using System.ComponentModel.Composition;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using XSockets.Common.XSocket;
using XSockets.Common.XSocket.Event.Arguments;
using XSockets.Common.XSocket.Interface;

namespace XSockets.Core.Handlers
{
    [Export(typeof (IXBaseSocket))]
    public class Binary : XBaseSocket
    {
        public Binary()
        {
            OnIncomming += Binary_OnIncomming;
        }

        private void Binary_OnIncomming(object sender, OnIncommingArgs e)
        {

            byte[] binaryStream = e.Bytes;
            var ms = new MemoryStream(binaryStream);
            Image image = Image.FromStream(ms);
            image.Save(string.Format(@"c:\tmp\{0}.png", Guid.NewGuid()), ImageFormat.Png);

            // Send to all connected users.
            foreach (var node in XNodes)
            {
                node.Value.XSocket.Send(binaryStream);
            }


        }
    }
}

For more information about XSockets see http://xsockets.net

Links

FileAPI - http://www.w3.org/TR/FileAPI/
WebSockets API - http://www.w3.org/TR/websockets/
XSockets.NET – http://xsockets.net
XSockets Free CodeCamp in Stockholm Jan 2012 – http://xsocketscodecamp2.eventbrite.com
Video above at Youtube - http://www.youtube.com/watch?v=GCQglS8cGQM

Kind regards

Magnus Thor

KnockoutAuction a KnockoutJS,jQueryMobile + WebSockets example

2011-12-12T18:45:00.001+01:00

I must confess, it has been a long time since I wrote something here at the blog, I have been busy doing HTML5, jQueryMobile teaching. Of course I also got the time to work on the next release of XSockets.NET – A new release is coming during xmas!

So, in this post I will give I you an idea of how we cam build real-time web application using two of my favorite frameworks jQueryMobile and KnockoutJS. The real-time parts is built on the XSockets.NET WebSocketServer (framework)

The example is an very simple “Auction” containing a few different views , it’s a single-page-web-app . There is no backend at all except the WebSocket Server, that enables the real-time parts of the auction.

In a few days there will be an enhancement of this simple demo, a complete backend will be implemented, until that I hope you will enjoy this sample.

We must keep in mind that I just want to show an concept, not a complete system, but for those of you that wants more – its coming :-)

Ok lets have a look at the markup

JavaScript and other “dependencies "

    <title>KnockoutAuction</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
    <script src="http://xsockets.net/js/knockout-1.3.0beta.js" type="text/javascript"></script>
    <script src="http://xsockets.net/js/JXSockets-0.9.4.js" type="text/javascript"></script>

The auction contains the following views ( JQueryMobile )

Home (page)

The pages contains a couple of menu elements, I will just cover latest, create and details (where you place bids)

<div data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>
            KnockoutAuction</h1>
    </div>
    <div data-role="content">
        <p style="text-align: center">
            Welcome to this XSockets.NET show case using jQueryMobile and KnockoutJS - two utterly
            good frameworks
        </p>
        <ul data-role="listview" data-inset="true">
            <li data-role="list-divider">Menu</li>
            <li><a href="#latest">
                <h2>
                    Latest auctions</h2>
                <p>
                    Show the 15 latest crazy auctions</p>
            </a></li>
            <li><a href="#search">
                <h2>
                    Find</h2>
                <p>
                   Find things you never thought existed...</p>
            </a></li>
            <li><a href="#create">
                <h2>
                    Create a new auction</h2>
                <p>
                   Sell ??your surplus stuff...</p>
            </a></li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed">
        <h2>
           Team XSockets.NET 2011
        </h2>
    </div>
</div>

Latest

This view contains a list of auctions , by using the data-bind=”” attribute (KnockoutJS) we bind the “listview/template” to the" model using foreach: auctions" , then by adding other data-bind attributes the the child element we gain control of the markup and rendering. I also add a custom attribute auctionid, had some problems adding a “proper” html5 data attribute using the knockout templates. The auctionid attribute will be used to “track” the element later.

<div data-role="page" id="latest">
    <div data-role="header" data-position="fixed">
       <a href="//" data-icon="back">Home</a>

        <h1>
            Latest auctions</h1>
    </div>
    <div data-role="content">
        <ul data-bind="foreach: auctions" id="listofauctions" data-role="listview" data-inset="true">
        <li>
        <a data-bind="click:function() { auctionModel.show($data) }">
        <h2 data-bind="text: Caption"></h2>
        <p data-bind="attr: { auctionid: Id }"><strong>Latest bid:<span data-bind="text: Price" class="bid"></span></strong></p>
        <p data-bind="text: Description">
        </p>
        </a>

    </li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed">
        <h2>
           Team XSockets.NET 2011
        </h2>
    </div>
</div>

Create a new auction

<div data-role="page" id="create">
    <div data-role="header" data-position="fixed">
        <a href="/" data-icon="back">Home</a>
        <h1>
            Create</h1>
        <a href="#" data-icon="check" data-bind="click: newAuction">Save</a>
    </div>
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="caption">
                Caption:</label>
            <input type="text" id="caption" name="caption" data-bind="value: auction.Caption, valueUpdate: 'afterkeydown'" />
        </div>
        <div data-role="fieldcontain">
            <label for="description">
                Description:</label>
            <input type="text" id="description" name="description" data-bind="value: auction.Description, valueUpdate: 'afterkeydown'" />
        </div>
        <div data-role="fieldcontain">
            <label for="price">
                Price:</label>
            <input type="number" id="price" name="price" data-bind="value: auction.Price, alueUpdate: 'afterkeydown'" />
        </div>
    </div>
    <div data-role="footer" data-position="fixed">
        <h2>
           Team XSockets.NET 2011
        </h2>
    </div>
</div>

Placebid ( Details)

Lets the user place a bid. The view contains of three elements bound to the “model”, the <p> tag , (<span )> that is the actual price and the input element.

<div data-role="page" id="details">
    <div data-role="header" data-position="fixed">
    <a href="#latest" data-icon="back">Back</a>
        <h1 data-bind="text: bid.Caption">
            </h1>
        <a href="#" data-icon="check" data-bind="click: placeBid">Place bid</a>
    </div>
    <div data-role="content">
        <h2 data-bind="text: bid.Caption"></h2>
        <p data-bind="text: bid.Description">

        </p>

        <p data-bind="attr: { auctionid: bid.Id }"><strong>Current bid:<span data-bind="text: bid.Price" class="bid"></span></strong></p>

        <div data-role="fielcontain">
            <label for="bid">
                Your bid:</label>
            <input type="number" data-bind="value: bid.Price" />
        </div>
    </div>
    <div data-role="footer" data-position="fixed">
        <h2>
           Team XSockets.NET 2011
        </h2>
    </div>
</div>

JavaScript

Below is the applications JavaScript code, you will find a quick explanation just below the code snippets

The JavaScript Code above represents the model of the applications, it contains object, arrays and methods. The model consists of an KnockoutJS observable array that detects and responds to changes on collection of objects, in this case auctions. The model also contains some observable objects (bid, auction) , the model is activated by passing it to applyBindings method of KnockoutJS; applyBindings(auctionModel);

There are some methods that needs to be explained a bit, newAuciton triggers using jXSockets API (sends) a message (JSON) event named “AuctionCreated” to the WebSocket ws . worth mentioning is that we need to serialize the auction object to be sent as JSON using the ko.toJS metod. In the callback of the WebSocket trigger we redirects the user to the “ConfirmCreate” view of out application.

When we are dealing with our bids, w pretty much does the same thing, have a look at he placeBid method below.

The show(auction) method “maps” the event argument of the actual auction to be shown , and changes the jQueryMobile page to details. Not that the auction parameter of method is mapped to the bid object of out viewModel, giving us the possibility to keep track of changes and send those to the view and elements linked to each property of the bid object as shown in this codesnippet (markup)

The text element of the <h2> and <p> tag is bound to the auctionModels bid object , when we from our array of object generates the markup using KnockoutJS astute template engine giving us the opportunity to bind our observable observable array to a listview widget (control) of jQueryMobile as shown here;

<ul data-bind="foreach: auctions" id="listofauctions" data-role="listview" data-inset="true">
    <li><a data-bind="click:function() { auctionModel.show($data) }">
        <h2 data-bind="text: Caption">
        </h2>
        <p data-bind="attr: { auctionid: Id }">
            <strong>Latest bid:<span data-bind="text: Price" class="bid"></span></strong></p>
        <p data-bind="text: Description">
        </p>
    </a></li>
</ul>

If we just have a short look at the attributes of the <ul> I suppose that you get point, we got an data-bind attribute saying “foreach:auctions” , this tells Knockout that this is the actual object/array to use for rendering , as you can see in the child elements of the <ul> we got some other data-bind attributes, setting text and attributes of the elements. The <a> tag has an click event defind, telling that when a user click’s we pass the complete auction object to out auctionModel.show(auction)

Inside the detail (placebid) markup above you will find a <a> tag with a data-bind that looks like this;

<a href="#" data-icon="check" data-bind="click: placeBid">Place bid</a>

When the user hits the “Placebid” button the placeBid method of our viewModel is invoked and the following code is executed

ws.trigger("UpdatePrice", ko.toJS(this.bid), function () {
$.mobile.changePage("#latest");
});

We just triggers an and WebSockets event named UpdatePrice and passes the bid object, and within the callback there is a simple redirect.

So what's my point then, this may not be so interesting ? As you may noticed we doesn’t deal with any “incoming” messages yet, nothing is changed in the model at all.

Lets have a look at how we wire up the application to listen to those messages we trigger .

Establish connection to the WebSocket and WebSocket handler

ws = new jXSockets.xWebSocket("ws://127.0.0.1:4502/XSockets.Core.Handlers.Generic", jXSockets.WEBSOCKET);

The code above creates an new connection to our WebSocket Server and Handler, in this case we just use a generic handler ( Receives and broadcasts all incoming messages to all connected clients)

Is the KnockoutAuction open or close?

By subscribing to the “native” events of the WebSocket (open/close) , inside the callback of open you can se that we triggers an message called “LoadAuctions” , and just passes an empty JSON object, what we do here I simulating a call to a server that will respond with the auctions stored in any kind of database

ws.bind("open", function () {
ws.trigger("LoadAuctions", {});
});
ws.bind("close", function () { });

as there is no backend in this example , I just create some when receiving the “LoadAuctions” message. By binding an eventhandler/subscription for the “LoadAuctions” message as follows

            ws.one("LoadAuctions", function (auctions) {
                // Add some sample auctions
                auctionModel.add(new auction(1, "XBox", "This is a test", 1200));
                auctionModel.add(new auction(2, "Playstation 2", "This is a test", 500));
                auctionModel.add(new auction(3, "Volvo v40", "This is a test", 4000));
                auctionModel.add(new auction(4, "Summer house", "This is a test", 10000));
            });

When we receives a messages named “LoadAuctions” I add a few static auctions to the auctionModel by calling the add method of the model. Also note that we are using the .one() method od jXSockets, Why? we just need to listen to “LoadAuctions” once, as we will receive the rest in real-time, as they are created, we don’t need to poll for new auctions all the time…

Listen to new auction

ws.bind("AuctionCreated", function (auction) {
                auctionModel.add(auction);
                $("#listofauctions").listview("refresh");
            });

By just creating a event handler/subscription to the AuctionCreated messages ( triggered from the models newAuctions) we are able to just add it the the models (auctions) , as we use jQueryMobile we also need to refresh the listview widget.

Listen to bids

When a user hits the “Placebid” button ( as shown above) as UpdatePrice message is triggered , the following event handler/subscription will the be invoked.

ws.bind("UpdatePrice", function (auction) {
$("[auctionid='" + auction.Id + "'] span").text(auction.Price);
});

As you see there is an jQuery selecor tracing all the elements containing an attribute called auctionid , the inboud messages id (auction.Id) is appended to the selector then the text node of its child span I set the the “new Price”, this could of can be handled by KnockoutJS and observables as well.

This pretty much explain how the "KnockutAuction” works, and how we can take advantages of WebSockets using the XSockets.NET WebSocketServer.

The code can be studied, executed , edited and tested at jsbin - http://jsbin.com/ukulum/

Links

KnockoutJS – http://knockoutjs.com
jQuery Mobile – http://jQuerymobile.com
XSockets.NET – http://xsockets.net
This code (Markup, JS etc) - http://jsbin.com/ukulum/ ( Requires a WebSocket compatible browser such as Chrome or Safari)
XSockets Free CodeCamp in Stockholm January 2012 – Register now! http://xsocketscodecamp2.eventbrite.com/

Magnus Thor

XSockets CodeCamp #2 - Stockholm

2011-12-07T07:38:00.001+01:00

It's a long time since i wrote anything here at the blog, i have been busy doing stuff in the XSockets.NET project - There is a new nice release coming in december! The team are working very hard right now! In addition to working on XSockets i have been doing lots of HTML5 , JQueryMobile training the latest month. But i manage to start some post, hope to finish em up soon! So what do i have on my mind now?

It's time for an yet another geekmeet in the area of WebSockets, RealtimeWeb and HTML5 !

Our last XSockets CodeCamp was a success - We now come to Stockholm to share with you all the excitement that Realtime-Web has to offer!

CodeCamp #1 - Stockholm

Team XSockets and the premium sponsors is proud to invite you to a 24h long geek/tech semninar/workshop - Teach yourself how to build Real-Time WebApplications on the free XSockets.NET WebSocketServer platform.

When

Friday the 27th of Januari 2012 - 05:00 PM to 22:30 PM (estimated)
Saturday the 28th of Januari 2012 - 09:30 AM to 05:00 PM

More information about XSockets.NET can be found at http://xsockets.net

Where
Cornerstone
Svärdvägen 3A
Danderyd
182 33 Stockholm
Sweden

What ? (Agenda)

What is Real-time
What is WebSockets
Set up a HTML5 WebApp that leverages the true power of WebSockets API and HTML5 .
XSockets Nuget Package - Features and Functions
Connect and work with the WebSocketServer using the JavaScript API's
What is a WebSocket Handler - Use the Generic XSockets WebSockets Handlers
Write simple, customized WebSocket Handlers
Write advanced customized WebSocket Handlers
Learn how to build Real-Time Web Apps using XSockets - Build your Real-Time Web App
Discussions...
Competition - Team up or be a lone ranger. Create your own real-time application and get cool prices.

.. And much more!

After the registration you will receive a proper, full agenda of the CodeCamp and some facts that might be of interest for your 24h geek/tech workshop with us.

Knowledge that might benefit you when you are working with XSockets

You should have worked with C# and .NET
You should have worked with JavaScript and jQuery

Techstuff needed

You will need a PC/Mac/Device
You will need Visual Studio 2010 (Not Express)
You will need Visual Studio 2010 SP1
You will need MVC3
You will need Nuget 1.5 (or later).
You will need a device (PC) capable of connecting to a WiFi (WLAN)

Premium sponsors Wijmo & Cornerstone

Licences, discounts and other very nice stuff is something that our premium sponsors shares with attendants of the CodeCamp!.

We are right now working on sponsors and we will update you all as soon as things fall in place.

Do you wanna be apart of the codecamp and sponsor the event with something? Just contact us on contact@xsockets.net

Welcome with your registration now - there is a limited number of seats available!

Kind regards

Team XSockets

XSockets.NET JavaScript API Improvements

2011-09-19T00:40:00.001+02:00

Just recently we have made some improvements on the JavaScript API’s that’s enables XSocketers to deal with the publish/subscribes patterns of WebSockets development upon the XSockets WebSocket Server for Microsoft Windows, it simplifies the whole thing a bit more. in this blog post I will try to explain a common scenario that you probably will face when developing things on out WebSocket Server.

Before I start I will send some greetings thanks to all of of you that has been sending us good feedback, thank you very much!

Lets start then, first of all I chosen to use a non generic WebSocketHandler – MyCustomHandler, it consists of a single method named OnBroadcast note also that it is exposed with a help of an HandlerEvent attribute

namespace XSocketHandler.PubSubSample
{
    [Export(typeof(IXBaseSocket))]
    public class MyCustomHandler : XSockets.Core.Handlers.Generic
    {
        /// <summary>
        /// HandlerEvent for OnBroadcast using the Message Model
        /// </summary>
        /// <param name="message"></param>
        [HandlerEvent("OnBroadcast")]
        public void OnBroadcast(Message message)
        {
            // Just to illustrare how to create and send (publish) a new event
            var replyMessage = new XSocketEvent<Message>
                                   {
                                       Event = "OnBroadcast",
                                       Data = message
                                   };
            var json = replyMessage.Serialize(); // Serialize the XSocketEvent<Message> as JSON
            // Itterate trough all XNodes ( Clients) and send the "message" (replyMessage)
            foreach (var xNode in XNodes)
            {
                // You can access each XNode (client) payload to do filtering etc. here by using XNode.XSocket.XSocketPayLoadEvent.Data ...
                xNode.Value.XSocket.Send(json);
            }
        }
    }
}

As you see the HandlerEvent is strongly typed saing that we expect an Message , The message is a simple model as shown below.

namespace XSocketHandler.Models
{
    [Serializable]
    [DataContract]
    public class Message
    {
        [DataMember]
        public string Text { get; set; }
    }
}

This is a much more convenient way of dealing with the inbound data compared to calling the underlying XSocketsPayloadEvent of the XNode itself, as shown below

var inboundplayload = this.XSocketPayLoadEvent.Data.DeSerialize<Message>();

This is what we would have been forced to to if our HandlerEvent hasn't been strongly typed.

So, lets have a look at at how we connect to the WebSocket (WebSocketHandler) using the JSAPI

     // Connect to our custom XSockets handler XSocketHandler.PubSubSample.MyCustomHandler
            var wsSocket = new $$.xWebSocket("ws://127.0.0.1:4502/XSocketHandler.PubSubSample.MyCustomHandler", null);
            wsSocket.bind("open", function () {
                console.log("wsSocket WebSocket Handler is open!");
            });
            wsSocket.bind("close", function () {
                console.log("wsSocket WebSocket Handler is closed!");
            });

The snippet above connects us to the WebSocket Handler (server as well ) , as you see we are pointing out our custom handler (XSockets.PubSubSample.MyCustomHandler) , we are also establishing a subscription to the open and close events of the WebSocket by using the .bind (subscribe) method , these two bindings are is an subscription.

Publishing data to the WebSocket handler ( Pub scenario)

We have made some improvements to the publishing areas of the JsAPI, those has been a little confusing to some, so I will try to explain this a bit as follows.

Lets say that we have a button in our web-page named (id’d) btnStart, and by using jQuery a event handler is created for this particular button (btnStart)

   $("#btnSend").bind("click", function (evt) {

                // Create a new WebSocketMessage that corresponds to the OnBroadcast method inside our CustomHandler

                var msgMessage = new $$.WebSocketMessage("OnBroadcast");

                // Add A JSON Object to the WebSocketMessage (Message data)
                msgMessage.AddJson({
                    Text: $("#message").val()
                });

                // Different ways of triggering / publishing messages to a WebSocket Handler
                wsSocket.trigger(msgMessage.PayLoad());

                wsSocket.trigger(msgMessage.Message);
                // Add a WebSocketMessage , add an event handler for onCompleted(args)
                wsSocket.trigger(msgMessage.Message, TriggerOnBroadcastCompleted);

                // Create a new WebSocketMessage 'OnBroadcast", add the 'data' JSON, add an event handler for onCompleted(args)
                wsSocket.trigger("OnBroadcast", { Text: $("#message").val() }, TriggerOnBroadcastCompleted);


            });

As you see a WebSockets message is created by using WebSocketMessage , as well as we adds a JSON object using .AddJson(json) , in out case it reflects XSockets.Models.Message class show above, the JSON representation would look as below;

{ Text:"Hello World!"}

The complete JSON Representation of out WebSocketMessage is an important thing to notice, the JSON representation of the complete Message has the following JSON representation

{
event:"OnBroadcast",
data: { Text:"Hello World"}
}

The event property is the key to the HandlerEvent routing withing the server, but notice this is something the the WebSocketMessage will give you. As you see in the JavaScript snippet just above there is a couple of diffent ways of publish (trigger) messages to the server.

Publish by using the Message property of the WebSocketMessage ( Publish an existing message object)

wsSocket.trigger(msgMessage.Message);

By adding a second argument ( as shown below) , you are able to attach en event handler that will be when the messages is published ( triggered)

wsSocket.trigger(msgMessage.Message, TriggerOnBroadcastCompleted);

The event handler may looks like this, the argument (eventObject) is the actual WebSocketMessage published (triggered)

function TriggerOnBroadcastCompleted(args) {

}

The third and most requested alternative is as follows ,in this case we don’t need to prepare any WebSocketMessage , we just need to pass the name of or Message ( i.e Onbroadcast as the first argument, then we'll pass the data (JSON) that reflects our model, I’ll think you’ll get the picture here.

wsSocket.trigger("OnBroadcast", { Text: $("#message").val() }, TriggerOnBroadcastCompleted);

Subscribing data send by a WebSocket handler

By using the .bind mehod you are able to subscribe to inbound messages at the client side, This is reminiscent of how we handle things in our WebSockets handlers. And can briefly be explained as follows.

Lets say that we also listens to the OnBroadcast WebSocketMessage ( note that a you can of course listen to messages not initialized by your client) , so lets go

wsSocket.bind("OnBroadcast",function (message) {
});

The pice of code above show how you establishes a subscription for inbound messages named “OnBroadcast” , the eventObject (message) will in this example consist of a JSON representation of our Model (Message) , just do be clear I’ll drop the sting representation of the eventObject (message)

{ Text:"Hello World!"}

We would roughly deal with it in this manner;

var text = message.Text; // Giving “Hello World"!”

Inspired by the astute jQuery way of dealing with events and experiences of our own implementations you can now do the following:

One

Triggers the event once and stops subscribing after first hit.

wsSocket.one("OnBroadcast", function (message) {
// do stuff once
});

bind(event,options,fn)

By passing options to the bind method we are able to limit the number of times we listen (subscribes) to the event, by specifying a "counter” object as shown below.

Summary

The things mentioned above are a few new things added to the JsAPI , making the JavaScript related development on XSockets.net a bit more easier, it’s a subset of the forthcoming release.

Yours sincerely
Magnus Thor, Team Sockets

ps.

If you want test the new version of jXSockets (JsAPI) let us know and we will send you a copy, it' is of coz compatible with your existing stuff on XSockets.

WebKinectNinja–WebSockets HTML5 and Kincet magic

2011-09-05T19:43:00.001+02:00

Today I've just published a little demo of how we can build neat things upon the WebSockets API, Kinect and HTML5, inspired by all thoose wonderful Kinecthacks people have been showing and the utterly nice game FruitNinja , a game I can recommend bot for your mobile devices as well as for the XBOX 360 (Kinect)

KinectSDK and WebSockets rock!

We will not delve deeply into the code in this blog post, as this is an very early edition of the game, the plans are to make it public (if possible), enhance the skeleton part e bit more, today it’s just possible to move the “sword” by using the right hand, next version will support the legs, arms and head etc. And it will also draw a skeleton image of the persons connected to the game.

So what is the story then;

By using a WPF application( written in C#) that uses the KinectSDK we are able to easily grab the movements of the actual user in front of the camera, these are then sent to the Web Socket Server (http://xsockets.net) who simply just sending messages through to those who listen, I this case the “game webpage”.

This messages are then sent to the game engine, that deals with the thing.

I will be presenting parts of this during some speaks later on this year (i.e BestOfDevSum) , and hopefully here at the blog as well.

Enjoy this un-edited video and don’t hesitate to ask my anything.

WebKinectNinja (http://bit.ly/rplHCv)–KinectSDK, HTML5 and WebSockets

Video at YouTube ( Best video experience is 1080HD :-)

http://bit.ly/rplHCv

Kind regards

Magnus Thor

Geolocation & XSockets.NET–A simple follow your friend thing..

2011-08-18T17:25:00.001+02:00

During a lunch break today I put together a small demo upon the XSockets WebSocket Server for .NET (Windows), the idea of the application came originally from a friend of mine , asking if it would be possible to du such thing just using HTML5, API’s that comes in the wake of HTML5 itself.

I used a favorite online tool of mine called JSBIN to develop the client (Web page) , I shortly describe what the “thing” does as-well as I will list the main “components” involved, then I will be showing the code itself , the JavaScript things. Further on in this blog post you'll find a URL to JSBIN, that URL will also enable you to clone and hopefully some astute will enhance the thing ( needs some UI fresh up )

A simple app giving a real-time Google Maps Street view experience by just using the browser in you iPhone! – As a friend of mine expressed himself!

So what is the “app” doing then?

By using the GeoLocation API, by using the currentPosition and watchPosition members of the GeoLocation object. We are able to get a one-shot (currentPosition) , the neat thing is that we also are are able to track the users movement. By broadcasting those movements on the WebSockets API (using XSockets.NET) other users is given the opportunity to follow each other upon an embedded map (Google Maps).

it is not much, but the thing gets quite cool (I think so ) if you ask a friend to “logon” and the take a walk, this of course requires a Geolocation, WebSockets enabled browser such as Safari for iPhone and iPad. Do I need a friend to test? No just visit http://jsbin.com/edorut/ with your iPhone and “follow” yourself

Does it work on other devices such as Androids? Yes, it does, but as we use JSBIN as webserver a XSockets.NET dev release not configured to use Fallbacks on Flash etc. Note that we recently added support for Hyby10 and Hybi07 protocols for XSockets.NET ( Also supports the FF6 MozWebSockets prefix ). Enough said about the application.

The WebSockets part I based on the Generic Websocket handler, so there is no specific server side code written for this, I just let the client deal with the small amount of logic that it requires.

Here is a short list of the ingredients used:

JSBIN
JavaScript
jQuery
XSockets.NET
Google Maps

This is the code ( markup and Javascript) – You could also study and clone it on JSBIN - http://jsbin.com/edorut/

HTML

There is not much to mention, just some simple markup, unfortunately I did not have the time to add jQuery Mobile to get a better UI (feel free to clone fix )

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.2.js" type="text/javascript"></script>
    <link type="text/css" rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/themes/ui-darkness/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.js"></script>
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
    <script type="text/javascript" src="http://xsockets.net/js/JXSockets.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
    <style>
        #broadcasters a
        {
            display: block;
            margin: 4px;
            text-decoration: underline;
            color: blue;
            cursor: pointer;
        }
        body
        {
            font-family: Verdana;
        }
    </style>
</head>
<body>
    <div id="signup">
        <h1>
            ISpy - Follow your friends?</h1>
        <p>
            Based on <a href="http://xsockets.net" target="_blank">XSockets.NET</a> (Generic
            Handler) and Geolocation + GoogleMaps</p>
            <p>
              When you logon you will see a list of users, click one of thoose ( including yourself)
      </p>
        <label for="nickName">
            Nick name:</label>
        <input type="text" id="nickName" name="nickName">
        <button>
            GO</button>
    </div>
    <div id="broadcasters">
    </div>
    <div id="map" style="width: 100%; height: 440px">
    </div>
</body>
</html>

JavaScript

I will not explain the code as you are able to study, modify and do whatever you desire at JSBIN – http://jsbin.com/edorut/

Enjoy, and let me know if you clone and do stuff to enhance, or if you got any questions regarding this or the XSockets.NET WebSocket Server

Kind regards

Magnus Thor

CodeCamp in Sundsvall–WebSockets and XSockets.NET

2011-08-15T12:39:00.001+02:00

CodeCamp #1

Team XSockets and the main sponsor XLENT invites you to a 24h long geek/tech seminar/workshop - Teach yourself how to build Real-time Web Applications on the free XSockets.NET WebSocket Server platform.

More information about XSockets.NET can be found at http://xsockets.net

Agenda - Workshops

What is WebSockets
Set up a HTML5 WebApp that leverages the true power of WebSockets API
XSockets Nuget Package - Features and Functions
Connect and work with the WebSocket Server using the JavaScript API's
What is a WebSocket Handler - Use the Generic XSockets WebSockets Handlers
Write simple customized WebSocket Handlers
Write advanced customized WebSocket Handlers
Learn how to build Real-time Web Apps using XSockets - Build you Real-time Web App
Discussions

.. And much more!

After the registration you will receive a proper, full agenda of the CodeCamp and some facts that might be of interest for your 24h geek/tech workshop with us.

Knowledge that might benefit you when you are working with XSockets

You should have worked with C# and .NET
You should have worked with JavaScript and jQuery

Techstuff needed

You will need a PC/Mac/Device
You will need Visual Studio 2010 (Not express)
You will need a device (PC) capable of connecting to a WiFi (WLAN)

Sponsors

Welcome with your registration now - there is a limited number of seats available! - Register here

Kind regards

Team XSockets 2011

WebSockets playground at JSBIN

2011-07-04T16:19:00.001+02:00

Emperor's New Clothes, approximately one year ago wrote a demo application on an early version of todays released XSockets WebSocketServer.

The demo was a simple chat that uses WebSockets together with plain old AJAX; it’s gives the user the possibility to chat in its native-language (writing). By using the Bing API’s for translating, incoming messages will be translated automatically, giving a real-time-native-language-chat.

Real-time-native-language-chat using WebSockets + Bing Translate = Something neat?

Now you can find the demo app + code on the jsbin – Some kind of playground for XSockets (?) is found at http://jsbin.com/ojuhoy . You will be able to clone and enhance the demo of you have such an idea – I look forward to see such work for all of you!

It's build upon a Generic WebSocket Handler and the XSockets WebSocket-Server, the simplest way you can build real-time-web-apps?

In addition to the jsbin playground , we just recently made it possible for you download and setup an development environment of your own, pay a visit to http://xsockets.net for father information in that matter

So what more to say? Yes, I must mention ; jsbin a utterly good tool for debugging and playing with JavaScript development – giving us possibility to do collaborative debugging + development just using the browser. Have a look at http://jsbin.tumblr.com/ for tutorials

Links

JS Bin - Collaborative JavaScript Debugging – http://jsbin.com
XSockets.net – WebSockets Server for Windows – http://xsockets.net

Kind regards

Magnus Thor

LiveDB + WebSockets via XSockets - lightning fast!

2011-06-28T11:01:00.001+02:00

liveDB + XSockets = true

Yesterday we made a few lab's where we combined the liveDB in-memory-database engine for .NET and XSockets.

We found out that liveDB hand in hand with XSockets is a fine recipe,it brings a lightning fast data access, the possibility work with plain objects as we do in XSockets the liveDB engine transparently take care of persistence and consistency.

The liveDB technique is really simple. The entire data model is maintained in memory, you are able define commands that modify the model, write queries towards the model using LINQ for an example.

Those commands and queries are invoked by the WebSocketHandler designed to for this purpose, this will be illustrated in the video shown below as well as we will create a example if this an “bundle” I in the next NuGet package of XSockets.

At the WebSocket Server startup or after some kind of failure, the liveDB engine restores the in-memory database to its previous state.

This is a code snippet WebSocket handler Event that broadcasts all entities from the model to a WebSocket Client, in this case a list of entities.

/// <summary>
/// List all Questionings
/// </summary>
[HandlerEvent("ListQuestioning")]
public void List()
{
    try
    {
        var xSocketEvent = new XSocketEvent<List<LiveDB.Entities.Questioning>>
                                {
                                    Event = "OnListQuestioning",
                                    Data =
                                        LiveDbInstance<QuestioningModel>.GetInstance().Execute(
                                            LiveDB.Queries.Questioning.All())
                                };
        // send to the socket invoked the event
        XNode.SendTo(xSocketEvent.Serialize());
    }
    catch (Exception)
    {
        throw;
    }
}

You can read more about WebSocketHandler and the “Handler Event” attribute at http://xsockets.net/Documentation/Index.

LiveDB + WebSockets (Using XSockets)

Links

XSockets.net – Takes you a step towards real-time web (API + Download and more)
LiveDB - A native .NET in-memory database engine
LiveDB + WebSockets (Using XSockets) at YouTube

Magnus Thor

XWebSocket Server as Nuget –Start develop Real-Time WebApps on WebSockets

2011-06-21T23:33:00.001+02:00

XSockets – Brings you WebSockets

Today we published a NuGet package containing a .NET based WebSocket Server – Giving you all the possibility to start test and develop Realtime-Web Applications upon the WebSockets-API ; a JS API that enable bidirectional communication , with almost zero latency; You probably heard it before.

By using a NuGet package , you’ll get a quick-start, the API and some instructions are can be found at (http://xsockets.net), if you get a 404 , you are a really early adopter , we just made the DNS changes.

So what will it give you, XSockets can be summarized as follows:

Quick-start using NuGet packages and Scaffolding
Scaffolding new handlers with example client code
Plugin architecture for protocols (at runtime)
Plugin architecture for handlers (at runtime)
Strongly Typed Model Binding
JavaScript helpers
Fallback via Flash & Silverlight
Hixe75, Hiby00 and Hybi07 (beta) support - And more

At the website you will find more information, videos and a very early version of the API, but as sad earlier in this post the NuGet package will help you out.

Enjoy and please let us know if you download, run into some problems, question, what ever!

Here is a Video showing how easy it can get ( Thanks Ulf for the great work of yours )

XSocket NuGet installation–Quickstart on WebSockets

Links

xsockets.net http://xsockets.net
NuGet gallery (XSockets) http://nuget.org/List/Packages/XSockets
WebSockets API - http://dev.w3.org/html5/websockets/

Kind regards

Magnus Thor

WebSockets Hiby07 work in progress! Here is a new simple WebSocket demo..

2011-06-15T19:22:00.001+02:00

It has been a while since I wrote anything here at my blog, but I suppose that I’m excused? I have been busy with with nice and inspiring things such as Devsum2011 , a fantastic event hosted by Cornerstone. At DevSum2011 I was given the opportunity to share my thoughts regarding the WebSockets API that’s comes in the wake of HTML5 among a bunch of several other very interesting API. My session was named The real-time web is here, has AJAX reached the end of the road?

Is this true? Has AJAX really reach the end of the road? NO, is the answer, but our application that relays on our browser will sure change, as well as out view on applications and OS?

So , what do I have in mind? First of all I want to share some information regarding the WebSocket Server of ours ( UlfBjo’s and mine) called XSocketServer (Working title) , we are now running a beta implementation of Hybi07 ,today only found in Firefox nightly’s? But! In this entry I want to share a little thing that uses HTML WebSockets API, FileAPI and the Drag’n drop capabilities of HTML5.

By using those three API’s we are able to let the user drag images from its client (desktop) to the webpage, drop the files on a specific element, read the file and encode it contents as Base64 and broadcast it upon WebSockets; This will give us a very simple “image sharing” application as shown in the video below.

HTML5 FileAPI + WebSockets + Drag’n drop http://bit.ly/jFTou2

Problems viewing; Click here

Here is a brief description of how this was assembled.

The WebSocket Server chosen is as mention above the XSocketServer , that is a competent WebSocket Server running upon the .NET Framework, as shown in earlier post here it can deal both with custom WebSocket Handlers as well as handlers that contains specific logic and methods, in this case we are using the Generic handler, that can be described as follows.

“All messages sent to the socket (WebSocket) is forwarded to each and every connected WebSocket no matter of protocol version or event, it is also send back to the sender itself”

So, this is the JavaScript (using jQuery) as well as HTML5 native stuff, I tried to add some comments to the code and hopefully it is good enough ?

JavaScript.

$(function () {

    // If we dont have HTML5 Native Drag'n drop , show the file input
    if ('draggable' in document.createElement('span')) {
        $("#uploadFile").hide();
        var info = $("<span>").text("Drag and drop image file/files to the box above");
        $("#info").append(info);

    } else {
        var info = $("<span>").text("Choose your image files.. ");

        $("#info").append(info);
    }

    // Enable drag 'n drop, prevent default behavior
    var dropzone = document.getElementById("filelist");

    dropzone.addEventListener('dragenter', function (e) {
        e.stopPropagation();
        e.preventDefault();
    }, false);

    dropzone.addEventListener('dragleave', function (e) {
        e.stopPropagation();
        e.preventDefault();

    }, false)
    dropzone.addEventListener('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
    }, false)

    // When a file/files are dropped, deal with the file/files
    dropzone.addEventListener('drop', function (e) {
        e.stopPropagation();
        e.preventDefault();
        console.log(e);
        $(e.dataTransfer.files).each(function (i, file) {
            dealWithFile(file);
        });
    }, false);

    // Create an WebSocket using jXlent (helper)
    var ws = new $$.xWebSocket("ws://127.0.0.1:4502/XSocketSolution.XSocketCommon.Handlers.Generic", jXlent.WEBSOCKET);

    // When we got a WebSocket connection bind the onFileReadComplete event
    ws.bind("open", function () {
        console.log("WebSocket is open!");
        ws.bind("onFileReadComplete", function (file) {
            $("<img>").addClass("thumbnail").prop("src", file.Base64).appendTo("#recivedImages");
        });
    });

    // If the user select files using the <input type="file"/> element
    $("#uploadFile").change(function () {
        $(this.files).each(function (i, file) {
            dealWithFile(file);
        });
    });
    // Deal with the selected or droped file
    function dealWithFile(file) {
        var reader = new FileReader();
        reader.onload = (function (readFile) {
            return function (e) {

                // Append the file to the UI,show what file we are about to send
                var image = $("<li>").text(readFile.name).appendTo("#files");

                // Create a WebSocketMessage (WebSocket Event) named onFileReadComplete and attach the data (file) as base64
                var wsbSocketMessage = new $$.WebSocketMessage("onFileReadComplete");

                wsbSocketMessage.AddJson({
                    FileName: readFile.name,
                    Size: readFile.size,
                    Base64: e.target.result
                });
                // Send the WebSocket message
                ws.trigger(wsbSocketMessage.PayLoad());
            };
        })(file);
        // get base64 (Data URI Schema)
        reader.readAsDataURL(file);
    }

});

The markup is as simple as this.

    <h1>
        HTML5 FileAPI,Drag'n Drop + WebSockets</h1>
        <p>
        A simple reatime ImageSharing experience
        </p>

    <input type="file" id="uploadFile" multiple />
    <h2>
        My shares</h2>
    <div id="filelist">
        <ul id="files">
        </ul>
    </div>
    <p id="info">
    </p>
    <h2>
        All shares</h2>
    <div id="recivedImages">
    </div>

I chosen to to add the CSS to the entry the reason is not much CSS applied at all, so it is not worth to mention.

Links:

Video at youtube -http://bit.ly/jFTou2

Enjoy

Magnus Thor

HTML5 WebSockets, sending binary data (Base64) and embedding using data:URI Scheme

2011-04-05T18:50:00.001+02:00

The data:URI scheme enables us to include text,images and audio object directly into our webpages using code instead of using external files, saving valuable HTTP requests I noticed that someone wrote some place at the internet.

…saving valuable HTTP requests ?

I haven't really seen the real use-case of this until I was in a customer meeting today, showing the progress of an ongoing project where we use HTML5, WebSockets and JQueryMobile

In this blog post I will show you how we can use the data:URL scheme and WebSockets, a small function in the generates a Bitmap, Base64 encodes and passes the image to the client, this for sure saves valuable HTTP request ?!

The sample code below is based on the jXlent (WebSockets API helper/extender) and the WebSocketServer that me and UlfBjo has been working on.

I’ll start describing it from the client side

First of we need to connect to the WebSocket

var ws = null;
if (ws == null)
ws = new jXlent.xWebSocket("ws://myserver:4502/Xlent.WebSocket.Handlers.Stub", null);

jXlent is a JavaScript helper class (WebSockets API extender) that includes functionality such as WebSockets detecting , fallbacks based on Flash or Silverlight and methods for WebSocket message (JSON) construction and a JQuery like way of registering event handlers and triggering events.

ws.bind("open", function () {
    var msg = new jXlent.WebSocketMessage("GenerateImage").AddProperty("Color", jXlent.DataType.String);
    msg.DataObject.Color = "Red";
    msg.AddObject();
    ws.trigger(msg.ToJson());
});

When the WebSockets is open, a initial message is created called GenerateImage , the WebSocket handler (server) contains a event handler that will generate the image.

The WebSocket handler is written in C# and looks like this

namespace Sample.WebSocket.Handlers
{
    [Export(typeof(IWebSocket))]
    public class Stub : XSocketSolution.XSocketCommon.Handlers.Generic
    {
        [HandlerEvent("GenerateImage")]
        public void OnGenerateImage()
        {
            var bmp = new Bitmap(100, 100); // create the Bitmap (image)
            var objGraphics = Graphics.FromImage(bmp);
            objGraphics.FillRectangle(new SolidBrush(Color.Blue), 0, 0, bmp.Width, bmp.Height);
            var ms = new MemoryStream();
            bmp.Save(ms, ImageFormat.Jpeg);
            var base64 = Convert.ToBase64String(ms.GetBuffer()); // Convert to Base64
            ms.Close();
            bmp.Dispose();
            var response = new WebSocketResponseMessage<IList<ImageResponse>>
                               {
                                   Data = new List<ImageResponse>
                                              {
                                                  new ImageResponse
                                                      {Base64 = base64}
                                              },
                                   Event = "GenerateImageResponse"
                               };
            var data = response.Serialize(); // Serialize the WebSocketResponse message as text (JSON)
            foreach (var user in Users)
            {
             user.Value.WebSocket.Send(data);   // Send the "message" to all "connected" users
            }
        }
    }
    /// <summary>
    /// Simple class representing or image
    /// </summary>
    [Serializable]
    [DataContract]
    public class ImageResponse
    {
        [DataMember]
        public string Base64 { get; set; }
    }
}

There is not much to day about the OnGenerateImage other than it corresponds to the WebSocket event defined in the JavaScript above and that is creates a WebSocketResponse object , adds the Base64 encoded “bitmap” and gives the message an Event name called GenerateImageResponse, the event name will that will be used to route the message to the correct event handler at the client, this looks like this

ws.bind("GenerateImageResponse", function (data) {
    $(data).each(function () {
        $("#myImage").attr("src", "data:image/jpg;base64," + this.Base64);
    });
});

The JSON object (data) created in the client looks like this :

By setting the src attribute of myImage (<img/> ) to data:image/jpg,[base64] we are able to “display” and image that is generated in the WebSockets on demand of the client, passed back over WebSockets and displayed, this saves HTTP requests, and probably some time?

This is the result

Summary

The purpose of this little entry is to show how we cane send binary data (base64) using WebSockets, include it into our webpages, replace traditional HTTP request with WebSockets, giving us new possibilities making us think different?

Of course there are disadvantages, very old browsers does not support the data:URI scheme, the textual representation of an image eats more bytes than a regular binary image as well as there are size limitations , 1,204 bytes is the size a browser is required to support (I may have wrong).

Magnus Thor

jQuery Mobile , MVC3 and Razor View Engine,JavaScripts and AJAX loading.

2011-03-18T00:47:00.002+01:00

The latest two weeks I have been given the opportunity to do some development upon the jQuery Mobile framework, Microsoft MVC3 and Razor (View Engine) plus our WebSocket Server and I must say it has been a wonderful journey. During an early stage in the project I run into some minor problems , I want to share this with you, and the solution we came up with, hopefully it can give you something, or maybe create a bit of feedback that we can use?
I have put together a sample Web App , chosen Razor as the MVC View Engine and to use a layout page (ASPX synonym for layout page is master page). As we target the web app to run on mobile devices such as iPhone and Android.
The web consists of three very simple views ; Home, About and Sample, which all rely of the layout page (master) .
As jQuery Mobile includes a very useful and powerful mechanism for automatic AJAX of pages with back history support , animated page transitions and events related to those pages we need to understand the anatomy of those page.
The page structure of jQuery Mobile starts with a HTML5 doctype, further on references to jQuery, jQuery Mobile and css files, as well as custom JavaScripts (yours).

jQuery Mobile brings a rich, native-like experience that can't be achieved with standard HTTP requests.

In our case we noticed that we in an early stage the amount of scripts grow rapidly.

Razor Layout page

The layout page _Layout.cshtml of mine looks like (also see Mobile page structure at jQM )

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="/Content/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
    <script src="/Scripts/Views/Shared/_layout.js" type="text/javascript"></script>

</head>
<body>
    @RenderBody()
</body>
</html>

The last script resource of mine pointing to /scripts/Views/Shared/_layout.js reflects to structure of out MVC3 Application (/Views/Shared/ ) where the layout page is located .
As “pages” as AJAX fetched and inserted into the into the DOM we cant put “JavaScript” into those as we are used to therefore we run into a problem; The amount scripts code will down us, as well as the maintenance could be an issue in the future?

The events of jQuery Mobile is impressive

Page Initialization

Page Initialization events brings you the possibility to manipulate the “page” either pre-or-post the initialization, this events will only fire once per “page”.
pagebeforecreate is triggered when the page is being initialized and before the initialization, pagecreate triggers on the page being initialized and after initalization.
This is very useful, by using those events we can load JavaScript resources bound the the “page” being created , this is our solution of the problem.
Before we look at how we uses those events to solve our problem we need to go back to the anatomy of the jQM page.
Inside the “page” (Razor View ) we added a <div> tag with the data-role=”page” , this is an immediate children of the page among with other data-roles such as header, content and footer ( as shown blow ) , as I mentioned above out sample consists of three views (home,sample and about) where “home” is the start (will not be AJAX loaded ) .
Sample “Page” (Razor view)

<div data-role="page" class="views sample index" id="sampleIndex">
<div data-role="header">
<h1>
    Header for sample</h1>
</div>
<div data-role="content">
<h1>
    Hello sample!</h1>
<div class="placeholder">
</div>
</div>
<div data-role="footer">
<h4>
    Footer for sample</h4>
</div>
</div>

The sample view about has a data-role of page and I have given it the id of sampleIndex (View & Action) . This is the complete content of our view.
As the layout page (master ) is referring to a “site wide” scriptfile (/scripts/view/share/_Layout.js) we are able to fetch / insert scripts to the “DOM” as well, the snippet below is a fragment of our thing.

$(function () {
    $("div[data-role='page']").live("pagebeforecreate", function (event, ui) {
        var jsResource = $(this).attr("class").split(" ").join("/");
        if (jsResource.length > 0)
            $.getScript("/scripts/" + jsResource + ".js").fail(function () {
                console.log(jsResource + " could not be loaded.")
            }).done(function () {
                console.log(jsResource + " loaded.")
            });
    });
});

The script above is loaded once, and by using .live (jQuery) we are able to attach event handlers for elements that matches the current selector, now and in the future. in our case ; The the pagebeforecreate occurs on a <div> having the data-role of page.
When this event occurs on “any” page, we use the class attribute the page being initialized (fetched & inserted ) to assemble a JavaScript url.

<div data-role="page" class="views sample index" id="sampleIndex">...

As shown above the “class” attribute says “views sample index” ,giving us a url after some sting manipulation (i.e views/sample/index.js ), that reflects the Razor view or Page loaded (?) ( See image to right)
By using the jQuery getScript method its loaded and appended to the “DOM”

JQuery Mobile Events

When a page is shown or hidden in jQM two events are triggered.
pagebeforeshow is triggered on the page being shown before the transitions begins
pageshow is triggered on the page being displayed after its transitions are completed.
By attaching events handler to those we are able to execute upon the content od those pages both on show and hide, in your case we are appending data from AJAX calls (JSON/JSONP), WebSockets and render content by using Razor as well as render HTML Content by using jQuery tmpl.
So the contents if the scripts our looks like this.

$("#sampleIndex").live("pageshow", function () {
    console.log("pageshow");
    $(".placeholder").text("Hello Sample Page Placeholder");
});

$("#sampleIndex").live("pagehide", function () {
    $(".placeholder").empty();
});

Some explanation of the JavaScript above (/Scripts/Views/Sample/index.js) read like this.
As we have the page data-role the name we are able to attach and event hander, in this case it sets the text of the placeholder class as well as it sends a text to the console?
Summary
This is a fragment of our solution, I hope I will start a discussion, and I know that there a other ways of doing this , the possibility to extend and override other events of jQuery Mobile may be another way.
Kind regards
Magnus Thor

Questions regarding our WebSockets API bridge (shared)

2011-02-25T09:37:00.001+01:00

Yesterday after I published the blog post regarding the WebSockets API bridge (A Silverlight (HTML5) WebSockets bridge up and running!) I got a few questions via email and telephone, as we care so much about WebSockets we share those here.

Q: What protocol versions does the bridge support?

A: It supports and runs (tested) on –75,-76 (aka draft-ietf-hybi-thewebsocketprotocol-00) version of the protocol. As the WebSocket Server of our also deals with “regular-sockets” , we are also able to run those.

Q: How about Mac?

Hmm, yes, as we have been doing this for a while, we have of course made tests at the Mac platform, Safari for Mac as well as iPhone and iPad do support native WebSockets, it also deals with the Silverlight 4 runtime. So it is not an issue. We also started the work on a Flash bridge and it is in progress.

Q: The performance of the bridge versus the native WebSockets API?

A: We can see a slight decrease in performance on communication-intensive Websockets implementations (client side)

Q: If we do not run Silverlight?

A: If you don’t run Silverlight or have a WebSocket compliant browser such as Google Chrome , Safari , then you cant use WebSockets , we are working with a Flash bridge ( se above) . There is still options, Of course, you can he a AJAX (http) case back to your real-time web application? But it will not be bi-directional nor as fast as the WebSockets API / Silverlight bridge solution.

Q: Tell me more about the Silverlight bridge, how does it work?

A: Yes, hmm.. It is quite simple, it is a proxy/bridge running at the Silverlight runtime, I consists of a simple JS API that contains a few events, onmessage, onopen,onclose (as WebSockets API) a method for sending (.send(sting)), the JavaScript API, detects and also gives the opportunity to add event handlers to the WebSocket-Message-objects, as well as triggering those events. Our WebSocket server and its belonging WebSocketHandlers has a Message objects that looks like this (JSON)

var sampleMessage =
                    {
                        event: "MyEvent",
                        data:
                        [
                            {
                                MyEventArgumentString: "Hello WebSockets everywhere!",
                                MyEventArgumentInt: 1,
                                MyEventAgumenttBoolean: false
                            }
                        ]
                    };

By using he JavaScript API, you bind event handlers are to those object (messages) by using i.e myWebSocket.bind(“MyEvent”,fn) no matter if you use native or bridged-Websockets using Silverlight

This is pretty much the concept

Magnus

A Silverlight (HTML5) WebSockets bridge up and running!

2011-02-24T13:10:00.001+01:00

WebSockets enabled in Non-WebSockets-Supporting-Browsers by using Microsoft Silverlight

Edited: 2011-02-25: We hade some changes to the JavaScript API, these are further explained at my astute co-programmer UlfBjos’s blog, have a look at it here http://average-uffe.blogspot.com/2011/02/javascript-for-websockets-with-failover.html , instead of detecting the support, using different classes and dealing, its not possible to just use a (quote Ulf) “oneliner” to do the thing,

(ws = new webSockets("ws://127.0.0.1:4502/XSocketSolution.XSocketCommon.Handlers.Generic")).

The problem that some browsers do not currently support WebSockets API is a challenge, the specification for WebSockets API is a living document which is perhaps the main reason for example, Internet Explorer does not currently have support for this API.

Google Chrome, Safari and a few others has been supporting the existing specifications, which also enables us developers and users to have the chance to influence.
Devices like iPhone and iPad gives us the opportunity to run WebSockets and delivering Web applications that enable two-way communication in full duplex, as well as we can deliver the same "experience" in our traditional computers using the browser chosen to support WebSockets API today.

Given that I, together with Ulf Björklund developed a server platform for WebSockets, an API to produce their own so-called Plug-ins for this, we find it extremely important to give everyone the chance to experience real-time Web.
To get it to work, we have developed a WebSocket-bridge in Silverlight, which we can fall back on, the bridge "API" is like WebSockets API of four events, onmessage, onopen, onclose and onerror and a constructor which expects a URL (ws: / wss:) and a method to send a message.

The bridge is based on Silverlight, and uses the System.Net.Sockets namespace.

Using JavaScript capturing the Web page instance allowing the WebSocket bridge all of these events, shows how we know whether the browser has support for WebSockets or not and depending on the used bridge, we use a custom JavaScript library influenced by the way we subscribe and trigger events in JQuery.

Below you find a code example. (JavaScript code)

If you are interested in further information or cant wait until we launch the website where you will be able to download, host and play with our WebSocketserver and its surrounding technologies, don’t hesitate to leave a comment, question or shoot me an email.

You will find some other info regarding our WebSocket project here at my blog as well as on Ulf’s blog , and for “realtime” news, and insights follow me on twitter http://twitter.com/dathor

Links

Modified and simplified version explaind by Ulf - http://average-uffe.blogspot.com/2011/02/javascript-for-websockets-with-failover.html

Kind regards

Magnus Thor

Hijacking Incentive with WebSockets

2011-02-15T23:42:00.001+01:00

Incentive offers a great products that improves your business by revitalizing internal communications with social media features.

It is an impressive products and I recommend you all to give it a try – Visit incentivecorp for further information

So, what is this post actually about then? To test yet another use-case or area of usage of the WebSocket server I have been writing about I hade an idea of trying to add some WebSockets functionality to Incentives Microsharing functionality – bring a real-time experience to it by using WebSockets.

So by using the WebSocket Server or WebSocket fundament of mine and a so-called generic WebSockets Handler, it contains no specific business logic at all it just sends the messages forward to everyone connected to the actual WebSocket and handler. A a real implementation would of course do so.

So by inspecting the “markup” of Incentive's statues widget I manage to write this piece of code, that depends on JQuery and JQuery.tmpl and a few small JavaScript's more (a WebSocket helper and JSON2) .

Below you find the “template” that renders the WebSocket Message ( did some digging into Incentive to make it look almost ok, sorry guys)

The snippet above has nothing to do at all with WebSockets , it is just a very convenient way of dealing with rendering HTML markup, so the next step was to write the WebSocket / Client , it ended up in the following JavaScript , just must note that this is a prototype, it doesn’t care at all of the undelaying entities of Incentive, the handler does not store the “statuses” yet, this is something that will be placed in the “real” WebSocket handler.

$(function () {
    wsIncentiveLive = new webSockets("ws://127.0.0.1:8181/XSocketSolution.XSocketCommon.Handlers.Generic");
    wsIncentiveLive.bind("close", function () {
        console.log("WebSocket is closed");
    });
    // If the WebSocket is open Hijack
    wsIncentiveLive.bind("open", function () {
        $(".textboxcontainer ~ a").bind("click", function (e) {
            e.preventDefault(); // Prevent the default event to fire off
            var jsonStatus =
                    {
                        event: "OnStatusPost",
                        data:
                            {
                                text: $(".statuswidget .content .textboxcontainer .textboxbg .textbox").val(),
                                user: "Magnus Thor",
                                time : "Right now,instant",
                            }
                    };
            wsIncentiveLive.trigger(jsonStatus); // broadcast , send..
        });
        // What to do then we got a status post from the WebSocket
        wsIncentiveLive.bind("OnStatusPost", function (msg) {
            $("#tmplStatus").tmpl(msg).prependTo(".statuswidget").fadeIn();
        });
    });
});

The code snippet above is almost everything that is needed for the “demo/hijack/prototype”, by connecting the the WebSocketServer in this case at localhost , binding a few events such as WebSocket open and close, as well as a event for the “send” button , preventing the default event of Incentive to trigger then assembling the JSON that very briefly defines the object to broadcast ; Statustext, user and a time (actually in this sample a sting saying “instantly” ) then its sent to the “WebSocket” handler by triggering the event.

In the end of the script there is a .bind(“OnStatusPost”), this eventhander deals with the incoming messages , and what is does can by described as render a status by using the template shown above.

As the WevbSocket Handler broadcasts (sends) the message to everyone there is no need for us the add the actual status created by myself, as I will receive it anyway , as well as everyone else “connected” to the WebSocketServer?

So why I’m I writing this post? On reason is of course that we want to show you how simple it can be, that probably the main reason, another one is to show my colleges another type of use-case of WebSockets as it can be difficult to explain sometimes.

Video (Showing the thing in action :-) )

Incentive Live on WebSockets

Links

Have a look at Incentive at http://incentivecorp.com
My astute colleague Ulf Björkund (UlfBjo) blog at http://average-uffe.blogspot.com/ (Thanks for the fantastic work)

Magnus Thor

Creating a WebSocket Web Application?

2011-02-14T23:17:00.001+01:00

As you may have noticed I have been doing some development in the area of WebSockets. During 2010 I manage to publish a few demos at http://kampanj.xlent.se/sockets, all of those demos has been built upon a Microsoft Windows based server application influenced by the way we can add HTTP Handlers and Modules to Internet Information Server.

I will try to explain how it all works

Upon a each service(WebSocket Server) running , we are able to add what I call WebSockets handlers, those are associated with a particular assembly providing a different set of functionality. Most of the demos and things we made so far are all based on a Generic WebSocket Handler (also explained by ulfbjo) , that simply can be explained as follows:

The server registers the users, and listen to incoming messages and grabs message (JSON) sent by the client via the WebSockets API , when a message is received by the server and attached to a handler, it broadcasts (sends) the message to all users connected to the particular handler.

This means that no specific logic exists in within the handler as shown by below:

using System.ComponentModel.Composition;
using XSocketSolution.XSocketCommon.Handlers;
using XSocketSolution.XSocketCommon.Sockets;

namespace XSocketSolution.XSocketHandlers.Xlent
{
[Export(typeof(IWebSocket))]
public class Canvas : Generic{}
}

The code below is a WebSocket handler for a demo called Canvas on WebSockets bringing connected users the possibility to create a simple painting on a HTML5 canvas together. As you can see there is not much code at all for creating simple webSockets handlers at all.

At the client side we put together JavaScript Object (JSON) as shown below:

{ event: "draw", data: { user: me, point: p} }

This is serialized as a sting en send to the WebSocket server (handler) the send back to the sender as well as all other users, by grabbing the incoming messages:

ctx.fillStyle = msg.point.color;
ctx.fillRect(msg.point.x, msg.point.y, msg.point.brushSize, msg.point.brushSize);

As we use the generic version there is no need of specific event handlers within out WebSocket handler (show above) , but to explain the thing further more the we could add a specific event hander to the Canvas WebSocket handler and the “draw” event as show below;

void Canvas_OnDraw(object sender, OnIncommingArgs e)
{
// do stuff just in the event 'draw' as shown in the JSON above
}

the event Canvas_OnDraw is ha it origin in the object (JSON) { event : “draw” } shown in the snippet above.

This should give you a clue, you can also have a look at Ulf post regarding writing plugins for my (our) WebSockets Server at the following url http://average-uffe.blogspot.com/2011/02/developing-plugins-for-dathors.html. He also posted a blog entry describing how he did some powershell & wmi stuff upon the WebSockets server.

Ulfbjo’s post regarding WMI, PowerShell and WebSockets brings an interesting use-case to how we can user WebSockets!

As en ending of this post I will show you the JavaScript code of the client-code of the HTML5 Canvas on WebSockets :

$(function () {
            var ws = new webSockets("ws://127.0.0.1:8181/XSocketSolution.XSocketHandlers.Xlent.Canvas");

            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");

            var offset = $("#myCanvas").offset();
            var p = {
                x: 0,
                y: 0,
                brushSize: 8,
                color: "red"
            }

            var me = uniqid();
            ws.bind("open", function (msg) {
                ShowMessage("Connected to socket server...");
                ws.trigger(
                    {
                        event: "connection",
                        data: { user: me}
                    }
                    );
                ShowMessage("You are know as " + me);
            });
            ws.bind("connection", function (msg) {
                if (msg.user != me) {
                    ShowMessage("User '" + msg.user + "' is connected and ready");
                } else ShowMessage("I was just telling people you are ready ....");
            });
            ws.bind("close", function (msg) {
                ShowMessage("Closed..");
            });
            ws.bind("reset", function (msg) {
                ShowMessage(msg.user + " cleared the canvas");
                ctx.clearRect(0, 0, 600, 600);
            });

            ws.bind("draw", function (msg) {
                console.log(msg);
                ctx.fillStyle = msg.point.color;
                ctx.fillRect(msg.point.x, msg.point.y, msg.point.brushSize, msg.point.brushSize);
            });
            /// Capture mouse events (move & hold) , broadcast a message to evenryone including me.
            $("#myCanvas").mousehold(0, function () {
                ws.trigger({ event: "draw", data: { user: me, point: p} });
            }).mousemove(function (e) {
                p.x = (e.pageX - offset.left);
                p.y = (e.pageY - offset.left) - 64;
            });
            // Color selector
            $(".color").bind("click", function (e) {
                p.color = $(this).css("background");
            });
            // Change BrushSize
            $("#range").bind("change", function (e) {
                p.brushSize = $(this).val();
            });
            // Save Canvas
            $("#saveImage").click(function (e) {
                e.preventDefault();
                var r = canvas.toDataURL("image/png");
                top.location.href = r;
            });
            // Clear Canvas
            $("#clearCanvas").click(function (e) {
                e.preventDefault();
                ws.trigger({ event: "reset", data: { user: me} });
            });
            // Display a message...
            function ShowMessage(msg) {
                $("<p>").text(msg).prependTo($("#ShowMessage"));
            }
            /// Generate a Uniue (relative :-) identity for me
            function uniqid() {
                var newDate = new Date;
                return newDate.getTime();
            }
        });

The markup of the “app” looks like this, I don’t know if it interesting but it may give you a clue of how easy it actually can be?

<h1 style="margin: 0px; font-size: 14px">
        HTML5 Canvas Paint on WebSockets
    </h1>
    <p style="margin: 0px 0px 5px 0px">
        <a style="font-size: 11px" href="/Sockets/">Five HTML5 Demos on WebSockets</a>
    </p>
    <div id="toolbar">
        <div class="color" style="background: Red">
        </div>
        <div class="color" style="background: Green">
        </div>
        <div class="color" style="background: Blue">
        </div>
        <div class="color" style="background: Black">
        </div>
        <div class="color" style="background: Purple">
        </div>
        <div class="color" style="background: White">
        </div>
        <div class="color" style="background: Yellow">
        </div>
        <label>
            Brush size</label>
        <input type="range" id="range" min="4" max="20" value="8" />
        <a href="#" id="clearCanvas" style="margin-left: 10px;">Clear canvas</a> <a href="#"
            id="saveImage" style="margin-left: 110px;">Save image</a>
    </div>
    <canvas id="myCanvas" height="600" width="600">

   </canvas>
    <div id="ShowMessage">
    </div>

The main purpose of this blog post is to give you a little insight of work. What is out next step? Next step is for us to give you all the possibility to play with our WebSockets server, to test your use-cases build your real-time web-apps upon the WebSockets API and the WebSockets server of ours. If your are interested of knowing, be the first one to try please don hesitate to shoot an email to me

Read more about WebSockets handlers at UlfBjo’s blog

Thanks for reading

Magnus Thor

Speech recognition and WebSockets–Controlling WebUI

2011-02-01T01:03:00.001+01:00

A astute colleague of mine, Ulf Björklund has written a nice speech recognition application controlling a few JQueryUI widgets over Websockets, it it based on the websocket server of mine. Ulf idea and demo is quite interesting an brings a lot of nice ideas to my mind. We recorded a little demo that you will find below.

JQueryUI Widgets (WebUI) controlled by speech over WebSockets!

Ulf’s client is based on a Windows application that uses the .NET libraries for speech recognition , those are interpreted and sent to the socketserver and the webpages to control by using speech. In addition to that Ulf added some other nice features. Have a look at the short video demonstration.

JQueryUI Widgets (WebUI) controlled by speech over WebSockets–Nice!

As I don’t can keep my hands of did some testing replacing the “Windows client” with Google Chromes build in speech recognition by using

<input type="text" x-webkit-speech />

I made a quick and dirty client that you can try.

1. Start the http://kampanj.xlent.se/sockets/speech/client.htm , just make sure you start Chrome by passing --enable-speech-input switch to Chrome.exe when staring the browser. And you will se a microphone within the “textbox” meaning that you are in input speech mode …

2. As step to you access the WebUI shown in Ulfs video at http://kampanj.xlent.se/sockets/speech/ , make sure you see both windows at the same time (each url started in separate instances of Chrome browsers) .

3. As my demo is very quick I just tested one of the commands Ulf added ; try say “show dialog” .

Magnus Thor

WebSockets and XBOX Kinect controlling slideshow

2011-02-01T00:30:00.001+01:00

A few days ago I released a demo showing how we can use Microsoft Xbox Kinect together with WebSockets. To make the demo a little bit easier to understand i made some adjustments and published yet another demo upon the same solution a few days ago.

Web based slideshow which is controlled by the Kinect device and delivered on WebSockets

This time it is a web based slide show which is controlled by the Kinect device – Simple gesture such as up, down , left and right is captured and broadcasted via WebSockets to the clients (browsers).

Demo of WebSockets and Kinect–Episode 2

Request a live demo
If you want to test the thing “live” just send me an email and we will make an appointment as well as you will revive some instructions . The demo can be launched at http://kampanj.xlent.se/sockets/socketsnkinect/ , but as you will notice there is not much to see without me connecting my Kinect device.

Magnus Thor