环信im登录及收发消息

一.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、restUrlisMultiLoginSessions: true, // 是否开启多页面同步收消息，注意，需要先联系商务开通此功能https: true, // 是否使用httpsurl: '//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.createelvar audio = document.createElement('audio')document.body.appendChild(audio)audio.src = options.urlaudio.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('拒绝添加好友')}breakcase 'subscribed': // 对方同意添加好友，已方同意添加好友breakcase 'unsubscribe': // 对方删除好友breakcase 'unsubscribed': // 被拒绝添加好友，或被对方删除好友成功breakcase 'memberJoinPublicGroupSuccess': // 成功加入聊天室console.log('join chat room success' + myDate)console.log(new Date().toLocaleString())breakcase 'joinChatRoomFaild': // 加入聊天室失败console.log('join chat room faild')breakcase 'joinPublicGroupSuccess': // 意义待查console.log('join public group success', message.from)breakcase 'joinGroupNotifications': //收到申请加群通知var groupNotifications = window.confirm((message.from + '申请加入群组: ' + message, groupid))if (groupNotifications) {// 同意申请var options = {applicant: message.from, // 申请加群的用户名groupId: message,groupid, // 群组IDsuccess: function (res) {console.log('同意进群', res)},}WebIM.conn.agreeJoinGroup(options)} else {// 拒绝申请var options = {applicant: message.from, // 申请加群的用户名groupId: message,groupid, // 群组IDsuccess: function (res) {console.log('同意进群', res)},}WebIM.conn.rejectJoinGroup(options)}breakcase 'direct_joined':console.log('收到群组邀请', message)breakcase '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 = trueconsole.log('++++++ijascas')},})

加入群组，屏蔽消息

    let addgroup = {groupId: group_id, // 群组IDmessage: 'I am Tom', // 请求信息}WebIM.conn.joinGroup(addgroup).then((res) => {console.log(res, '申请进群')WebIM.conn.setSilentModeForConversation({ // 屏蔽消息conversationId: group_id, // 需要频闭的idtype: '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) returnconsole.log(!this.issendMsg, 'ok')this.Loading = trueconst id = WebIM.conn.getUniqueId() // 生成本地消息idconst 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)},

环信im登录及收发消息相关推荐

JavaWeb聊天(Redis+环信) 一、发送接收消息、聊天记录拉取
公司有需求做一个聊天功能. APP端,跟网页端互相聊天 android端直接嵌入了环信提供的DEMO.聊天记录.都是存储在本地自己进行维护. 所以本次只需要维护网页端的聊天记录~还有接收发送的消息就好 ...
android 环信消息红点,环信3.0获取会话消息列表
环信2.0有一个获取消息列表的方法 /*! @method @brief 从数据库中加载消息 @discussion @result 加载的消息列表 */ - (NSArray *)loadAllMe ...
04环信聊天界面 - 播放语音消息
分析:需要监听messageLabel的点击事件,然后播放 1.在chatCell里给messageLabel添加点击事件 /*** 初始化*/ -(void)awakeFromNib {// 1.给 ...
04环信聊天界面 - 发送图片消息和显示图片
1.在聊天控制器连线 /*** 点击上传图片*/ - (IBAction)showImgPickerAction:(UIButton *)sender {// 图片选择控制器UIImagePicker ...
环信3.0自定义扩展消息
最近公司项目需要用到环信,早就听说过环信文档写的比较坑,继承过后才发现哪里是坑,简直是无底洞... 项目需求是这样的,菜单中有一个房源按钮,点击后弹出房源信息列表,点击列表中的Item将此条Item的 ...
android环信退出登录,环信退出登陆的的问题
退出的时候报下面的错误,不知道是怎么回事?? 10-13 11:51:56.176 26418-26418/? W/System.err: com.hyphenate.exceptions.EMNoA ...
环信-获取未读消息数量
描述: 他人发给我消息,不管在主页面还是在聊天列表页面,均能收到消息且能得到未读消息数量,但若我保留未读消息,杀掉进程,再次打开app,主页面下tabbar角标并不显示未读消息数量. 上环信官网中的社 ...
运行环信Android Demo常见问题以及语音消息播放声音小的解决方法
运行Demo为什么会下载不下来aar 导致demo的项目无法正常运行 1.打开到 buildgradle , 将MavenCental()至前,在maven库阿里云和华为里添加 allowInse ...
Android接入环信扩展消息显示头像、昵称
Android环信官方集成文档:http://docs.easemob.com/im/200androidclientintegration/10androidsdkimport 我在项目里集成环信时 ...

环信im登录及收发消息

一.npm 安装Web SDK。

二. 初始化配置

三.登录 im

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

加入群组，屏蔽消息

发送消息

环信im登录及收发消息相关推荐

最新文章

热门文章