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 bothaliceandbob. - 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.5When 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 = falsebootstrap 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
- Alice and Bob both report
ConnectStatus.Connected. - Alice receives a send state with
reasonCode === 1. - 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.