Create a Realtime Application

There are several steps that are common to all Realtime API applications and must be performed at some point in the application life cycle. Follow the links below to learn about each step.

Step 1: Enable the Drive API

First, you need to enable the Drive API for your app. You can do this in your app's API project in the Google API Console.

To get started using Drive API, you need to first use the setup tool, which guides you through creating a project in the Google API Console, enabling the API, and creating credentials.

  1. From the Credentials page, click Create credentials > OAuth client ID to create your OAuth 2.0 credentials or Create credentials > Service account key to create a service account.
  2. If you created an OAuth client ID, then select your application type.
  3. Fill in the form and click Create.

Your application's client IDs and service account keys are now listed on the Credentials page. For details, click a client ID; parameters vary depending on the ID type, but might include email address, client secret, JavaScript origins, or redirect URIs.

Take note of the Client ID as you'll need to add it to your code later.

Step 2: Load the Realtime library

The Google JavaScript API loader can load all components you need to use the Realtime API. To begin, you must include the library as shown here:

<script type="text/javascript" src=""></script>

Use the gapi.load function to load the required components for your application. An example would be:

gapi.load("auth:client,drive-realtime,drive-share", callback);

This example loads the following components:

The OAuth 2.0 client library suitable for authorizing the Drive API.
The Drive Realtime API client library
The Drive SDK sharing component (optional)

Once these libraries are loaded, the callback function is called. You can use this to start the application and the authorization procedure described in the next step.

Step 3: Authorize access

Authorization with the Realtime API uses OAuth 2.0. We recommend using the Google Sign-In and the JavaScript client library that is loaded with the Realtime library.

After you load the Realtime API client library and authorize access to the user's Drive, you're ready to create a collaborative document.

Step 4: Create or fetch a Google Drive file

Realtime documents are attached to files stored in Google Drive. Accordingly, your application should use the Drive REST API to interact with Drive files. For example, to create a new file, use the files.insert method from the Drive REST API. To retrieve a file that already exists, use the files.get method.

For more information on interacting with files in Google Drive, see Google Drive Integration.

Step 5: Start the Realtime API

You can start the Realtime API with a single call:, onFileLoaded, opt_initializerFn, opt_errorFn);

The parameters are:

The Drive API fileId for the file resource.
A callback to be called when the Realtime API has loaded the file. This can be used to connect any user interface elements to collaborative entities in the model.
An optional callback to be called when the Realtime API model is created for the first time. This can be used to create collaborative attributes to initialize the model.
An optional callback to be called when an error occurs while the document is being loaded or edited.

Step 6: Initialize the data model

You initialize the model with the initializeModel callback that you pass when starting the Realtime API. In this function, you can create any default starting collaborative objects by building your model. In the case of Realtime binary files, you can use the initializeModel callback to read the file and generate a current Realtime model.

For example, the Realtime quickstart example uses this function to create a model with a collaborative string that controls a text box. The string has a starting value of "Hello Realtime World!", and is named "text":

function initializeModel(model) {
  var string = model.createString("Hello Realtime World!");
  model.getRoot().set("text", string);

You create the collaborative object (in this case a CollaborativeString), and attach it to the model hierarchy. Here we attach the string to the model root with the key text.

For more information about models, collaborative objects, and model design, see Build a Collaborative Data Model.

Step 7: Connect listeners for model events

When the Realtime API loads a file, it calls the callback you supply to (in this example, onFileLoaded). This callback marks the start of your application. You should use it to connect user interface components to event listeners. The complete model is available as doc.getModel() and can also be modified at this time.

For example, to connect the Collaborative String above to the function onStringChanged, you would write:

function onStringChanged(evt) {
  // Log the event to the console.

function onFileLoaded(doc) {
  // Get the field named "text" in the root map.
  var text = doc.getModel().getRoot().get("text");
  // Connect the event to the listener.
  text.addEventListener(, onStringChanged);

The different types of events are described in more detail in Listening to Realtime Events.

Enviar comentarios sobre…