vue实现腾讯im聊天
Vue 实现腾讯云 IM 聊天功能
安装腾讯云 IM SDK
通过 npm 安装腾讯云 IM SDK：
npm install tim-js-sdk --save初始化 SDK
在 Vue 项目中引入 SDK 并初始化实例：
import TIM from 'tim-js-sdk';
const tim = TIM.create({
SDKAppID: '你的 SDKAppID'
});登录 IM 系统
调用登录接口，使用 UserSig 进行身份验证：
tim.login({ userID: '用户ID', userSig: '用户签名' }).then(() => {
console.log('登录成功');
}).catch(error => {
console.error('登录失败:', error);
});监听事件
设置事件监听器处理连接状态和消息通知：
tim.on(TIM.EVENT.SDK_READY, () => {
console.log('SDK 初始化完成');
});
tim.on(TIM.EVENT.MESSAGE_RECEIVED, (event) => {
console.log('收到新消息:', event.data);
});发送消息
创建文本消息并发送至指定会话：
const message = tim.createTextMessage({
to: '目标用户ID',
conversationType: 'C2C',
payload: {
text: '消息内容'
}
});
tim.sendMessage(message).then(() => {
console.log('消息发送成功');
});获取会话列表
拉取当前用户的会话列表：
tim.getConversationList().then((response) => {
console.log('会话列表:', response.data.conversationList);
});获取历史消息
获取指定会话的历史消息记录：
tim.getMessageList({ conversationID: '会话ID', count: 15 }).then((response) => {
console.log('历史消息:', response.data.messageList);
});集成 UI 组件
使用腾讯云官方提供的 TUIKit 快速集成 UI：
npm install @tencentcloud/chat-uikit-vue在 Vue 中引入并使用组件：
import { TUIChat, TUIConversation } from '@tencentcloud/chat-uikit-vue';
export default {
components: {
TUIChat,
TUIConversation
}
}注意事项
- UserSig 应通过后端生成，避免前端暴露密钥
- 生产环境需要处理 SDK 的重连机制
- 图片/文件消息需使用对应的 createImageMessage/createFileMessage 方法
- 群组消息需将 conversationType 设置为 'GROUP'
错误处理
建议对常见错误码进行特殊处理：
tim.on(TIM.EVENT.ERROR, (error) => {
if (error.code === 7001) {
console.warn('网络断开，尝试重新连接');
}
});
