Textarea Tutorial

Configure the Convergence URL

First, let's set the URL that will be used to connect to your Convergence Server. Add the following code to the tutorial-config.js file. Note that this assumes you are using the Convergence Omnibus Container running on port 8000 and that you are using the convergence/default domain that is automatically created for your. If this is not the case update the connection URL to fit your deployment.

tutorial-config.js

const CONVERGENCE_URL = "http://localhost:8000/api/realtime/convergence/default";

Create a Unique User Display Name

We are going to be using Anonymous Authentication, so we want to create a pseudo random Display name for each user so we can tell them apart. At the top of the tutorial.js file add the lines below:

tutorial.js

const username = "User-" + Math.round(Math.random() * 10000);
document.getElementById("username").innerHTML = username;

Add Connection Logic

Next we will add the basic logic to the tutorial.jsconnect to Convergence. For now we will just log that we are connected. Notice that we are using the CONVERGENCE_URL which defines the connection URL and the username that we generated above to connect using the connectAnonymously method. This returns a Promise with the ConvergenceDomain when connected or an error if there is one.

tutorial.js

Convergence.connectAnonymously(CONVERGENCE_URL, username).then(domain => {
  console.log("Convergence is connected!");
}).catch(error => {
  console.error(error);
});

Checkpoint

Your tutorial.js file should look like this:

const username = "User-" + Math.round(Math.random() * 10000);
document.getElementById("username").innerHTML = username;

Convergence.connectAnonymously(CONVERGENCE_URL, username).then(domain => {
  console.log("Convergence is connected!");
}).catch(error => {
  console.error(error);
});

At this point you should be able to refresh your browser tab that contains the index.html and see the text "Convergence is connected!" printed to the console. If there is an error, check your code and adjust as necessary.

Next, we will add the required logic to create / open the RealTimeModel that will be used for collaboration.