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