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

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

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

Kind regards

Magnus Thor