Tutorial

HTML Setup

We provide a Javascript API to help you build realtime applications. So what’s the simplest collaborative web application that you can think of? How about a realtime textarea? Two people can go to the same URL and use the same textarea at once. Just create the element, connect to convergence, and bind to the model, we take care of all the events and data synchronization. Easy peasy.
Let’s lay out a basic example index.html that includes the Convergence javascript client and utilities and creates a simple textarea element:
Next add the code from the following steps to the script tag in the index.html.

Connect

With Convergence, a ‘Domain’ encapsulates a set of data, users, messages, and other items. You can create as many domains as you want, perhaps representing projects, apps, or different environments (e.g. Staging). Thus, we first have to connect to a domain before doing anything else. You simply need to replace <username> and <domainId> with your Convergence username and the domainId of the domain you want to connect to.

Open A Model

Data in a domain can be organized by collections of models. In this case, our model is simply an Object with a single string representing the contents of the textarea.

Collaborate

Now that we have connected to the domain and opened a model, let’s work with the text area we added to the HTML file. We will need a reference to the RealTimeString within the model in order to both update it and listen for remote changes.
We use the ConvergenceInputElementBinder to create a two-way binding between the textArea element and the string element within the Convergence model. And that’s it folks.
See Here for the complete example source code.

Get hacking!

Pretty cool, huh? Real-time data sync in minutes. And this example just touches on a tiny piece of our platform’s capabilities. To build a real application, of course, you’ll need help with things like identity, presence, activity tracking, and messaging — all included with each Convergence account. See for yourself: Request an Invite now.

Still not sure? See some of our demos in action, and look under the hood at the source code if you’re still not convinced. 😉