快速开始 · WuKongIM Docs

安装 wukongimjssdk 1.3.5，连接用户并完成第一条在线文本消息。

这一页只做一件事：让两个在线浏览器会话互相发送一条文本消息。

前置条件

业务服务端已为 alice 和 bob 返回各自的 uid、token 和 WebSocket 地址；
两个独立标签页、iframe 或浏览器上下文。WKSDK.shared() 是单例，同一个页面上下文不要同时登录两个用户；
前端构建工具支持 npm 包和 TypeScript。

1. 安装

npm install --save-exact wukongimjssdk@1.3.5

使用 pnpm 或 Yarn 时也固定精确版本，并只保留项目原有的一种锁文件。

2. 配置身份和地址

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 是业务服务端返回的对象，不是 SDK 类型。生产站点优先使用经过正确证书配置的 wss:// 地址。

3. 先注册监听器

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 // 本端发送时也会产生消息事件
  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)

保留函数引用，页面销毁时需要用同一个引用移除监听器。

4. 连接并发送

sdk.connect()

收到 ConnectStatus.Connected 后，让 Alice 向 Bob 发送：

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

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

返回的 Promise 给出本地消息。服务器结果来自 onMessageStatus，Bob 的在线消息来自 onMessage，这是两个不同事件。

预期结果

Alice 和 Bob 都收到 ConnectStatus.Connected；
Alice 收到 reasonCode === 1 的发送状态；
Bob 打印“你好，Bob”。

完整可运行示例

仓库中的 JavaScript / Web quickstart 提供双用户页面、受信本地 BFF、断线重连和离线消息恢复。进入目录执行 npm ci && npm run dev 即可启动。

清理页面：

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

如果连接失败，检查地址是否为 WebSocket 地址而不是 HTTP API 地址，并检查页面的 CSP、反向代理和证书。下一步阅读连接管理和消息管理。

JavaScript / Web 快速开始