今天抽空用jquery做了一下环信的对接,没有做布局,只对接了他们的api
先看下页面
Html 代码如下
代码语言：javascript复制<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial.scale=1.0">
<title>聊天</title>
</head>
<body>
<button onclick="register()">注册</button>
<button onclick="sendMsg()">发送消息</button>
<button onclick="sendEmoji()">发送表情</button>
<input type="file" placeholder="请选择图片发送" value="请选择图片" onchange="sendImg(this)"/> 发送图片
<input type="file" placeholder="请选择文件发送" value="请选择文件" onchange="sendFile(this)"/>发送文件
<input type="file" placeholder="请选择音频发送" value="请选择文件" onchange="sendPrivateAudio(this)"/>发送音频
<input type="file" placeholder="请选择视频发送" value="请选择文件" onchange="sendPrivateVideo(this)"/>发送视频
<!--<input placeholder="请复制图片到此处"/>-->
<script src="../lib/webIM-SDK/webim.config.js"></script>
<script src="../lib/webIM-SDK/strophe-1.2.8.js"></script>
<script src="../lib/webIM-SDK/websdk-1.4.13.js"></script>
<script src="index.js"></script>
</body>
</html>部分js代码如下:
代码语言：javascript复制var conn = new WebIM.connection({
isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
url: WebIM.config.xmppURL,
heartBeatWait: WebIM.config.heartBeatWait,
autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
autoReconnectInterval: WebIM.config.autoReconnectInterval,
apiUrl: WebIM.config.apiURL,
isAutoLogin: true
})
conn.listen({
onOpened: function (message) { //连接成功回调
console.log('用户已登录环信')
// 如果isAutoLogin设置为false，那么必须手动设置上线，否则无法收消息
// 手动上线指的是调用conn.setPresence(); 如果conn初始化时已将isAutoLogin设置为true
// 则无需调用conn.setPresence();
},
onClosed: function (message) {}, //连接关闭回调
onTextMessage: function (message) { //收到文本消息
console.log(`已收到文本消息,消息内容为${JSON.stringify(message)}`)
},
onEmojiMessage: function (message) { //收到表情消息
// console.log(WebIM.utils.parseEmoji(message))
console.log(`已收到表情消息,消息内容为${JSON.stringify(message)}`)
},
onPictureMessage: function (message) {//收到图片消息
console.log(`已收到图片消息,消息内容为${JSON.stringify(message)}`)
},
onCmdMessage: function (message) {}, //收到命令消息
onAudioMessage: function (message) { //收到音频消息
console.log(`已收到音频消息,消息内容为${JSON.stringify(message)}`)
},
onLocationMessage: function (message) {},//收到位置消息
onFileMessage: function (message) { //收到文件消息
console.log(`已收到文件消息,消息内容为${JSON.stringify(message)}`)
},
onVideoMessage: function (message) { //收到视频消息
console.log(`已收到视频消息,消息内容为${JSON.stringify(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群发消息会走这个回调并且消息不会传递给群其它成员
})
let urlParams = getParamsFromUrl()
let currentUser = urlParams.currentUser
let sendUser = urlParams.sendUser调试了发送文本,表情,图片,文件,和音频消息 视频消息由于SDK有问题,无法调通
