环信WebIM 发送图片消息和显示图片发送文件和显示文件发送表情和显示表情

今天抽空用jquery做了一下环信的对接,没有做布局,只对接了他们的api

先看下页面

Html 代码如下

<!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代码如下:


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有问题,无法调通