JavaScript

Sariska provides a JavaScript API and easy-to-integrate SDKs for web, mobile, front-end, and cloud infrastructure to add real-time features in your applications.

Key Features:

  • Real-time messaging for in-app chats and instant messaging

  • Support for various JavaScript frameworks (Vanilla, React, Angular, Vue, Electron, React Native)

  • Easy installation using NPM or CDN

  • Socket creation and management

  • Channel creation, joining, and leaving

  • Sending messages, poll votes, and message replies

  • Presence management (track: typing, joining and leaving users)

  • History management (fetching chat history and specific messages)

Installation

Step 1 : Install the Phoenix Library

Install the Phoenix library by running the following command in your project directory using NPM.

npm install phoenix

Alternatively, install the Phoenix library by adding the following script to your website's HTML <head> tag for seamless API access.

<script src="https://sdk.sariska.io/bundle.messaging.js"></script>

Step 2 : Create Socket

Establish a WebSocket connection to the Sariska server to join channels, receive events, and send messages.

const socket = new Socket("wss://api.sariska.io/api/v1/messaging/websocket", {token: "your-token"});
// Handles socket opening event
socket.onOpen = () => {
  console.log("Socket opened");
};
// Handles socket closing event
socket.onClose = () => {
  console.log("Connection dropped");
// Handles socket error events
socket.onError = () => {
  console.error("There was an error with the connection");
};

// Open connection to the server
socket.connect();

To disconnect the user from any previous WebSocket connections and tabs before opening a new one, set the disconnect_past_tabs parameter to true in the WebSocket connection.

Disconnect Socket

Close the WebSocket connection to the Sariska server. This will terminate all active channels and prevent further communication with the server.

// Close connection to the server
socket.disconnect();

Step 3 : Create Channel

Channels cannot be created directly; instead, they are created through the socket object by calling socket.channel(topic) with the topic of the channel. The topic is a string that identifies the channel, and it can be any string you like.

Channel Prefix

Each channel name starts with a prefix that determines the message serialization format and persistence behavior.

chat: Use this prefix for persisting messages to the database. This prefix requires a fixed schema and is ideal for chat applications.

 let channel = socket.channel("chat:room123");

rtc: Use this prefix for scenarios where message persistence is not necessary. This prefix allows sending arbitrary JSON data, making it suitable for events in multiplayer games, IoT applications, and others.

let channel = socket.channel("rtc:room123");

sariska: Use this prefix for performance-critical applications that utilize Flatbuffers as the serialization format and do not require message persistence. This prefix provides zero-copy serialization/deserialization, significantly enhancing performance.

let channel = socket.channel("sariska:room123");

Handle Errors

When an error occurs on the channel, the onError callback is triggered. The callback receives the error information in payload, if available.

channel.onError( () => console.log("There was an error!") )

Close Channel

When the channel is closed, the onClose callback is invoked. This signifies that the communication on the channel has ended and no further data can be exchanged.

channel.onClose( () => console.log("Channel Closed") )

Step 4 : Join and Leave Channel

To join a channel, call the join() method on the channel object. The join() method returns a promise that resolves when the client has successfully joined the channel. When sending data, you can utilize the .receive() hook to monitor the status of the outgoing push message.

// Join the channel
channel.join()
    .receive("ok", ()=>console.log("Channel joined"))
    .receive("error", ()=>console.log("Failed to join"))
    .receive("timeout", () => console.log("Encountering network connectivity problems. Waiting for the connection to stabilize."))
    
// Leave the channel
channel.leave();

Channel User Joined

channel.on("user_joined", (payload) => {
  // Extract user and room information from the payload
  const user = payload.user;
  const room = payload.room;

  // Log the user and room details to the console
  console.log(user);
  console.log(room);
});
Payload of user containing user details, including:

  • id: The user's ID

  • name: The user's name

  • avatar: The user's avatar URL

  • email: The user's email address

Payload of room containing room details, including:

  • id: The room's ID

  • session_id: The room's session ID

  • created_by: The ID of the user who created the room

  • status: The status of the room (e.g., "active", "inactive")

Channel New Message

channel.on("new_message", (message) => {
  // Log the received message to the console
  console.log(message);
});
Payload of message containing message details, including:

  • content: The message content

  • id: The sender's user ID

  • name: The sender's name

  • content_type: The message content type (media, emoji, text)

  • is_delivered: Whether the message has been delivered to the recipient

  • created_by: The ID of the user who sent the message

  • created_by_name: The name of the user who sent the message

  • timestamp: The message timestamp

Send Message

Once you've established a connection to a channel, you can start sending messages to other connected clients. To send a message, use the push() method on the channel object.

channel.push("new_message", {
   content: "Hi, From nick"
})
Payload of new_message containing message details, including:

  • content: The message content

  • type: The message content type (media, emoji, text)

Send Message Reply

// Push a new message reply to the channel
channel.push("new_message_reply", {
   content: "How is the Weather today?",
   message_id: 1
})

Channel Poll Vote

channel.on("new_vote", (vote) => {
  // Log the received vote to the console
  console.log(vote);
});
Payload of vote containing vote details, including:

  • content: The vote question

  • content_type: The vote content type (media, emoji, text)

  • options: An array of vote options

For other polls APIs, please refer to Swagger documentation

Attach Media Files to Chat Messages

Attaching media files to chat messages involves obtaining a presigned URL, uploading the file to the presigned URL, and then sending the file information to the chat server.

Obtain a Presigned URL

To obtain a presigned URL, make a POST request to the API endpoint. The request payload should be empty, and the Authorization header should contain your bearer token.

let responseBody;
// Construct the request payload
const payload = {
    method: "POST",
    headers: {Authorizaton: "Bearer your-token"}
};
// Send the POST request to the API endpoint
const response = await fetch("https://api.sariska.io/api/v1/misc/get-presigned", payload);
// Check for successful response
if (response.ok) {
   responseBody = await response.json();
}

Upload the File

After obtaining the presigned URL, the file can be uploaded to the URL using the PUT method.

const file = event.target.files[0];
const signedUrl  = responseBody.presignedUrl;
const headers = {
   "ACL": "public-read",
   "Content-Disposition": "attachment"
}
await fetch(signedUrl, { 
   method: 'PUT',
   body: file, headers
   })

Use presignedUrl to upload your files

Chat History

Retrieve the chat history using two methods:

  1. By Subscribing to Events

  • Subscribe to the archived_message event to receive the last 1000 messages in reverse chronological order.

channel.on("archived_message", (messages)=> {
    // Handle received messages 
});

  • Subscribe to the archived_message_count event to get the total number of messages in the chat history.

channel.on("archived_message_count", (payload)=> {
    const { page: { count } } = payload;
    // Log the received count of total messages to the console
    console.log(count);
});

  • To retrieve a list of messages in the chat history, trigger the archived_message event to obtain the messages. Specify the size parameter to determine the number of messages you wish to fetch, and set the offset parameter as the starting index of the messages and group_by_day to group messages by day.

channel.push("archived_message", { page: { size: 100, offset: 0, group_by_day: false }});

  • To receive the total count of messages at any given time, initiate the archived_message_count trigger and subscribe to the corresponding event by listening for archived_message_count.

channel.push("archived_message_count");

  1. Using the Messages API

Make a GET request to the API endpoint to fetch the chat history for a specific room.

const fetchChatHistory = async () => {
  // Construct the request payload
  const payload = {
    method: "GET",
    headers: { Authorizaton: "Bearer your-token" }
  };
  // Send the POST request to the API endpoint
  const response = await fetch("https://api.sariska.io/api/v1/messaging/rooms/{room_name}/messages", payload);
  // Check for successful response
  if (response.ok) {
  // Return the chat history data
    return await response.json();
  }
}

Fetch Specific Message

Retrieve any specific message from a room. It takes the room ID and message ID as parameters and sends a GET request to the Sariska API to fetch the specified message.

const fetchSpecificMessage = async () => {
  // Construct the request payload
  const payload = {
    method: "GET",
    headers: { Authorizaton: "Bearer your-token" }
  };
  // Send the GET request to the API endpoint
  const response = await fetch("https://api.sariska.io/api/v1/messaging/rooms/{room_name}/messages/{message_id}", payload);
  // Check for successful response
  if (response.ok) {
  // Return the specific message
    return await response.json();
  }
}

Delete Chat History

Delete chat history for a specific room.

Delete Single or Multiple Messages

const EmptyChat = async () => {
  // Construct the request payload
  const payload = {
    method: "DELETE",
    headers: { Authorizaton: "Bearer your-token" },
    body: JSON.stringify({
      message_ids: [message_id_1, message_id_2, ...],
      is_empty: false
    })
  };
  // Send the DELETE request to the API endpoint
  const response = await fetch("https://api.sariska.io/api/v1/messaging/rooms/{room_name}/messages", payload);
  // Check for successful response
  if (response.ok) {
    return await response.json();
  }
}

Delete All Chats

const EmptyChat = async () => {
  // Construct the request payload
  const payload = {
    method: "DELETE",
    headers: {Authorizaton: "Bearer your-token"},
    body: JSON.stringify({
      message_ids: [],
      is_empty: true
    })
  };
  // Send the DELETE request to the API endpoint
  const response = await fetch("https://api.sariska.io/api/v1/messaging/rooms/{room_name}/messages", payload);
  // Check for successful response
  if (response.ok) {
    return await response.json();
  }
}

Presence

The Presence object facilitates real-time synchronization of presence information between the server and the client, enabling the detection of user join and leave events.

Create a Presence Instance

To establish presence synchronization, instantiate a Presence object and provide the channel to track presence lifecycle events:

let channel = socket.channel("chat:room123")
let presence = Presence(channel)

State Synchronization

Utilize the presence.onSync callback to respond to state changes initiated by the server. For instance, to dynamically render the user list upon every list modification, implement the following:

presence.onSync(() => {
  myRenderUsersFunction(presence.list());
})

Handle Individual Join and Leave Events

The presence.onJoin and presence.onLeave callbacks allow for handling individual user join and leave events. Here is an instance:

let presence = new Presence(channel)

// Detect if the user has joined for the first time or from another tab/device
presence.onJoin((id, current, newPres) => {
  if(!current){
    console.log("User has joined for the first time", newPres)
  } else {
    console.log("User additional presence", newPres)
  }
})

// Detect if the user has left all tabs/devices, or is still present
presence.onLeave((id, current, leftPres) => {
  if(current.metas.length === 0){
    console.log("User has left from all devices", leftPres);
  } else {
    console.log("User left from a device", leftPres);
  }
})

// Receive presence data from server
presence.onSync(() => {
  presence.list(); // List of users
})

Retrieve Presence Information

The presence.list(by:) method retrieves a list of presence information based on the local metadata state. By default, it returns the entire presence metadata. Alternatively, a listBy function can be provided to filter the metadata for each presence.

For instance, if a user is online from multiple devices, each with a metadata status of "online," but their status is set to "away" on another device, the application might prefer to display the "away" status in the UI.

The following example defines a listBy function that prioritizes the first metadata registered for each user, representing the first tab or device they used to connect:

let listBy = (id, { metas: [first, ...rest] }) => {
  // Increment the presence count for the user
  first.count = rest.length + 1
  // Set the user ID for the presence metadata
  first.id = id
  // Return the prioritized presence metadata
  return first
}
// Retrieve a list of online users based on the prioritized presence metadata
let onlineUsers = presence.list(listBy)

User Typing

Send information about a user who is typing. This information can be used to update the chat interface, such as displaying a "user is typing" indicator next to the user's name.

Send User Typing Event

When a user starts typing, the following code sends a typing event to other peers.

channel.push('user_typing', { typing: true })

Receive User Typing Event

Other peers in the chat can listen for the typing event on the same channel.

channel.on("user_typing", (typing_response) => {
     console.log(typing_response);
});

For detailed real-time messaging API's, refer to Phoenix documentation.

For detailed management of chat and room APIs, refer to Sariska Swagger documentation.

Last updated