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:

// 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:

<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>