Quickstart

Welcome to the SuperViz Real-time Quickstart guide. This guide provides a straightforward step-by-step process to help you integrate our Real-time into your project.

JavaScript Quickstart

This section provides a step-by-step guide to integrate SuperViz Real-time into your JavaScript project. We offer two methods for integration: using a package manager or via a CDN. Choose the approach that best fits your development environment and follow the corresponding instructions to quickly set up and start using SuperViz Real-time in your application.

JavaScript with package manager

1

Before we start

Make sure your development environment has Node.js (v14 or more recent) and npm/yarn installed.

2

Install the package

Install SuperViz Real-time in your Node.js-powered apps with the npm package:

npm install --save @superviz/realtime

3

Import the Real-time

Once installed, import the Real-time to your code:

import { Realtime } from '@superviz/realtime'

4

Initialize Real-Time

After importing the Real-time you can initialize passing DEVELOPER_KEY as a parameter and the options object.

  const realtime = new Realtime('DEVELOPER_KEY', {
    participant: {
      id: 'PARTICIPANT_ID',
    },
  });

5

Create and connect to a channel

After initializing the Real-time instance, you can create and connect to a channel. This allows you to establish real-time communication between participants.

const channel = await realtime.connect("my-channel");

6

Subscribe and publish events

After connecting to a channel, you can subscribe to events and publish messages. Here's an example of how to do this:

In this example, we define two functions:

• publishTest(): Publishes a "test" event with a "Hello, world!" message.
• subscribeToTest(): Subscribes to "test" events and logs them to the console.

You can customize these functions to fit your specific use case, publishing and subscribing to events as needed for your application.

// Function to publish a test message
const publishTest = () => {
  channel.publish("test", { message: "Hello, world!" });
};

// Function to subscribe to test events
const subscribeToTest = () => {
  channel.subscribe("test", (event) => {
    console.log("Received test event:", event);
  });
};

// Call these functions to start publishing and subscribing
publishTest();
subscribeToTest();

JavaScript with CDN

1

Add script tag to your HTML

Add the code below to the header of your application, before the </head> tag:

tip

If you're using the CDN, please note that it needs to be served from a local web server when working on localhost. This ensures that the Real-time functions correctly during development. You can use tools like http-server or live-server to serve the Real-time on your local machine.

<script type="module" src="https://unpkg.com/@superviz/realtime@latest/dist/browser/index.js"></script>

2

Initialize Real-time

After importing the Real-time, you can initialize it by passing your DEVELOPER_KEY as a parameter and the options object.

<script>
  const realtime = new window.Realtime('DEVELOPER_KEY', {
    participant: {
      id: 'PARTICIPANT_ID',
    },
  });
</script>

3

Create and connect to a channel

After initializing the Realtime instance, you can create and connect to a channel. This allows you to establish real-time communication between participants.

<script>
  const channel = await realtime.connect("my-channel");
</script>

4

Subscribe and publish events

After connecting to a channel, you can subscribe to events and publish messages. Here's an example of how to do this:

In this example, we define two functions:

• publishTest(): Publishes a "test" event with a "Hello, world!" message.
• subscribeToTest(): Subscribes to "test" events and logs them to the console.

You can customize these functions to fit your specific use case, publishing and subscribing to events as needed for your application.

<script>
  // Function to publish a test message
  function publishTest() {
    channel.publish("test", { message: "Hello, world!" });
  }

  // Function to subscribe to test events
  function subscribeToTest() {
    channel.subscribe("test", (event) => {
      console.log("Received test event:", event);
    });
  }

  // Call these functions to start publishing and subscribing
  publishTest();
  subscribeToTest();
</script>

Resources to get you started

We've prepared a few resources to help you get started with the Real-time component and use it along with other components to create a collaborative environment.

Learn how to build a multiplayer chess game with React

How to build a real-time data dashboard

Learn how to add real-time synchronization to a React Flow application