Quickstart guide

introduction

To demonstrate basic cyxth functionality we are going to create a simple chat app similar to telegram where users can send and receive messages in groups, channels and private messaging we will later extend to include calls and conferencing.

let’s create a simple vite project using the vanilla js template.

# create a vite project
$ npm create vite@latest chat-example -- --template vanilla
$ cd chat-example && npm install

# add the cyxth chat sdk
$ npm i @cyxth/chat

# start the dev server
$ npm run dev

After a small template cleanup you will be left with these files.

$ tree --gitignore
.
├── index.html
├── main.js
├── package.json
├── package-lock.json
├── public
└── style.css

2 directories, 5 files

Go ahead and update your index.html file

<div id="app">
	<div class="messagelog" id="messagelog">
		<!--we will be adding messages here  -->
	</div>
	<div class="sendbox">
		<input type="text" id="messagebox" />
		<button id="sendbtn">send</button>
	</div>
</div>
<script type="module" src="/main.js"></script>

Add this simple styling to your style.css file.

body {
	margin: 0;
	padding: 0;
	height: 100vh;
	overflow: hidden;
	padding-inline: 1rem;
}

.messagelog {
	height: 25rem;
	overflow-y: auto;
}

Not so pretty but that will do it for now, we will be adding better styling later.

authorize users

lets create a function that fetches the token data from our auth service we created earlier and use it to token to connect to our cyxth instance.

// main.js
const getToken = async (user) => {
	const res = await fetch('http://localhost:8902/authorize', {
		method: 'POST',
		body: JSON.stringify(user),
		headers: {
			'Content-Type': 'application/json'
		}
	});

	return await res.json();
};

connect

cyxth chat sdk provides a connect method that takes the token data created and authorizes the user. To initialize first we need the app url provided in the cyxth console. Go ahead and add it to main.js, initialize a cyxth instance and connect to it.

// main.js
import Cyxth from '@cyxth/chat';

const APP_URL = 'your_app_url';

const cyxth = new Cyxth(APP_URL);

let user = {
	name: 'alice',
	id: 'alice',
	avatar: '_'
};

const connectCyxth = async () => {
	try {
		let token = await getToken(user);
		await cyxth.connect(token);
	} catch (e) {
		console.error('failed to connect', e);
	}
};

connectCyxth();

send messages

let select the DOM elements we will be using to send messages. and send a simple message.

create a channel in the cyxth console and name it breakout(or any other name), create two users alice and bob (or any other) and add them to the channel breakout. we will be using these to send and receive message, you can also use the REST api to create users and channels.

// main.js
const sendMessage = () => {
	let message = messageInput.value;
	cyxth
		.send('breakout', message)
		.then((sent) => {
			console.log('sent', sent.status);
		})
		.catch((err) => {
			console.error('error', err);
		});

	messageInput.value = '';
	logMessage({ text: message });
};

const logMessage = (message) => {
	let item = document.createElement('li');
	item.innerHTML = message.text;
	messageList.appendChild(item);
};

const messageInput = document.querySelector('#message-input');
const messageList = document.querySelector('#message-list');
const sendBtn = document.querySelector('#send-btn');

sendBtn.addEventListener('click', sendMessage);

the cyxth send function facilitates sending any message type to users in a given channel, you can send text, files and any data between channels and users in those channels will receive the message.

receive messages

to receive messages simply listen for the message event on the cyxth instance.

cyxth.on('message', (message) => {
	logMessage(message);
});

read more info on the message received at message docs

wrapping up

To test this simple example remove the hard coded user info add a simple login form that users add their info before connecting.

<div class="userinfo">
	<input type="text" name="id" id="user-id" placeholder="id" />
	<input type="text" name="name" id="user-name" placeholder="name" />
	<button id="start-chat">start chat</button>
</div>

add javascript

const userId = document.querySelector('#user-id');
const userName = document.querySelector('#user-name');
const startChat = document.querySelector('#start-chat');

startChat.addEventListener('click', () => {
	console.log('start chat');
	let user = {
		name: userName.value,
		id: userId.value,
		avatar: '_'
	};

	if (!(user.name && user.id)) {
		console.error('invalid user');
		return;
	}

	runcyxth(user);
});

to test this implemention connect two devices and start texting between them, you can use a proxy such as ngrok to access it externally, you can also use separate browsers.

This code can be found in the quickstart example on github.

lets add more features.

next on advanced chat