一.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)
},