uniapp环信IM配置
文章描述：
uniapp环信IM配置与基本使用方法
创建应用
下载 IM demo
https://github.com/easemob/webim-uniapp-demo
IM文档
https://docs-im.easemob.com/im/web/intro/basic
配置操作：
1、把环信demo里面的newSDK所有文件复制到自己项目目录下面
2、把环信demo里面的utils文件下面的WebIM.js、WebIMConfig.js复制到对应自己项目目录下面
3、把WebIMConfig.js里面的appkey更换成自己的
4、App.vue配置初始化
https://docs-im.easemob.com/im/web/intro/basic
import WebIM from './utils/WebIM.js' // 1
export default {
onLaunch: function() {
//console.log('App Launch')
this.HxListen()
},
onShow: function() {
//console.log('App Show')
},
onHide: function() {
console.log('App Hide')
},
// 2
methods:{
HxListen(){
console.log('>>>>环信监听')
uni.WebIM.conn.listen({
onOpened: function () {
console.log('>>>环信链接成功')
}, //连接成功回调
onClosed: function () {
console.log('>>>退出成功')
}, //连接关闭回调
onTextMessage: function ( message ) {}, //收到文本消息
onEmojiMessage: function ( message ) {}, //收到表情消息
onPictureMessage: function ( message ) {}, //收到图片消息
onCmdMessage: function ( message ) {}, //收到命令消息
onAudioMessage: function ( message ) {}, //收到音频消息
onLocationMessage: function ( message ) {},//收到位置消息
onFileMessage: function ( message ) {}, //收到文件消息
onCustomMessage: function ( message ) {}, //收到自定义消息
onVideoMessage: function (message) {
var node = document.getElementById('privateVideo');
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 ) {}, //处理“广播”或“发布-订阅”消息，如联系人订阅请求、处理群组、聊天室被踢解散等消息
onRoster: function ( message ) {}, //处理好友申请
onInviteMessage: function ( message ) {}, //处理群组邀请
onOnline: function () {}, //本机网络连接成功
onOffline: function () {}, //本机网络掉线
onError: function ( message ) {}, //失败回调
onBlacklistUpdate: function (list) { //黑名单变动
// 查询黑名单，将好友拉黑，将好友从黑名单移除都会回调这个函数，list则是黑名单现有的所有好友信息
console.log(list);
},
onRecallMessage: function(message){}, //收到撤回消息回调
onReceivedMessage: function(message){}, //收到消息送达服务器回执
onDeliveredMessage: function(message){}, //收到消息送达客户端回执
onReadMessage: function(message){}, //收到消息已读回执
onCreateGroup: function(message){}, //创建群组成功回执（需调用createGroupNew）
onMutedMessage: function(message){}, //如果用户在A群组被禁言，在A群发消息会走这个回调并且消息不会传递给群其它成员
onChannelMessage: function(message){} //收到整个会话已读的回执，在对方发送channel ack时会在这个回调里收到消息
});
}
}
}
环信IM初始化
注册、登录、token登录、退出
index.vue
template
<template>
<view class="container">
<view class="title">环信IM</view>
<view class="list">
<view class="item" @click="login">登录</view>
<view class="item" @click="tokenLogin">token登录</view>
<view class="item" @click="logout">退出</view>
<view class="item" @click="register">注册</view>
</view>
</view>
</template>script
export default{
data(){
return{
username:'',
uuid:'',
token:''
}
},
onLoad(){
},
methods:{
// 用户名密码登录
login(){
var options = {
user: '183****2362',
pwd: '123456',
appKey: uni.WebIM.config.appkey,
success:(res)=>{
console.log(res.user)
const { access_token } = res;
//console.log(access_token)
if(access_token){
uni.setStorageSync('token',access_token)
uni.setStorageSync('username',res.user.username)
uni.setStorageSync('uuid',res.user.uuid)
uni.showToast({
title:'登录成功',
icon:'none'
})
this.username = res.user.username
this.uuid = res.user.uuid
this.token = access_token
}
}
};
uni.WebIM.conn.open(options);
},
// token登录
tokenLogin(){
const token = uni.getStorageSync('token')
var options = {
user: '183****2362',
accessToken: token,
appKey: uni.WebIM.config.appkey
};
uni.WebIM.conn.open(options);
},
// 退出
logout(){
uni.WebIM.conn.close();
uni.removeStorageSync('username')
uni.removeStorageSync('uuid')
uni.removeStorageSync('token')
this.username = ''
this.uuid = ''
this.token = ''
uni.showToast({
title:'退出成功',
icon:'none'
})
},
// 注册
register(){
var username = 'a123456';
var password = '123456';
var nickname = 'A123456';
var options = {
username: username,
password: password,
nickname: nickname,
appKey: uni.WebIM.config.appkey,
success: function (res) {
console.log('注册成功！')
console.log(res.entities[0].uuid)
},
error: function (err) {
//let errorData = JSON.parse(err.data);
let errorData = err.data
// console.log(errorData)
// return false
if (errorData.error === 'duplicate_unique_property_exists') {
console.log('用户已存在！');
} else if (errorData.error === 'illegal_argument') {
if (errorData.error_description === 'USERNAME_TOO_LONG') {
console.log('用户名超过64个字节！')
}else{
console.log('用户名不合法！')
}
} else if (errorData.error === 'unauthorized') {
console.log('注册失败，无权限！')
} else if (errorData.error === 'resource_limited') {
console.log('您的App用户注册数量已达上限,请升级至企业版！')
}
},
};
uni.WebIM.conn.registerUser(options);
}
}
}
style
.container{
padding: 20upx 30upx;
}
.title{
font-size: 42upx;
color: #00aeec;
padding: 30upx;
border-bottom: 1upx solid #00aeec;
margin-bottom: 30upx;
text-align: center;
}
.list .item{
width: 200upx;
text-align: center;
background: #00aeec;
color: #fff;
padding: 20upx 20upx;
margin-bottom: 40upx;
font-size: 24upx;
border-radius: 10upx;
}
发布时间：2022/08/31
发表评论