First app

A step-by-step tutorial that will guide you through creating your first app using JavaScript Endpoint SDK with PrivMX Bridge.

Setup PrivMX Bridge Instance

To create a PrivMX Bridge Instance, you need Docker with Docker Compose installed on your machine. To do this go to our Bride CLI project

Next, register the first user:

In your terminal, generate private-public key pair for your user. The keys must be in WIF format:

./genKeyPair.sh

With the keys ready, register userId - public key pair in your Context. Don't forget to replace placeholder values with the ones created earlier:

./cli.sh context/addUserToContext '{"contextId": "CONTEXT_ID", "userId":"USER_ID", "userPubKey":"USER_PUBLIC_KEY" }'

Create Client App

To create client app, you need Node and npm installed on your machine.

1. Create app using Vite CLI:

npm create vite

Follow all the steps displayed by Vite CLI. You can choose any framework you prefer - PrivMX Endpoint Web SDK is framework-agnostic.

2. Install dependencies

Inside the created project folder, install this Endpoint Web SDK:

npm i @simplito/privmx-endpoint-web-sdk@latest --registry=https://npm.simplito.com

After the installation, run setup script provided by the SDK:

npx @simplito/privmx-endpoint-web-sdk

Follow the steps displayed in your terminal.

3. Connect to your Bridge Instance

Paste the following snippet to your main JavaScript file (e.g. ./src/App.ts or ./src/index.js):

 async function connectToBridge() {
     const connection = await Endpoint.connect({
         platformUrl:"PLATFORM_URL",
solutionId:"SOLUTION_ID",
         privKey:"USER_PRIVATE_KEY",
     })

     const context = connection.context("CONTEXT_ID")

     const firstUser = {
         userId:"USER_ID",
         pubKey:"USER_PUBLIC_KEY",
     }

     const threadId = await context.threads.new({
         users:[firstUser],
         managers:[firstUser]
     })

     await context.thread(threadId).sendMessage({
         data:new TextEncoder().encode("Hello Bridge!")
     })
     const messageList = await context.thread(threadId).getMessages(0)

     const decodedMessageList = messageList.readItems.map(message => {
         return {
             data:new TextDecoder().decode(message.data),
             info:message.info,
             authorPubKey:message.authorPubKey,
         }
     })
     console.log(decodedMessageList)
}

First, you have to connect to your Bridge Instance using Platform.connect method. It requires the API keys generated while initializing your local instance earlier.

const connection = await Endpoint.connect({
     platformUrl:"PLATFORM_URL",
     solutionId:"SOLUTION_ID",
     privKey:"USER_PRIVATE_KEY",
})

const context = connection.context("CONTEXT_ID")

When connected, you have access to all SDK methods. This example shows how to create a Thread, send and download a message. To create a Thread inside Context, use Threads handle methods new. Note that you have to pass user ID - public key pair to make a list of users and managers.

const firstUser = {
     userId:"USER_ID",
     pubKey:"USER_PUBLIC_KEY",
}
const threadId = await context.threads.new({
     users:[firstUser],
     managers:[firstUser]
})

With the Thread created, you can now send the first message.

Endpoint sends data in Uint8Array format. It requires encoding your data from string or object format to binary (e.g. the usage of TextEncoder for string encoding).

await context.thread(threadId).sendMessage({
     data:new TextEncoder().encode("Hello Bridge!")
})

To get a list of messages inside a Thread, use getMessages method. Because data inside messages is in Uint8Array you have to deserialize it to human-readable string. Endpoint takes care of encrypting your data before sending it to PrivMX Bridge.

const messageList = await context.thread(threadId).getMessages()

const decodedMessageList = messageList.readItems.map(message => {
     return {
         data:new TextDecoder().decode(message.data),
         info:message.info,
         authorPubKey:message.authorPubKey,
     }
})
console.log(decodedMessageList)

4. Run your app

In your terminal, run npm run dev to start local app server.