WuKongIM Docs

JavaScript / Web Quickstart

Install wukongimjssdk 1.3.5, connect a user, and exchange the first online text message.

This page has one goal: exchange a text message between two online browser sessions.

Prerequisites

  • Your application server returns a uid, token, and WebSocket endpoint for both alice and bob.
  • You have two separate tabs, iframes, or browser contexts. WKSDK.shared() is a singleton; do not sign in two users inside one page context.
  • Your frontend tooling supports npm packages and TypeScript.

1. Install

npm install --save-exact wukongimjssdk@1.3.5

When using pnpm or Yarn, pin the same exact version and keep only the lockfile already used by the project.

2. Configure identity and endpoint

import WKSDK, {
  Channel,
  ChannelTypePerson,
  ConnectStatus,
  MessageText,
} from 'wukongimjssdk'

const sdk = WKSDK.shared()
sdk.config.uid = bootstrap.uid
sdk.config.token = bootstrap.token
sdk.config.addr = bootstrap.websocketUrl
sdk.config.deviceFlag = 1 // Web
sdk.config.debug = false

bootstrap is returned by your application server; it is not an SDK type. Production sites should prefer a wss:// endpoint with a correctly configured certificate.

3. Register listeners first

const onConnect = (status: ConnectStatus, reasonCode?: number) => {
  if (status === ConnectStatus.Connected) {
    console.log('WuKongIM connected')
  } else if (status === ConnectStatus.ConnectFail) {
    console.error('connect failed', reasonCode)
  } else if (status === ConnectStatus.ConnectKick) {
    console.error('this account was signed in elsewhere', reasonCode)
  }
}

const onMessage = (message: any) => {
  if (message.send) return // Sending locally also emits a message event.
  if (message.content instanceof MessageText) {
    console.log(`${message.fromUID}: ${message.content.text}`)
  }
}

const onMessageStatus = (ack: any) => {
  if (ack.reasonCode === 1) {
    console.log('message sent', ack.clientSeq, ack.messageSeq)
  } else {
    console.error('message failed', ack.clientSeq, ack.reasonCode)
  }
}

sdk.connectManager.addConnectStatusListener(onConnect)
sdk.chatManager.addMessageListener(onMessage)
sdk.chatManager.addMessageStatusListener(onMessageStatus)

Keep the function references so the page can remove the same listeners during cleanup.

4. Connect and send

sdk.connect()

After ConnectStatus.Connected, send from Alice to Bob:

const message = await sdk.chatManager.send(
  new MessageText('Hello, Bob'),
  new Channel('bob', ChannelTypePerson),
)

console.log('local message', message.clientMsgNo)

The returned Promise gives you the local message. The server result comes through onMessageStatus, while Bob's live message comes through onMessage; they are separate events.

Expected result

  1. Alice and Bob both report ConnectStatus.Connected.
  2. Alice receives a send state with reasonCode === 1.
  3. Bob prints “Hello, Bob”.

Complete runnable example

The repository's JavaScript / Web quickstart includes a two-user page, trusted local BFF, reconnect flow, and offline message recovery. Run npm ci && npm run dev in that directory.

Clean up the page with:

sdk.connectManager.removeConnectStatusListener(onConnect)
sdk.chatManager.removeMessageListener(onMessage)
sdk.chatManager.removeMessageStatusListener(onMessageStatus)
sdk.disconnect()

If connection fails, verify that the endpoint is a WebSocket address rather than an HTTP API address, then check page CSP, reverse proxy, and certificate configuration. Continue with Connection and Messages.

On this page