A Silverlight (HTML5) WebSockets bridge up and running!

 

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)

var ws = null;
$(function () {
// If we native support for WebSockets
if ("WebSocket" in window) {
ws = new webSockets("ws://127.0.0.1:4502/XSocketSolution.XSocketCommon.Handlers.Generic");
attachEvents();
} else { // This is a non WebSocket supporting browser, use the Silverlight WebSockets bridge.
$("body").WebSocketBridge(
"ws://127.0.0.1:4502/XSocketSolution.XSocketCommon.Handlers.Generic",
        {
            height: 0, width: 0,
            onLoad: function (sender, args) { // When the bridge is loaded, create a new WebSocket using it..
                ws = new webSocketBridge(sender.getHost().Content.Api);
                attachEvents(); // bind the events
            }
        }
);
}
// When user hits button , send a WebSocket message
$("button").click(function () {
var sampleMessage =
{
event: "MyEvent",
data:
[
    {
        MyEventArgumentString: "Hello WebSockets everywhere!",
        MyEventArgumentInt: 1,
        MyEventAgumenttBoolean: false
    }
]
};
ws.trigger(sampleMessage);
});
});
// Deal with our WebSockets Events
function attachEvents() {
ws.bind("MyEvent", function (d) {
$("<p>").text(d[0].MyEventArgumentString).appendTo("div");
});
ws.bind("YetAnotherEvent", function (d) {
$("<p>").text(d[0].MyEventArgumentString).appendTo("div");
});
}

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