one-to-one-chat

QuickBlox One-to-One Chat — React

In this tutorial you'll add real-time one-to-one chat to a React + TypeScript app with QuickBlox. The same React source code is provided in two build-tool variants — pick the one your team already uses:

• React + Vite — the recommended starting point. Vite is the default build tool for new React projects and has the fastest cold start.
• React + Webpack — the alternative for teams already on Webpack (for example, when adding chat to an existing Create React App).

Both projects share every file under src/. Only package.json, the bundler config (vite.config.ts vs webpack.config.js), and the HTML shell location differ. Once you pick a bundler, the React code you write is the same.

The full published tutorial walks through every step with explanations and screenshots: How to Build In-App Chat in a React Web Application.

What you'll build

Both projects build the same app:

• 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 through a custom hook, 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.

Architecture

The React code is split into thin layers:

• src/services/ — Promise wrappers over the callback-based QB.* SDK calls
• src/context/ — useReducer-backed Context that holds the current user, session, dialog, and messages
• src/hooks/ — custom hooks (useAuth, useDialog, useMessages, useChatListeners) that own side effects and dispatch into the reducer
• src/components/ — presentational components (LoginScreen, ChatScreen, Conversation, MessageList, MessageInput) that read from Context and render the UI
• src/types/quickblox.ts — narrow app-level TypeScript types for the SDK shapes we actually use

This is the same architecture you'd use for any data-fetching React app — QuickBlox just happens to be the data source.

SDK as an npm package

Both projects depend on quickblox as a regular npm package pinned to version 2.23.0:

"dependencies": {
  "quickblox": "2.23.0",
  "react": "19.0.0",
  "react-dom": "19.0.0"
}

In services and hooks, the SDK is imported the standard way:

import QB from 'quickblox'

The QuickBlox SDK declares two platform-specific shim packages (NativeScript and Node) as dependencies that are dead-branched in the browser. The Vite project aliases them to a local empty stub; the Webpack project uses package.json overrides to replace them with the noop2 package. Details and rationale are inside each bundler's project.

Run it locally

Open whichever variant you picked and follow the steps in its README:

• React + Vite — README — port 3007
• React + Webpack — README — port 3008

The high-level flow is the same for both:

1. Open src/config.ts — the only file you edit — and paste your App Credentials and both test users.
2. Run npm install && npm start.
3. Open http://localhost:3007/?user=A (Vite) or http://localhost:3008/?user=A (Webpack) in one tab and the matching ?user=B URL in a second tab.

Looking for the vanilla JavaScript version?

If you don't need React, the same project is also available as plain HTML + the SDK loaded from a CDN: Vanilla JavaScript.

Resources

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