一.npm 安装Web SDK。

npm install easemob-websdk --save

二. 初始化配置

console.log(process.env.IMKEY, '环境变量=======》');
WebIM.conn = new WebIM.connection({
  appKey: process.env.IMKEY,
  isHttpDNS: true, // 3.0 SDK支持,防止DNS劫持从服务端获取XMPPUrl、restUrl
  isMultiLoginSessions: true, // 是否开启多页面同步收消息,注意,需要先联系商务开通此功能
  https: true, // 是否使用https
  url: '//im-api-v2.easemob.com/ws', // socket Server地址
  apiUrl: '//a1.easemob.com', // rest Server地址
  isAutoLogin: false,
  delivery: true, // 是否发送已读回执
  isDebug: false,
  useOwnUploadFun: false, // 是否使用自己的上传方式(如将图片文件等上传到自己的服务器,构建消息时只传url)
  autoReconnectNumMax:5 // 断线最大重连次数
})

/********************************* 注册IM 回调 *************************/
WebIM.conn.listen({
  onOpened: function (message) {
    //连接成功回调
    console.log('%c [opened] 连接已成功建立', 'color: green', newDate)
  },
  onClosed: function (message) {
    console.log('退出登陆', newDate)
  }, //连接关闭回调
  onTextMessage: function (message) {
    console.log('onTextMessage: ', message)
    //判断是否有扩展字段,会议ID是否为空,如果有会议ID 就加入会议
  }, //收到文本消息
  onEmojiMessage: function (message) {
    console.log('onEmojiMessage: ', message)
  }, //收到表情消息
  onPictureMessage: function (message) {
    console.log('onPicMessage: ', message)
  }, //收到图片消息
  onCmdMessage: function (message) {
    console.log('onCmdMessage: ', message)
  }, //收到命令消息
  onCustomMessage: function (message) {
    console.log('onCmdMessage: ', message)
  }, //收到自定义消息
  onAudioMessage: function (message) {
    console.log('onAudioMessage: ', message)
    window.localStorage.setItem('audioUrl', message.url)
    let options = {
      url: message.url,
      headers: {
        Accept: 'audio/mp3',
      },
      onFileDownloadComplete: function (response) {
        console.log('>>>', response)
        // let objectUrl = WebIM.default.utils.parseDownloadResponse.call(WebIM.conn, response);
        var audio = document.createel
        var audio = document.createElement('audio')
        document.body.appendChild(audio)
        audio.src = options.url
        audio.controls = true
      },
      onFileDownloadError: function () {
        console.log('音频下载失败')
      },
    }
    WebIM.utils.download.call(WebIM.conn, options)
  }, //收到音频消息
  onLocationMessage: function (message) {
    console.log('onLocMessage: ', message)
  }, //收到位置消息
  onFileMessage: function (message) {
    console.log('onFileMessage: ', message)
  }, //收到文件消息
  recallMessage: function (message) {
    console.log('recallMessage', message)
  }, //消息撤回
  onVideoMessage: function (message) {
    console.log('onVideoMessage: ', message)
    var node = document.getElementById('getVideo')
    var option = {
      url: message.url,
      headers: {
        Accept: 'audio/mp4',
      },
      onFileDownloadComplete: function (response) {
        var objectURL = WebIM.utils.parseDownloadResponse.call(conn, response)
        node.src = objectURL
      },
      onFileDownloadError: function () {
        console.log('File down load error.')
      },
    }
    WebIM.utils.download.call(conn, option)
  }, //收到视频消息
  onPresence: function (message) {
    var myDate = new Date().toLocaleString()
    console.log('onPresence: ', myDate + JSON.stringify(message))
    switch (message.type) {
      case 'subscribe': // 对方请求添加好友
        var truthBeTold = window.confirm(message.from + '申请添加您为好友:')
        if (truthBeTold) {
          // 同意对方添加好友
          WebIM.conn.subscribed({
            to: message.from,
            message: '[resp:true]',
          })
          console.log('同意添加好友')
        } else {
          // 拒绝对方添加好友
          WebIM.conn.unsubscribed({
            to: message.from,
            message: 'rejectAddFriend', // 拒绝添加好友回复信息
          })
          console.log('拒绝添加好友')
        }
        break
      case 'subscribed': // 对方同意添加好友,已方同意添加好友
        break
      case 'unsubscribe': // 对方删除好友
        break
      case 'unsubscribed': // 被拒绝添加好友,或被对方删除好友成功
        break
      case 'memberJoinPublicGroupSuccess': // 成功加入聊天室
        console.log('join chat room success' + myDate)
        console.log(new Date().toLocaleString())
        break
      case 'joinChatRoomFaild': // 加入聊天室失败
        console.log('join chat room faild')
        break
      case 'joinPublicGroupSuccess': // 意义待查
        console.log('join public group success', message.from)
        break

      case 'joinGroupNotifications': //收到申请加群通知
        var groupNotifications = window.confirm((message.from + '申请加入群组: ' + message, groupid))
        if (groupNotifications) {
          // 同意申请
          var options = {
            applicant: message.from, // 申请加群的用户名
            groupId: message,
            groupid, // 群组ID
            success: function (res) {
              console.log('同意进群', res)
            },
          }
          WebIM.conn.agreeJoinGroup(options)
        } else {
          // 拒绝申请
          var options = {
            applicant: message.from, // 申请加群的用户名
            groupId: message,
            groupid, // 群组ID
            success: function (res) {
              console.log('同意进群', res)
            },
          }
          WebIM.conn.rejectJoinGroup(options)
        }
        break
      case 'direct_joined':
        console.log('收到群组邀请', message)
        break
      case 'createGroupACK':
        conn.createGroupAsync({
          from: message.from,
          success: function (option) {
            console.log('Create Group Succeed')
          },
        })
        break
    }
  }, //处理“广播”或“发布-订阅”消息,如联系人订阅请求、处理群组、聊天室被踢解散等消息
  onRoster: function (message) {
    for (var i = 0, l = message.length; i < l; i++) {
      var ros = message[i]
      if (ros.subscription === 'both' || ros.subscription === 'to') {
        console.log(ros.name)
      }
    }
  }, //处理好友申请
  onInviteMessage: function (message) {
    console.log('Invite')
  }, //处理群组邀请
  onOnline: function () {
    console.log('onOnline')
  }, //本机网络连接成功
  onOffline: function () {
    console.log('offline')
  }, //本机网络掉线
  onError: function (message) {
    console.log('onError: ', message)
  }, //失败回调
  onBlacklistUpdate: function (list) {
    //黑名单变动
    // 查询黑名单,将好友拉黑,将好友从黑名单移除都会回调这个函数,list则是黑名单现有的所有好友信息
    console.log(list)
  },
  onReceivedMessage: function (message) {
    console.log('onReceivedMessage: ', message)
  }, //收到消息送达服务器回执
  onDeliveredMessage: function (message) {
    console.log('onDeliveredMessage:', message)
  }, //收到消息送达客户端回执
  onReadMessage: function (message) {
    console.log('onReadMessage: ', message)
  }, //收到消息已读回执
  onCreateGroup: function (message) {
    console.log('onCreateGroup: ', message)
  }, //创建群组成功回执(需调用createGroupNew)
  onMutedMessage: function (message) {
    console.log('onMutedMessage: ', message)
  }, //如果用户在A群组被禁言,在A群发消息会走这个回调并且消息不会传递给群其它成员
})

三.登录 im

  • 一般项目中都会在注册用户时同步注册 环信。(本处忽略初测过程)
  • 登录时有一个问题是当本页面登陆了,跳转新开页面后必须还得再次调用登录才可以使用im,具体原因不清楚
// 登陆时调用此方法
  Imlogin(username, password) {
    return new Promise((resolve, reject) => {
      const options = {
        user: JSON.parse(localStorage.getItem('info'))?.id, // 用户环信账号
        pwd: localStorage.getItem('word'), // 用户环信账号密码
        appKey: process.env.IMKEY,
        success: (res) => {
          console.log(res, '环信登录成功')
          resolve()
        },
        error: (e) => {
          console.log(e.message, '登录失败')
          reject()
        },
      }
      WebIM.conn.open(options)
    })
  },

登录成功后设置收到消息的监听

Imlogin() //登录
WebIM.conn.listen({
        // 接受消息监听
        onTextMessage: (message) => {
          console.log('接受消息监听onTextMessage====>', message)
          this.ProcessingMessages(message) // 处理收到的消息的函数
        },
        onCustomMessage: (message) => {
          console.log('收到自定义消息onCmdMessage: ', message)
        }, // 收到自定义消息
        onReceivedMessage: (message) => {
          console.log('onReceivedMessage : ', message)
        },
      })
      WebIM.conn.addEventHandler('100', {
        onReceivedMessage: (message) => {
          console.log('收到消息送达服务器回执onCmdMessage: ', message)
        }, // 收到消息送达服务器回执。
        onDeliveredMessage: (message) => {
          console.log('收到消息送达客户端回执。onCmdMessage: ', message)
        }, // 收到消息送达客户端回执。
        onGroupChange: (msg) => {
          this.issendMsg = true
          console.log('++++++ijascas')
        },
      })

加入群组,屏蔽消息

let addgroup = {
            groupId: group_id, // 群组ID
            message: 'I am Tom', // 请求信息
          }
    WebIM.conn.joinGroup(addgroup).then((res) => {
              console.log(res, '申请进群')
              WebIM.conn.setSilentModeForConversation({ // 屏蔽消息
                conversationId: group_id, // 需要频闭的id
                type: 'groupChat',// 频闭类型
                options: { paramType: 0, remindType: 'ALL'  },
                success: (e) => {
                  console.log('屏蔽成功 private text Success', e)
                }, // 对成功的相关定义,sdk会将消息id登记到日志进行备份处理
                fail: (e) => {
                  console.log('屏蔽失败' + JSON.stringify(e))
                },
              })
            })
            .catch((res) => {
              this.$message({
                message: res.message,
                type: 'error',
              })
              console.log(res, '进群失败')
            })

发送消息

sendMsg() {
      if (!this.issendMsg) return
      console.log(!this.issendMsg, 'ok')
      this.Loading = true
      const id = WebIM.conn.getUniqueId() // 生成本地消息id
      const msg = new WebIM.message('custom', id) // 创建文本消息消息
      const option = {
        to: this.bidLive.group_id, // 接收消息对象(用户id)
        customEvent: '100',
        customExts: { amount: this.nextAmount + '', goodsUuid: this.goods_uuid }, // 消息内容
        // params: { amount: this.LiveGoods.next_bid, goodsUuid: this.goods_uuid }, // 消息内容
        chatType: 'groupChat', // 群聊类型设置为群聊
        // roomType: false,
        success: (e) => {
          console.log('发送消息成功,send private text Success', e)
        }, // 对成功的相关定义,sdk会将消息id登记到日志进行备份处理
        fail: (e) => {
          console.log('文字发送失败' + JSON.stringify(e))
        }, // 对失败的相关定义,sdk会将消息id登记到日志进行备份处理
      }
      msg.set(option)
      WebIM.conn.send(msg.body)
    },