Skip to content

README.md

Latest commit

 

History

History
96 lines (72 loc) · 5.25 KB

README.md

File metadata and controls

96 lines (72 loc) · 5.25 KB
Raw

QuickBlox One-to-One Chat — React + Webpack

In this tutorial you'll add real-time one-to-one chat to a React + TypeScript app built with Webpack, using QuickBlox. Two authenticated users exchange private messages that arrive in the browser the moment they are sent, with persistent message history across reloads. The SDK is installed as a regular npm dependency and imported the standard React way.

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

This variant is for teams already on Webpack — for example, when adding chat to an existing Create React App or a custom Webpack 5 build. If you're starting a new project, the React + Vite variant is the recommended default.

Stack

  • React 19
  • TypeScript 5.7
  • Webpack 5 with ts-loader, style-loader, css-loader, html-webpack-plugin (port 3008)
  • QuickBlox JavaScript SDK 2.23.0 — installed via npm install quickblox

Run it locally

  1. Open src/config.ts — 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 dependencies and start the Webpack dev server:

    npm install
npm start

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

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

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

Project layout

react-webpack/
├── public/index.html        The HTML shell — html-webpack-plugin injects the bundle
├── package.json             Includes 'overrides' for the SDK's platform shims
├── tsconfig.json
├── webpack.config.js        resolve.alias + resolve.fallback for the SDK
└── src/
    ├── index.tsx            React entry — createRoot(...).render(<App />)
    ├── App.tsx              Shell: state.user ? <ChatScreen /> : <LoginScreen />
    ├── config.ts            Your credentials — the only file you edit
    ├── types/quickblox.ts   Narrow app-level types for SDK shapes
    ├── services/
    │   ├── auth.ts          QB.init / QB.createSession / QB.chat.connect
    │   └── chat.ts          QB.chat.dialog.create / message.list / send
    ├── context/             Context + useReducer-backed chat state
    ├── hooks/               useAuth / useDialog / useMessages / useChatListeners
    ├── components/          LoginScreen / ChatScreen / Conversation / MessageList / MessageInput
    └── styles/App.css

The contents of src/ are byte-for-byte identical to the React + Vite variant. The only differences are the entry filename (index.tsx here vs main.tsx for Vite) and the surrounding build configuration.

Why the overrides + resolve.fallback?

The QuickBlox SDK declares two platform-specific shim packages — for NativeScript and for Node — that it only requires when running on those platforms. In a browser bundle those require calls sit on dead branches, so they never execute. But Webpack 5 still tries to resolve them at build time, and it dropped automatic Node-built-in polyfills as well.

Two fixes are applied:

  1. package.json overrides replaces the two unused shim packages with the no-op noop2 package, so Webpack resolves them to an empty module:

    "overrides": {
  "quickblox": "$quickblox",
  "nativescript-xmpp-client": "npm:noop2@^2.0.0",
  "node-xmpp-client": "npm:noop2@^2.0.0"
}

  2. webpack.config.js marks the same two packages as ignored in resolve.alias and tells Webpack 5 to omit the fs and os Node built-ins:

    resolve: {
  alias: {
    'nativescript-xmpp-client': false,
    'node-xmpp-client': false,
  },
  fallback: { fs: false, os: false },
}

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 Vite version?

The same React source code is also available with Vite as the build tool — recommended for new projects: React + Vite.

Resources