hx-websdk
Version:
Easemob IM websdk
892 lines (843 loc) • 35.6 kB
HTML
<!--本Demo登陆测试帐号：mengyuanyuan，密码：123456, 测试对方账号：asdfghj，密码：123456-->
<html>
<head>
<meta charset="UTF-8">
<title>环信测试demo</title>
<script src="../demo/javascript/dist/webim.config.js"></script>
<script src="./dist/strophe-1.2.8.min.js"></script>
<script src="./dist/websdk-1.6.0.js"></script>
<!-- <script src="../webrtc/dist/adapter.js"></script> -->
<!-- <script src="../webrtc/dist/webrtc-1.4.11.js"></script> -->
<!-- fix: ie8 upload -->
<script type='text/javascript' src='../ie8/swfupload/swfupload.js'></script>
<script type='text/javascript' src='../ie8/swfupload/swfupload.cookie.js'></script>
<script type='text/javascript' src='../ie8/swfupload/uploadShim.js'></script>
</head>
<body>
<h2>Text Box</h2>
<div>
<input type="text" id="text">
</div>
<h2>Private</h2>
<div>
<button id="register">Register</button>
<button id="privateText">PrivateText</button>
<button id="privateCmd">PrivateCmd</button>
<button id="logout">logout</button>
<button id="reConn">reConn</button>
<div>
<br> image: <input type="file" id="image">
<button id="privateImg">PrivateImg</button>
</div>
<br>
<video id="privateVideo" style="border: 1px solid black" autoplay controls></video>
</div>
<h2>ChatRoom</h2>
<div>
<button id="roomJoin">JoinRoom</button>
<button id="roomText">RoomText</button>
<button id="roomQuit">RoomQuit</button>
<button id="listChatRooms">ListChatRooms</button>
</div>
<h2>Group</h2>
<div>
<button id="groupCreate">GroupCreate</button>
<button id="groupText">GroupText</button>
<button id="groupMember">GroupMember</button>
<button id="queryGroupInfo">QueryGroupInfo</button>
<button id="leaveGroup">LeaveGroup</button>
<button id="addToGroupBlackList">AddToGroupBlackList</button>
<button id="listGroups">ListGroups</button>
<button id="changeGroupInfo">ChangeGroupInfo</button>
<button id="getGroupBlackList">GetGroupBlackList</button>
<button id="destroyGroup">DestroyGroup</button>
<button id="addGroupMembers">AddGroupMembers</button>
<button id="removeGroupMemberFromBlackList">RemoveGroupMemberFromBlackList</button>
</div>
<h3>Roasters</h3>
<div>
<button id="getRoasters">GetRoasters</button>
<button id="addFriends">AddFriends</button>
<button id="agreeFriends">AgreeFriends</button>
<button id="rejectFriends">RejectFriends</button>
<button id="removeRoster">RemoveRoster</button>
<button id="addToBlackList">AddToBlackList</button>
<button id="getBlackList">GetBlackList</button>
<button id="removeFromBlackList">RemoveFromBlackList</button>
</div>
<h3>WebRTC</h3>
<div>
<button id="rtCall">Call</button>
<button id="rtAcceptCall">AcceptCall</button>
<button id="rtEndCall">EndCall</button>
<button id="rtAudioCall">AudioCall</button>
<div>
<video id="video" style="border: 1px solid red" autoplay>
</video>
<video id="localVideo" style="border: 1px solid blue" autoplay>
</video>
</div>
</div>
<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
});
// tips: ie8 support fileInputId should match with the file in the document
WebIM.flashUpload = UploadShim({
fileInputId: 'image'
}, conn).flashUpload;
// listern，添加回调函数
conn.listen({
onOpened: function (message) { //连接成功回调，连接成功后才可以发送消息
//如果isAutoLogin设置为false，那么必须手动设置上线，否则无法收消息
// 手动上线指的是调用conn.setPresence(); 在本例中，conn初始化时已将isAutoLogin设置为true
// 所以无需调用conn.setPresence();
console.log("%c [opened] 连接已成功建立", "color: green")
},
onTextMessage: function (message) {
// 在此接收和处理消息，根据message.type区分消息来源，私聊或群组或聊天室
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: 'asdfghj',
message: "[resp:true]"
});
// 需要反向添加对方好友
conn.subscribe({
to: message.from,
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 'joinChatRoomSuccess': // 成功加入聊天室
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>
/**
* Created by clock on 16-11-30.
*/
// open，登录
var options = {
apiUrl: WebIM.config.apiURL,
user: "mengyuanyuan",
pwd: "123456",
appKey: WebIM.config.appkey
};
var register = function () {
var option = {
username: 'bossffffsasdfasgrewgeg',
password: 'a',
nickname: 'clock',
appKey: WebIM.config.appkey,
success: function () {
console.log('regist success!');
},
error: function () {
console.log('regist error');
},
apiUrl: WebIM.config.apiURL
};
conn.signup(option);
};
// 私聊发送文本消息，发送表情同发送文本消息，只是会在对方客户端将表情文本进行解析成图片
var sendPrivateText = function () {
var id = conn.getUniqueId();
var msg = new WebIM.message('txt', id);
msg.set({
msg: 'scarecrow', // 消息内容
to: 'zzf2', // 接收消息对象
roomType: false,
success: function (id, serverMsgId) {
console.log("send private text Success");
}
});
msg.body.chatType = 'singleChat';
conn.send(msg.body);
};
// 私聊发送命令消息
var sendPrivateCmd = function () {
var id = conn.getUniqueId();
var msg = new WebIM.message('cmd', id);
msg.set({
msg: 'ls',
to: 'asdfghj',
roomType: false,
success: function (id, serverMsgId) {
console.log('CMD Success');
}
});
msg.body.chatType = 'singleChat';
conn.send(msg.body);
};
// 私聊发送图片消息
var sendPrivateImg = function () {
var id = conn.getUniqueId();
var msg = new WebIM.message('img', id);
var input = document.getElementById('image'); // 选择图片的input
var file = WebIM.utils.getFileUrl(input); // 将图片转化为二进制文件
var allowType = {
'jpg': true,
'gif': true,
'png': true,
'bmp': true
};
var option = {
apiUrl: WebIM.config.apiURL,
file: file,
to: 'asdfghj',
roomType: false,
chatType: 'singleChat',
onFileUploadError: function () {
console.log('onFileUploadError');
},
onFileUploadComplete: function () {
console.log('onFileUploadComplete');
},
success: function () {
console.log('Success');
},
};
// for ie8
try {
if (!file.filetype.toLowerCase() in allowType) {
console.log('file type error')
return
}
} catch (e) {
option.flashUpload = WebIM.flashUpload
}
msg.set(option);
conn.send(msg.body);
};
// 获取好友列表
var getRoasters = function () {
var option = {
success: function (roster) {
// roster是所有好友，格式为：
/*
[
{
jid:"easemob#chatdemoui_test1@easemob.com",
name:"test1",
subscription: "both"
// subscription的值的集合是{both, to, from, none},
// both表示互相在对方的好友列表中，
// to 和 from意义待定
// 如果添加对方为好友被拒绝则为none
}
]
*/
for (var o in roster) {
console.log("jid: ", roster[o].jid);
console.log("name: ", roster[o].name);
console.log("subscription: ", roster[o].subscription);
}
}
};
conn.getRoster(option);
};
// 添加好友
var addFriends = function () {
conn.subscribe({
to: "asdfghj",
message: "Hello World!" // Demo里面接收方没有展现出来这个message，在status字段里面
});
};
// 删除好友
var removeFriends = function () {
conn.removeRoster({
to: 'asdfghj',
success: function () {
conn.unsubscribed({
to: 'asdfghj'
});
},
error: function () {}
});
};
// 拉黑好友，对方好友列表依然可以看到已方，但无法向已方发送消息
// list的结构为{username_1: {}, username_2: {}...}，拉黑好友需要将拉黑后的黑名单里的好友信息全部传入，
// 如黑名单此时已有A，B两位好友，现想将C也拉进黑名单，正确的操作是同时将ABC的信息都传入接口中。
/*
var list = {
username_1:{
jid: 'appKey_'+username_1+'@easemob.com',
name: username_1,
subscription: 'both',
order: 2
},
username_2:{
jid: 'appKey_'+username_2+'@easemob.com',
name: username_2,
subscription: 'both',
order: 3,
type: 'jid'
},
username_3:{
jid: 'appKey_'+username_3+'@easemob.com',
name: username_3,
subscription: 'both',
order: 4,
type: 'jid'
}
}
jid, username, subscription均在获取好友列表时已获取到，用户可根据好友列表动态获取这些参数，
order不重复即可
*/
var addToBlackList = function () {
var list = {
// user_1
asdfghj: {
jid: "easemob-demo#chatdemoui_asdfghj@easemob.com",
name: "asdfghj",
subscription: 'both',
order: 2,
type: 'jid'
},
// user_2
wjy6: {
jid: "easemob-demo#chatdemoui_wjy6@easemob.com",
name: "wjy6",
subscription: 'both',
order: 3,
type: 'jid'
}
};
conn.addToBlackList({
list: list,
type: 'jid',
success: function () {
console.log('Add friend to black list success');
},
error: function () {
console.log('Add friend to black list error');
}
});
}
// 获取好友黑名单，调用这个函数会回调conn.listen里的onBlacklistUpdate函数，具体细节请参照test.js
var getBlackList = function () {
conn.getBlacklist();
};
// 将好友从黑名单拉出来
var removeBlackList = function () {
var list = {};
conn.removeFromBlackList({
list: list,
type: 'jid',
success: function () {
console.log('Remove from black list success.');
},
error: function () {
console.log('Remove from black list error.')
}
});
};
// 聊天室发送文本消息
var sendRoomText = function () {
// 退出聊天室
var id = conn.getUniqueId();
var msg = new WebIM.message('txt', id);
var option = {
msg: 'scarecrfow', // 消息内容
to: '114715680632209992', // 接收消息对象(本例为twy-room1聊天室)
roomType: true,
chatType: 'chatRoom',
success: function () {
console.log('send room text success');
},
fail: function () {
console.log('failed');
}
};
msg.set(option);
msg.setGroup('groupchat');
conn.send(msg.body);
};
// 加入聊天室
var joinRoom = function () {
// 加入聊天室
conn.joinChatRoom({
roomId: "114715680632209992"
});
};
// 退出聊天室
var quitRoom = function () {
// 退出聊天室
conn.quitChatRoom({
roomId: "114715680632209992"
});
};
// 列出所有聊天室，支持分页查询
var listRooms = function () {
var option = {
apiUrl: 'https://a1.easemob.com',
pagenum: 1, // 页数
pagesize: 20, // 每页个数
success: function (list) {
console.log(list);
},
error: function () {
console.log('List chat room error');
}
};
conn.getChatRooms(option);
}
// 群组发送文本消息
var sendGroupText = function () {
var id = conn.getUniqueId();
var msg = new WebIM.message('txt', id);
var option = {
msg: 'scarecrfow', // 消息内容
to: '1480567165764', // 接收消息对象(本例为Test聊天室)
roomType: false,
chatType: 'chatRoom',
success: function () {
console.log('send room text success');
},
fail: function () {
console.log('failed');
}
};
msg.set(option);
msg.setGroup('groupchat');
conn.send(msg.body);
};
// 建立一个群组
var createGroup = function () {
var option = {
subject: 'groupName', // 群名称
description: 'create a group test', // 群简介
members: ['wjy6', 'asdfghj'], // 以数组的形式存储需要加群的好友ID
optionsPublic: true, // 允许任何人加入
optionsModerate: false, // 加入需审批
optionsMembersOnly: false, // 不允许任何人主动加入
optionsAllowInvites: false // 允许群人员邀请
};
conn.createGroup(option);
}
// 获取群组信息（应用场景：判断用户是否为该群管理员）
var queryGroupInfo = function () {
conn.queryRoomInfo({
roomId: '1480747027186',
// settings 表示入群的权限，具体值待定
// members[0]里面包含群主信息，其结构为{affiliation: "owner", jid: appKey + "_" + username + "@easemob.com"}
// jid中的username就是群主ID
// fields的结构为：
/*
{
affiliations: "2", // 意义待查
description: "12311231313", // 群简介
maxusers: "200", // 群最大成员容量
name: "123", // 群名称
occupants: "2", // 意义待查
owner: "easemob-demo#chatdemoui_mengyuanyuan" // 群主jid
}
*/
success: function (settings, members, fields) {
console.log('settings: ', settings);
console.log('members: ', members);
console.log('fields: ', fields);
},
error: function (e) {
console.log('Error!', e);
}
});
};
// 成员主动离开群
var leaveGroup = function () {
var option = {
to: 'asdfghj',
roomId: '1480747027186',
success: function () {
console.log('You leave room succeed!');
},
error: function () {
console.log('Leave room faild');
}
};
conn.leaveGroupBySelf(option);
};
// 将成员踢出群(同将群成员拉入群黑名单)
var addToGroupBlackList = function () {
var option = {
affiliation: "owner", // 写死
roomId: "1480756943693", // 群组ID
success: function () {
console.log('add to black list succeed');
},
to: 'asdfghj' // 需要删除的成员ID
};
conn.addToGroupBlackList(option);
};
// 列出所有群组
var listGroups = function () {
var option = {
success: function (rooms) {
console.log(rooms);
},
error: function () {
console.log('List chat rooms error');
}
};
conn.listRooms(option);
};
// 修改群信息
var changeGroupInfo = function () {
var option = {
roomId: '1480756943693',
subject: 'ChangeTest',
description: 'Change group information test',
success: function () {
console.log("Change Group Names Success!");
}
};
conn.changeGroupSubject(option);
};
// 获取群组黑名单
var getGroupBlackList = function () {
var option = {
roomId: '1480758709661',
success: function (list) {
console.log('Get group black list: ', list);
},
error: function () {
console.log('Get group black list error.');
}
};
conn.getGroupBlacklist(option);
};
// 解散一个群组
var destroyGroup = function () {
var option = {
reason: 'Test Destroy Group',
roomId: '1480840256052',
success: function () {
console.log('Destroy group success!');
}
};
conn.destroyGroup(option);
};
// 加好友入群
var addGroupMembers = function () {
var option = {
list: ['asdfghj', 'wjy6'],
roomId: '1480841456167'
};
conn.addGroupMembers(option);
};
// 将好友从黑名单移除
var removeFromGroupBlackList = function () {
var option = {
roomId: '1480841456167',
to: 'wjy6',
success: function () {
console.log('Remove from black list success!');
}
};
conn.removeGroupMemberFromBlacklist(option);
};
// 查询群组成员，此方法亦可查询聊天室成员
// 查询出来的member的结构为{affiliation: 'member', jid: "easemob-demo#chatdemoui_wjy6@easemob.com"}
// 注意，这里的jid格式，成员的用户名是chatdemoui_之后，@easemob.com之前的字符串，如本例的wjy6是用户名
var queryRoomMember = function () {
var member = '';
conn.queryRoomMember({
roomId: '114715680632209992',
success: function (members) {
for (var o in members) {
member = members[o];
console.log(member);
}
}
});
};
/*
* WebRTC
*/
// 视频呼叫对方
var call = function () {
rtcCall.caller = 'wenke123';
rtcCall.makeVideoCall('asdfghj');
};
// 关掉/拒绝视频
var endCall = function () {
rtcCall.endCall();
}
// 接受对方呼叫
var acceptCall = function () {
rtcCall.acceptCall();
}
// 语音呼叫对方
var audioCall = function () {
console.log('Audio Call');
rtcCall.caller = 'wenke123';
rtcCall.makeVoiceCall('asdfghj');
};
//
var logout = function () {
// conn.clear();
conn.close('logout');
conn.errorType = WebIM.statusCode.WEBIM_CONNCTION_CLIENT_LOGOUT;
}
var reConn = function () {
//appkey： easemob-demo#vip5
//xmppURL: 'im-api-vip5.easemob.com',
//apiURL: (location.protocol === 'https:' ? 'https:' : 'http:') + '//a1-vip5.easemob.com',
//账号：10vip5/123456 ,11vip5/123456
options = {
xmppURL: 'im-api-vip5.easemob.com',
apiUrl: (location.protocol === 'https:' ? 'https:' : 'http:') + '//a1-vip5.easemob.com',
appKey: "easemob-demo#vip5",
user: "10vip5",
pwd: "123456"
};
conn.open(options)
}
</script>
<script>
/**
* Created by clock on 16-11-30.
*/
window.onload = function () {
document.getElementById('register').onclick = register;
document.getElementById('privateText').onclick = sendPrivateText;
document.getElementById('privateCmd').onclick = sendPrivateCmd;
document.getElementById('privateImg').onclick = sendPrivateImg;
document.getElementById('getBlackList').onclick = getBlackList;
document.getElementById('addToBlackList').onclick = addToBlackList;
document.getElementById('removeFromBlackList').onclick = removeBlackList;
document.getElementById('roomText').onclick = sendRoomText;
document.getElementById('roomJoin').onclick = joinRoom;
document.getElementById('roomQuit').onclick = quitRoom;
document.getElementById('listChatRooms').onclick = listRooms;
document.getElementById('groupText').onclick = sendGroupText;
document.getElementById('groupMember').onclick = queryRoomMember;
document.getElementById('groupCreate').onclick = createGroup;
document.getElementById('queryGroupInfo').onclick = queryGroupInfo;
document.getElementById('leaveGroup').onclick = leaveGroup;
document.getElementById('addToGroupBlackList').onclick = addToGroupBlackList;
document.getElementById('listGroups').onclick = listGroups;
document.getElementById('changeGroupInfo').onclick = changeGroupInfo;
document.getElementById('getGroupBlackList').onclick = getGroupBlackList;
document.getElementById('destroyGroup').onclick = destroyGroup;
document.getElementById('addGroupMembers').onclick = addGroupMembers;
document.getElementById('removeGroupMemberFromBlackList').onclick = removeFromGroupBlackList;
document.getElementById('getRoasters').onclick = getRoasters;
document.getElementById('addFriends').onclick = addFriends;
document.getElementById('removeRoster').onclick = removeFriends;
document.getElementById('rtCall').onclick = call;
document.getElementById('rtEndCall').onclick = endCall;
document.getElementById('rtAcceptCall').onclick = acceptCall;
document.getElementById('rtAudioCall').onclick = audioCall;
document.getElementById('logout').onclick = logout;
document.getElementById('reConn').onclick = reConn;
// 贴图发送（放到消息模块里）
document.addEventListener('paste', function (e) {
if (e.clipboardData && e.clipboardData.types) {
if (e.clipboardData.items.length > 0) {
if (/^image\/\w+$/.test(e.clipboardData.items[0].type)) {
var blob = e.clipboardData.items[0].getAsFile();
var url = window.URL.createObjectURL(blob);
var id = conn.getUniqueId(); //生成本地消息id
var msg = new WebIM.message('img', id);
msg.set({
apiUrl: WebIM.config.apiURL,
file: {
data: blob,
url: url
},
to: 'asdfghj',
roomType: false,
chatType: 'singleChat',
onFileUploadError: function (error) {
console.log("Error");
},
onFileUploadComplete: function (data) {
console.log("Complete", data);
},
success: function (id) {
console.log("Success");
}
});
conn.send(msg.body);
}
}
}
});
options = {
apiUrl: WebIM.config.apiURL,
user: "zzf2",
pwd: "z",
appKey: WebIM.config.appkey
};
conn.open(options);
};
</script>
</body>
</html>