Wpf Over Websockets (WoW) – How to Pump WPF windows & animations to browsers over HTML5 Websockets And Canvas

Over the weekend, I just put together a hack for pumping WPF windows over Websockets and rendering it using HTML5 canvas – also with basic mouse input support. For each user connecting to the server, a new window instance is created, and screen will be pumped over web sockets to the browser as base64 encoded images. These images are painted on an HTML5 canvas. The entire source code is here at codeplex – http://wow.codeplex.com

What does this mean?

Once HTML5 specification is final - it is almost certain that it’ll be the most widely adopted platform for delivering applications to end users. With Websockets in HTML5, we are going beyond the unidirectional, stateless http to a full duplex, high speed connection infrastructure between the server and the client. This will definitely bring up lot of interesting possibilities, including exciting and feature rich user experiences. WPF is already a widely adopted, feature rich desktop application development platform, and this hack is a quick POC to bring the WPF experience over the web to the end user using HTML5 web sockets and canvas.

You can see that I’m accessing my WPF application over multiple browsers in the below video. Just to clarify, it is rendered in the browser purely using HTML5 canvas – No Silverlight or Flash 

Rendering the screen in the browser

HTML5 draft specification includes Websockets - http://dev.w3.org/html5/websockets/ 

WebSocket is a technology providing for bi-directional, full-duplex communications channels, over a single Transmission Control Protocol (TCP) socket. It is designed to be implemented in web browsers and web servers but it can be used by any client or server application. The WebSocket API is being standardized by the W3C and the WebSocket protocol is being standardized by the IETF.

Here is a pretty minimized implementation of the page that opens a web socket, retrieve the image data, and draws the same on a canvas

var socket = new WebSocket("ws://localhost:8181/main");

socket.onopen = function () {

}

socket.onmessage = function (msg) {

var canvas = document.getElementById("canvas");

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

var img = new Image;

img.onload = function () {

ctx.clearRect(0, 0, canvas.width, canvas.height)

ctx.drawImage(img, 0, 0); // Or at whatever offset you like

};

img.src = "data:image/gif;base64," + msg.data; ;

}

Read more: amazedsaint's #tech journal

Posted via email from Jasper-net