第一步首先要集成环信。要注册，我是使用的sdk3，开始的看其他人写的，但是我自己用的时候全都是坑，弄了半天也没有成功，最后干脆自己看文档，自己去实践。实践才是验证真理的唯一标准啊。
注册```javascript
var options = {
username: 用户名,
password: "密码",
nickname: ‘名称’,
appKey: WebIM.config.appkey,
success: function(result) {
//注册成功;
console.log(JSON.stringify(result));
mui.toast('注册成功');
},
error: function(e) {
//注册失败;
console.log(JSON.stringify(e));
mui.toast('注册失败：' + e.error);
},
apiUrl: WebIM.config.apiURL
};
var conn = new WebIM.connection();
conn.registerUser(options);
然后就是集成聊天了看代码首先写布局，这里大家要是写聊天的话一般都应该把布局写完了，我就在这里不写了。这个是我们接收 消息```javascript
/**
* 环信监听获取信息
*/
conn.listen({
onOpened: function(message) { //连接成功回调
// 如果isAutoLogin设置为false，那么必须手动设置上线，否则无法收消息
// 手动上线指的是调用conn.setPresence(); 如果conn初始化时已将isAutoLogin设置为true
// 则无需调用conn.setPresence();
},
onClosed: function(message) {}, //连接关闭回调
onTextMessage: function(message) {
console.log(JSON.stringify(message));
console.log(JSON.stringify(message.data));
var msg = message.data;
pushMessageToJson('receiver', 'text', msg);
msgShow('receiver', 'text', msg);
msgScrollTop();
}, //收到文本消息
onEmojiMessage: function(message) {}, //收到表情消息
onPictureMessage: function(message) {
console.log(JSON.stringify(message));
var options = {
url: message.url
};
options.onFileDownloadComplete = function(data) {
console.log(JSON.stringify(data));
console.log(data);
}
options.onFileDownloadError = function() {
// 图片下载失败
console.log('Image download failed!');
};
WebIM.utils.download.call(conn, options);
msgShow('receiver', 'img', options.url);
pushMessageToJson("receiver", "img", options.url);
msgScrollTop();
}, //收到图片消息
onCmdMessage: function(message) {}, //收到命令消息
onAudioMessage: function(message) {}, //收到音频消息
onLocationMessage: function(message) {}, //收到位置消息
onFileMessage: 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);
},
onReceivedMessage: function(message) {}, //收到消息送达服务器回执
onDeliveredMessage: function(message) {}, //收到消息送达客户端回执
onReadMessage: function(message) {}, //收到消息已读回执
onCreateGroup: function(message) {}, //创建群组成功回执（需调用createGroupNew）
onMutedMessage: function(message) {} //如果用户在A群组被禁言，在A群发消息会走这个回调并且消息不会传递给群其它成员
});
```发送文本消息var sendText = function() {
var msg = ui.boxMsgText.value.replace(new RegExp('\n', 'gm'), '<br/>');
var validateReg = /^\S+$/;
//获取键盘焦点
msgTextFocus();
if(validateReg.test(msg)) {
//显示消息
msgShow('sender', 'text', msg);
//发送文本给第三方服务器，
sendPrivateText(msg);
//todo存储信息到本地
pushMessageToJson('sender', 'text', msg);
//清空文本
ui.boxMsgText.value = "";
//恢复高度
ui.footer.style.height = '50px';
//回复输入内容
mui.trigger(ui.boxMsgText, 'input', null);
// 这一句让内容滚动起来
msgScrollTop();
} else {
mui.toast("文本消息不能为空");
}
}
发送语音消息var sendAudio = function(audioData, filename) {
var id = conn.getUniqueId(); // 生成本地消息id
var msg = new WebIM.message('audio', id); // 创建图片消息
var blob = dataURLtoBlob(audioData);
var url = window.URL.createObjectURL(blob);
var input = blobToFile(blob, filename);
var urlPath = window.URL.createObjectURL(input);
var file = {
url: urlPath,
filename: '',
filetype: '',
data: input
}
var allowType = {
'mp3': true,
'amr': true,
'wmv': true
};
file.filename = input.name || '';
var index = file.filename.lastIndexOf('.');
if(index != -1) {
file.filetype = file.filename.substring(index + 1).toLowerCase();
}
if(file.filetype.toLowerCase() in allowType) {
var option = {
apiUrl: WebIM.config.apiURL,
file: file,
to: '13269698989', // 接收消息对象
roomType: false,
chatType: 'singleChat',
onFileUploadError: function() { // 消息上传失败
console.log('onFileUploadError');
},
onFileUploadComplete: function() { // 消息上传成功
console.log('onFileUploadComplete');
},
success: function() { // 消息发送成功
console.log('Success');
},
flashUpload: WebIM.flashUpload
};
msg.set(option);
conn.send(msg.body);
}
}
发送图片消息
/**
* 发送图片
* @param {Object} path
*/
var sendPrivateImg = function(imgData, path, filename, filetype) {
var id = conn.getUniqueId(); // 生成本地消息id
var msg = new WebIM.message('img', id); // 创建图片消息
var blob = dataURLtoBlob(imgData);
var url = window.URL.createObjectURL(blob);
var input = blobToFile(blob, filename);
var urlPath = window.URL.createObjectURL(input);
console.log('path:' + urlPath);
var file = {
url: urlPath,
filename: filename,
filetype: filetype,
data: input
}
file.url = window.URL.createObjectURL(input);
file.filename = input.name || '';
var index = file.filename.lastIndexOf('.');
if(index != -1) {
file.filetype = file.filename.substring(index + 1).toLowerCase();
}
var allowType = {
'jpg': true,
'gif': true,
'png': true,
'bmp': true
};
if(file.filetype.toLowerCase() in allowType) {
var option = {
apiUrl: WebIM.config.apiURL,
file: file,
to: '13269698989', // 接收消息对象
roomType: false,
chatType: 'singleChat',
onFileUploadError: function() { // 消息上传失败
console.log('onFileUploadError');
plus.nativeUI.closeWaiting();
msgScrollTop();
},
onFileUploadComplete: function() { // 消息上传成功
console.log('onFileUploadComplete');
plus.nativeUI.closeWaiting();
msgScrollTop();
},
success: function() { // 消息发送成功
console.log('Success');
plus.nativeUI.closeWaiting();
msgScrollTop();
},
flashUpload: WebIM.flashUpload
};
msg.set(option);
conn.send(msg.body);
}
} 
4 个评论
要回复文章请先登录或注册
8***@qq.com
9***@qq.com
x***@126.com
Hero4399