实时聊天的话环信还是不错的，前端如何快速看懂环信的开发文档，
环信开发文档地址：http://docs.easemob.com/im/400webimintegration/30singlechat
这里主要是Web IM集成
其实非常简单，前端要做的就是调用环信的方法：首先先上回调后的代码，也就是当你使用的环信的某个方法 那么你想要的数据就在一下的回调函数里
<script>
/**
* Created by clock on 16-11-25.
*/
var conn = {};
conn = new WebIM.connection({
isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
url: WebIM.config.xmppURL,
isAutoLogin: true,
heartBeatWait: WebIM.config.heartBeatWait,
autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
autoReconnectInterval: WebIM.config.autoReconnectInterval,
apiUrl: WebIM.config.apiURL
});
console.log(conn);
// listern，添加回调函数
conn.listen({
onOpened: function (message) { //连接成功回调，连接成功后才可以发送消息
//如果isAutoLogin设置为false，那么必须手动设置上线，否则无法收消息
// 手动上线指的是调用conn.setPresence(); 在本例中，conn初始化时已将isAutoLogin设置为true
// 所以无需调用conn.setPresence();
console.log(message);
console.log("%c [opened] 连接已成功建立", "color: green")
},
onTextMessage: function (message) {
var description = "";
for(var i in message){
var property=message[i];
description+=i+" = "+property+"\n";
}
alert(description);
// 在此接收和处理消息，根据message.type区分消息来源，私聊或群组或聊天室
console.log('fhfhf',description);
console.log(message);
console.log(message.type);
console.log('Text');
}, //收到文本消息
onEmojiMessage: function (message) {
// 当为WebIM添加了Emoji属性后，若发送的消息含WebIM.Emoji里特定的字符串，connection就会自动将
// 这些字符串和其它文字按顺序组合成一个数组，每一个数组元素的结构为{type: 'emoji(或者txt)', data:''}
// 当type='emoji'时，data表示表情图像的路径，当type='txt'时，data表示文本消息
console.log('Emoji');
var data = message.data;
for (var i = 0, l = data.length; i < l; i++) {
console.log(data[i]);
}
}, //收到表情消息
onPictureMessage: function (message) {
console.log('Picture');
var options = {url: message.url};
options.onFileDownloadComplete = function () {
// 图片下载成功
console.log('Image download complete!');
};
options.onFileDownloadError = function () {
// 图片下载失败
console.log('Image download failed!');
};
WebIM.utils.download.call(conn, options); // 意义待查
}, //收到图片消息
onCmdMessage: function (message) {
console.log('CMD');
}, //收到命令消息
onAudioMessage: function (message) {
console.log("Audio");
}, //收到音频消息
onLocationMessage: function (message) {
console.log("Location");
},//收到位置消息
onFileMessage: function (message) {
console.log("File");
}, //收到文件消息
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) {
switch (message.type) {
case 'subscribe': // 对方请求添加好友
// 同意对方添加好友
document.getElementById('agreeFriends').onclick = function (message) {
conn.subscribed({
to: 'lisi',
message: "[resp:true]"
});
};
// 拒绝对方添加好友
document.getElementById('rejectFriends').onclick = function (message) {
conn.unsubscribed({
to: message.from,
message: "rejectAddFriend" // 拒绝添加好友回复信息
});
};
break;
case 'subscribed': // 对方同意添加好友，已方同意添加好友
break;
case 'unsubscribe': // 对方删除好友
break;
case 'unsubscribed': // 被拒绝添加好友，或被对方删除好友成功
break;
case 'memberJoinPublicGroupSuccess': // 成功加入聊天室
console.log('join chat room success');
break;
case 'joinChatRoomFaild': // 加入聊天室失败
console.log('join chat room faild');
break;
case 'joinPublicGroupSuccess': // 意义待查
console.log('join public group success', message.from);
break;
case 'createGroupACK':
conn.createGroupAsync({
from: message.from,
success: function (option) {
console.log('Create Group Succeed');
}
});
break;
}
}, //收到联系人订阅请求（加好友）、处理群组、聊天室被踢解散等消息
onRoster: function (message) {
console.log('Roster');
}, //处理好友申请
onInviteMessage: function (message) {
console.log('Invite');
}, //处理群组邀请
onOnline: function () {
console.log('onLine');
}, //本机网络连接成功
onOffline: function () {
console.log('offline');
}, //本机网络掉线
onError: function (message) {
console.log('Error');
console.log(message);
if (message && message.type == 1) {
console.warn('连接建立失败！请确认您的登录账号是否和appKey匹配。')
}
}, //失败回调
onBlacklistUpdate: function (list) {
// 查询黑名单，将好友拉黑，将好友从黑名单移除都会回调这个函数，list则是黑名单现有的所有好友信息
console.log(list);
} // 黑名单变动
});
// 初始化WebRTC Call
var rtcCall = null
if (WebIM.WebRTC) {
rtcCall = new WebIM.WebRTC.Call({
connection: conn,
mediaStreamConstaints: {
audio: true,
video: true
},
listener: {
onAcceptCall: function (from, options) {
console.log('onAcceptCall::', 'from: ', from, 'options: ', options);
},
onGotRemoteStream: function (stream, streamType) {
console.log('onGotRemoteStream::', 'stream: ', stream, 'streamType: ', streamType);
var video = document.getElementById('video');
video.srcObject = stream;
},
onGotLocalStream: function (stream, streamType) {
console.log('onGotLocalStream::', 'stream:', stream, 'streamType: ', streamType);
var video = document.getElementById('localVideo');
video.srcObject = stream;
},
onRinging: function (caller) {
console.log('onRinging::', 'caller:', caller);
},
onTermCall: function (reason) {
console.log('onTermCall::');
console.log('reason:', reason);
},
onIceConnectionStateChange: function (iceState) {
console.log('onIceConnectionStateChange::', 'iceState:', iceState);
},
onError: function (e) {
console.log(e);
}
}
});
} else {
console.warn('不能进行视频通话！您的浏览器不支持webrtc或者协议不是https。')
}
</script>接下来在写一个调用环信的方法：
<script>
//注册用户 不修改用户名称第二次报错 已存在用户
var register = function () {
var option = {
username: 'bossffffsasdfasgrewgeg',
password: '123456',
nickname: 'clock',
appKey: WebIM.config.appkey,
success: function (data) {
console.log(data);
console.log('regist success!');
},
error: function () {
console.log('regist error');
},
apiUrl: WebIM.config.apiURL
};
conn.signup(option);
};
/*登录*/
var options = {
apiUrl: WebIM.config.apiURL,
user: '218',
pwd: '123456',
appKey: WebIM.config.appkey
};
conn.open(options);
// 私聊发送文本消息，发送表情同发送文本消息，只是会在对方客户端将表情文本进行解析成图片 218和lisi为好友，不是好友关系发送失败
var sendPrivateText = function () {
var id = conn.getUniqueId();
var msg = new WebIM.message('txt', id);
msg.set({
msg: 'scarecrow', // 消息内容
to: 'lisi', // 接收消息对象
roomType: false,
success: function (id, serverMsgId) {
console.log("send private text Success");
}
});
msg.body.chatType = 'singleChat';
conn.send(msg.body);
};
</script>
<div>
<button id="register">注册</button>
<button id="privateText">发送文本（表情也用这个）</button>
</div>以上是小例子，通过点击注册按钮走注册用户的方法，用户注册成功一定要登录 不然没法聊天，然后点击发送文本按钮走sendPrivateText方法，此方法成功函数里边走的是回调 onTextMessage 这个函数 里边就是回调的数据也就是我们要获取的对方的聊天内容，无论是单聊还是群聊都是这个回调函数，只是点击时候走的方法不一样而已，很重要的有点就是引js的顺序不能乱了：
<script type='text/javascript' src='webim.config.js'></script>
<script type='text/javascript' src='strophe-1.2.8.min.js'></script>
<script type='text/javascript' src='websdk-1.4.13.js'></script>
还不太会git所以整体的例子还有js没法上传~~对不起 担忧 犯错 抱歉，但是可以去 环信官方找到例子 里边都有所需要的js
扫一扫
1785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
