WoW - Wpf Over Websockets

WPF over Websockets is a POC that pumps a WPF element/window over websockets to a browser, and render it using an HTML5 canvas. See the video and related blog post in my blog, @ http://www.amazedsaint.com/2011/04/wpf-over-web-sockets-how-to-pump-wpf.html

Rendering the image 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; ;
}

The server

I was planning to implement a quick socket server based on draft specifications – but I found that there are already a couple of .NET based implementations out there. One among them is Nugget - http://nugget.codeplex.com/ – I’m having a thin layer on top of Nugget for creating a window instance when ever a client socket connects to the server.

	var srv = new WebSocketServer(port, origin, "ws://" + server + ":" + port);
	srv.RegisterHandler<ElementSocket<T>>("/" + name);
	srv.Start();
	return srv;

Most of the logic required for creating window instances, and pumping them back to the connected client socket goes in my ElementSocket implementation.