WebSync 3 Tutorials

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

WebSync On-Demand: Basic

In this tutorial, you will learn how to integrate WebSync On-Demand into your projects. There is no server-side code - just plain HTML.

Setting up an HTML page

To get started, 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="http://sync3.frozenmountain.com/client.js?v=3.5.0"></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
    
    client.initialize({
        key: '11111111-1111-1111-1111-111111111111' // your *public* key
    });
    
    client.connect({
        onSuccess: function(args) { // optional
            util.log('Connected!');
        },
        onFailure: function(args) { // optional
            util.log('Connect failed: ' + args.error);
        }
    });
</script>

Ensure you pass in the correct public key for your domain.

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!