WebSync 3 Tutorials

WebSync On-Demand Tutorials	WebSync Server Tutorials
Basic Subscribers Proxies Publishers Advanced	Basic Subscribers Events Advanced

WebSync Server: Basic

In this tutorial you will learn how to integrate WebSync Server into your projects.

Configuring your project

Before you can start coding, you need to have the correct project references.

FM.WebSync.Core (available as part of WebSync Server)
FM.WebSync.Server (available as part of WebSync Server)
log4net (available as part of WebSync Server)
Dean.Edwards (available as part of WebSync Server)

Exposing the WebSync Server handlers

WebSync Server uses 2 primary HTTP handlers:

The Request Handler: responsible for handling all WebSync requests and responses.
The Client Handler: responsible for delivering the JavaScript client as a JS file.

To expose them, we simply add new HTTP handler entries to web.config (where depends on your IIS version/mode).

<configuration>
    <!-- IIS6 and IIS7 in Classic Mode -->
    <system.web>
        <httpHandlers>
            <add verb="GET,POST" path="request.ashx" type="FM.WebSync.Server.RequestHandler" />
            <add verb="GET,POST" path="client.ashx" type="FM.WebSync.Server.ClientHandler" />
        </httpHandlers>
    </system.web>
    <!-- IIS7 in Integrated Mode -->
    <system.webServer>
        <handlers>
            <add name="RequestHandler" preCondition="integratedMode"
                 verb="GET,POST" path="request.ashx" type="FM.WebSync.Server.RequestHandler" />
            <add name="ClientHandler" preCondition="integratedMode"
                 verb="GET,POST" path="client.ashx" type="FM.WebSync.Server.ClientHandler" />
        </handlers>
    </system.webServer>
</configuration>

Test out the handlers by browsing to client.ashx and request.ashx. The client handler should display a compressed version of the JavaScript client, and the request handler should display an error in JSON format about being unable to deserialize the incoming messages.

Setting up an HTML page

Now that our handlers are registered, we need to create an HTML page to host our JavaScript client.

Create a new HTML page and add a reference to the client script in the <head> element.

<script type="text/javascript" src="client.ashx"></script>

Now we can initialize the client and start doing interesting things.

Connecting the client

The first step is to initialize and connect the client.

<script type="text/javascript">
    var client = fm.websync.client; // shortcut
    var util = fm.utilities;        // shortcut
    
    // no parameters are necessary unless you want to override default behaviours
    client.initialize();
    
    client.connect({
        onSuccess: function(args) { // optional
            util.log('Connected!');
        },
        onFailure: function(args) { // optional
            util.log('Connect failed: ' + args.error);
        }
    });
</script>

Subscribing and publishing

Now that the client is connected, it can subscribe to channels and publish data.

<script type="text/javascript">
    var client = fm.websync.client; // shortcut
    var util = fm.utilities;        // shortcut
    
    client.subscribe({
        channel: '/test',
        onSuccess: function(args) { // optional
            util.log('Subscribed!');
        },
        onFailure: function(args) { // optional
            util.log('Subscribe failed: ' + args.error);
        },
        onReceive: function(args) {
            util.log('Received data: ' + args.data.text);
        }
    });
    
    function publishData() {
        client.publish({
            channel: '/test',
            data: {
                text: document.getElementById('text').value
            },
            onSuccess: function(args) { // optional
                util.log('Published!');
            },
            onFailure: function(args) { // optional
                util.log('Publish failed: ' + args.error);
            }
        });
    }
</script>

Since the call to publish() is wrapped in a function, we need a UI element to trigger it.

<input type="text" id="text" />
<button onclick="publishData(); return false;">Publish</button>

Testing

Open the page in a couple web browsers and click Publish a few times to see the synchronization!