Quickstart

This guide will offer a condensed version of getting started with HighNoon. It will cover installing the javascript client, setting up the client, and setting up the server.

1a - Install HighNoon

HighNoon can be installed with the following command:

pnpm install highnoon

1b - Create HighNoon Account

Before using HighNoon, you’ll need to create a HighNoon account. This will allow you to create access credentials for your projects. After creating an account, go to the Projects page to create a new project.

1c - Get Project ID and API Token

After creating a project, you’ll be able to create a new API token. Keep this token safe, as it will be used to authenticate requests from your app. You’ll also need the project ID, which can be found in the project settings.

2 - Setup and Initialize Server

The first thing that needs to be set up is the HighNoon server. After the server has been created, it must also be initialized by calling the init function.

const options = {
    // Required options

    // these can be found in the HighNoon admin panel when you create a
    // new project
    projectId: "your-project-id",
    apiToken: "your-api-token",

    // this will be displayed as the player id
    userId: "xXPlayerXx",

    // Optional options - the default values are shown
    channelName: "highnoon-client-2j31lnds2312m",
    showDebug: false,
    iceServers: [
        {
            urls: "stun:stun.l.google.com:19302"
        }
    ],

    // if not using the official highnoon server, set this to the url
    // that the highnoon signalling server is running on.
    // Not currently supported.
    signallingOverrride: "http://service.gethighnoon.com"
}

const server = new HighNoonServer(options);
const { error } = await server.init();

3 - Setup Client

Setting up the client is very similar to the server, with some changes made to accomodte things like setting a username. Just like the server, it must be initalized using the init function.

const options = {
    // Required options

    // these can be found in the HighNoon admin panel when you create a
    // new project
    projectId: "your-project-id",
    apiToken: "your-api-token",

    // this will be displayed as the player id
    userId: "xXPlayerXx",

    // Optional options - the default values are shown
    channelName: "highnoon-client-2j31lnds2312m",
    showDebug: false,
    iceServers: [
        {
            urls: "stun:stun.l.google.com:19302"
        }
    ],

    // if not using the official highnoon server, set this to the url
    // that the highnoon signalling server is running on.
    // Not currently supported.
    signallingOverrride: "http://service.gethighnoon.com"
}

const client = new HighNoonClient(options);
const { error } = client.init();

4 - Create a New Room and Connect a Client to it

HighNoon operates on the principle that servers will create rooms, which clients can then join. Connection information can then exchanged.

4a - Create a Room

Using the server created in the previous steps, we can then create a new room:

const { data, error } = await server.createRoom();

if(error) {
    console.log(error)
}

console.log(data.room)

The return will be in the form of:

data: {
    room: string
} | error: string

The room identifier should be handled in such a way that it can be shared with potential clients, as this will be needed to complete the next step.

4b - Connect to Room

Using the client created in the previous steps, we can then connect to a room:

const { data, error } = await client.connectToRoom(room);

Where the return is in the form of:

data: {
    room: string,
    connectedClients: number
} | error: string

Next Steps

For more information about how HighNoon works, visit the overview reference. For information about all functions available, visit the function references.