web-chat

QuickBlox One-to-One Chat — Vanilla JavaScript

In this tutorial you'll add real-time one-to-one chat to a plain web page in vanilla JavaScript with QuickBlox. Two authenticated users exchange private messages that arrive in the browser the moment they are sent, with persistent message history across reloads — no backend server, no Node.js, no build step.

The full published tutorial walks through every step with explanations and screenshots: How to Build In-App Chat in a Web Application. This folder is the finished project you can clone and run.

What you'll build

• A login screen where the user signs in with their QuickBlox login and password.
• A chat screen that opens a private dialog with a fixed opponent, loads the message history, and renders new messages live as they arrive.
• A ?user=A / ?user=B URL switch that lets you open the same page in two browser tabs as two different users, without editing any file between them.

How the SDK is used

• The QuickBlox JavaScript SDK is loaded from a pinned CDN URL — unpkg.com/quickblox@2.23.0/quickblox.min.js — so the page works without npm install and without a bundler.
• QB.init configures the SDK with the App Credentials from your Dashboard.
• QB.createSession authenticates the user against the QuickBlox REST API and returns a session token.
• QB.chat.connect opens the persistent real-time connection that delivers incoming messages to the browser.
• QB.chat.dialog.create (with type: 3) opens the private 1:1 dialog with the opponent.
• QB.chat.message.list loads the persisted history.
• QB.chat.onMessageListener subscribes to incoming messages.
• QB.chat.send delivers an outgoing message to the opponent.

Run it locally

1. Open js/config.js — the only file you edit — and fill in your values:

   • App Credentials from the QuickBlox Dashboard (Overview tab → Application ID, Authorization Key, Authorization Secret, Account Key).
   • Two test users in the users object: for each of A and B, paste the login, password, and opponentId — the other user's numeric ID from Dashboard → Users → ID column.

2. Install the dev server and start it:

   npm install
   npm start

3. Open two browser tabs to see real-time delivery in both directions:

   • Tab 1: http://localhost:3001/?user=A — signs in as User A, opponent is User B.
   • Tab 2: http://localhost:3001/?user=B — signs in as User B, opponent is User A.

   Each tab pre-fills the login form with the matching profile from config.js. Press Sign in in each tab and start sending messages.

   Without ?user=… the page defaults to profile A.

Files

File	Purpose
js/config.js	Your credentials — the only file you edit
index.html	Login screen + chat screen markup, loads the SDK
js/app.js	All SDK logic — init, auth, dialog, send/receive
css/style.css	Styles (boilerplate, not covered in the tutorial)

Security note

This project signs the user in directly from the browser to keep the example self-contained. In production, do not ship the Authorization Secret in browser code — anyone who reads it can authenticate as any user in your application. Move authentication to your backend and pass a short-lived session token to the client instead.

Looking for the React version?

If your stack is React + TypeScript, the same project is also available as React (Vite or Webpack).

Resources

• Published tutorial → How to Build In-App Chat in a Web Application
• JavaScript SDK reference → docs.quickblox.com/docs/js-quick-start
• JavaScript tutorials hub → ../../../README.md