当前位置：首页 > VUE

vue实现环信

2026-02-18 16:38:23VUE

使用 Vue 集成环信 Web IM

安装环信 Web SDK

npm install easemob-websdk --save

在 Vue 项目中创建环信服务文件

// src/services/im.js
import * as WebIM from 'easemob-websdk'

const config = {
  appkey: 'YOUR_APPKEY',
  url: 'https://a1.easemob.com'
}

WebIM.config = {
  xmppURL: config.url,
  apiURL: config.url,
  appkey: config.appkey,
  Host: 'easemob.com'
}

export const IM = WebIM
export const conn = new WebIM.connection({
  appKey: config.appkey
})

初始化环信连接

在 Vue 组件中初始化连接

import { conn } from '@/services/im'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      conn.open({
        user: this.username,
        pwd: this.password,
        appKey: 'YOUR_APPKEY'
      })
    }
  }
}

监听环信事件

添加事件监听处理

vue实现环信

created() {
  conn.listen({
    onOpened: () => {
      console.log('连接成功')
    },
    onClosed: () => {
      console.log('连接关闭')
    },
    onError: (error) => {
      console.error('连接错误', error)
    },
    onTextMessage: (message) => {
      console.log('收到文本消息', message)
    }
  })
}

发送消息功能实现

发送文本消息方法

methods: {
  sendText(to, content) {
    const id = conn.getUniqueId()
    const message = new WebIM.message('txt', id)
    message.set({
      msg: content,
      to: to,
      chatType: 'singleChat'
    })
    conn.send(message.body)
  }
}

处理联系人列表

获取联系人列表

methods: {
  getContacts() {
    return new Promise((resolve) => {
      conn.getRoster({
        success: (roster) => {
          resolve(roster)
        }
      })
    })
  }
}

消息历史记录处理

获取历史消息

vue实现环信

methods: {
  getHistoryMessages(targetId) {
    const options = {
      queue: targetId,
      count: 20,
      success: (messages) => {
        console.log('历史消息', messages)
      }
    }
    conn.getHistory(options)
  }
}

断线重连处理

配置自动重连

created() {
  conn.listen({
    onConflict: () => {
      // 账号在其他设备登录
    }
  })

  // 自动重连配置
  conn.reconnect({
    interval: 2000,
    maxAttempts: 5
  })
}

组件销毁时清理

在组件销毁时关闭连接

beforeDestroy() {
  conn.close()
}

状态管理集成

建议将环信相关状态集成到 Vuex

// store/modules/im.js
export default {
  state: {
    messages: {},
    contacts: []
  },
  mutations: {
    ADD_MESSAGE(state, payload) {
      if(!state.messages[payload.from]) {
        state.messages[payload.from] = []
      }
      state.messages[payload.from].push(payload)
    }
  }
}

以上实现提供了环信 IM 在 Vue 项目中的基础集成方案，可根据实际需求扩展更多功能如群组聊天、消息撤回、已读回执等。注意替换代码中的 YOUR_APPKEY 为实际的环信应用 key。

标签: vue