ImServer 前后端示例代码

原创于 2022-06-13 09:27:02 发布

· 283 阅读

0 ·

版权

文章标签：

#前端 #vue.js #javascript

ModStartBlog 专栏收录该内容

123 篇文章

订阅专栏

该博客展示了如何通过后端生成Token，并将其传递给前端，以便前端能够连接到消息服务进行聊天和监听连接状态。后端使用UserAuthRepository生成Token，而前端则使用ImServer进行连接并监听聊天消息和连接状态变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后端连接消息服务

// 生成Token
$ret = UserAuthRepository::generateToken(
  // 业务类型
  'xxx',
  // 业务系统用户ID
  1,
  // 业务系统用户昵称
  'xxx',
  // 业务系统用户头像
  'http://xxxxx/xxx.jpg'
);
$data = [
  // 获取到用户 Token，用于 ImServer 的用户初始化，需返回给前端
  'token' => $ret['data']['token'],
  // ImServer 的用户 ID
  'imUserId' => $ret['data']['user']['id'],
];

前端连接消息服务

const imServer = new ImServer()
// 监听聊天消息
imServer.addTalkListener(function (data) {
  console.log('TalkMsg', data)
})
// 连接状态变化
imServer.onConnectChange(connectionStatus => {
  console.log('onConnectChange', data)
})
imServer.connect({
  // 连接Token，需要从后端获取
  token: 'xxxxxxxx',
  // 连接成功
  onSuccess: () => {
    // 发送给用户消息
    imServer.sendTalk({
      // ImServer 的用户 ID
      toId: 5,
    }, cb)
  },
  // 连接出错
  onError: (msg) => {
    console.log('onConnectError', msg)
  }
})