Web&小程序&uni-app

chat.createTextMessage(options);

// 发送文本消息，Web 端与小程序端相同
// 1. 创建消息实例，接口返回的实例可以上屏
let message = chat.createTextMessage({
  to: 'user1',
  conversationType: TencentCloudChat.TYPES.CONV_C2C,
  // 消息优先级，用于群聊。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息
  // priority: TencentCloudChat.TYPES.MSG_PRIORITY_NORMAL,
  payload: {
    text: 'Hello world!'
  },
  // 如果您发消息需要已读回执，需购买旗舰版套餐，并且创建消息时将 needReadReceipt 设置为 true
  needReadReceipt: true
  // 消息自定义数据（云端保存，会发送到对端，程序卸载重装后还能拉取到）
  // cloudCustomData: 'your cloud custom data'
});
// 2. 发送消息
let promise = chat.sendMessage(message);
promise.then(function(imResponse) {
  // 发送成功
  console.log(imResponse);
}).catch(function(imError) {
  // 发送失败
  console.warn('sendMessage error:', imError);
});

// 发送群定向消息
// 注意：群定向消息不计入会话未读，receiverList 最大支持50个接收者。
let message = chat.createTextMessage({
  to: 'test',
  conversationType: TencentCloudChat.TYPES.CONV_GROUP,
  payload: {
    text: 'Hello world!'
  },
  // 如果您需要发群定向消息，需购买旗舰版套餐，并且创建消息时通过 receiverList 指定消息接收者
  receiverList: ['user0', 'user1']
});
// 发送消息
let promise = chat.sendMessage(message);
promise.then(function(imResponse) {
  // 发送成功
  console.log(imResponse);
}).catch(function(imError) {
  // 发送失败
  console.warn('sendMessage error:', imError);
});

chat.createTextAtMessage(options);

// 发送文本消息，Web 端与小程序端相同
// 1. 创建消息实例，接口返回的实例可以上屏
let message = chat.createTextAtMessage({
  to: 'group1',
  conversationType: TencentCloudChat.TYPES.CONV_GROUP,
  // 消息优先级，用于群聊
  // priority: TencentCloudChat.TYPES.MSG_PRIORITY_NORMAL,
  payload: {
    text: '@denny @lucy @所有人 今晚聚餐，收到的请回复1',
    // 'denny' 'lucy' 都是 userID，而非昵称
    atUserList: ['denny', 'lucy', TencentCloudChat.TYPES.MSG_AT_ALL]
  },
  // 消息自定义数据（云端保存，会发送到对端，程序卸载重装后还能拉取到）
  // cloudCustomData: 'your cloud custom data'
});
// 2. 发送消息
let promise = chat.sendMessage(message);
promise.then(function(imResponse) {
  // 发送成功
  console.log(imResponse);
}).catch(function(imError) {
  // 发送失败
  console.warn('sendMessage error:', imError);
});

chat.createImageMessage(options);

// Web 端发送图片消息示例1 - 传入 DOM 节点
// 1. 创建消息实例，接口返回的实例可以上屏
let message = chat.createImageMessage({
  to: 'user1',
  conversationType: TencentCloudChat.TYPES.CONV_C2C,
  // 消息优先级，用于群聊
  // priority: TencentCloudChat.TYPES.MSG_PRIORITY_NORMAL,
  payload: {
    file: document.getElementById('imagePicker'),
  },
  // 消息自定义数据（云端保存，会发送到对端，程序卸载重装后还能拉取到）
  // cloudCustomData: 'your cloud custom data'
  onProgress: function(event) { console.log('file uploading:', event) }
});

// 2. 发送消息
let promise = chat.sendMessage(message);
promise.then(function(imResponse) {
  // 发送成功
  console.log(imResponse);
}).catch(function(imError) {
  // 发送失败
  console.warn('sendMessage error:', imError);
});

// Web 端发送图片消息示例2- 传入 File 对象
// 先在页面上添加一个 id 为 "testPasteInput" 的消息输入框
// 如 <input type="text" id="testPasteInput" placeholder="截图后粘贴到输入框中" size="30" />
document.getElementById('testPasteInput').addEventListener('paste', function(e) {
  let clipboardData = e.clipboardData;
  let file;
  let fileCopy;
  if (clipboardData && clipboardData.files && clipboardData.files.length > 0) {
    file = clipboardData.files[0];
    // 图片消息发送成功后，file 指向的内容可能被浏览器清空，如果接入侧有额外的渲染需求，可以提前复制一份数据
    fileCopy = file.slice();
  }

  if (typeof file === 'undefined') {
    console.warn('file 是 undefined，请检查代码或浏览器兼容性！');
    return;
  }

  // 1. 创建消息实例，接口返回的实例可以上屏
  let message = chat.createImageMessage({
    to: 'user1',
    conversationType: TencentCloudChat.TYPES.CONV_C2C,
    payload: {
      file: file
    },
    onProgress: function(event) { console.log('file uploading:', event) }
  });

  // 2. 发送消息
  let promise = chat.sendMessage(message);
  promise.then(function(imResponse) {
    // 发送成功
    console.log(imResponse);
  }).catch(function(imError) {
    // 发送失败
    console.warn('sendMessage error:', imError);
  });
});

// 小程序端发送图片
// 1. 选择图片
wx.chooseImage({
  sourceType: ['album'], // 从相册选择
  count: 1, // 只选一张，目前 SDK 不支持一次发送多张图片
  success: function (res) {
    // 2. 创建消息实例，接口返回的实例可以上屏
    let message = chat.createImageMessage({
      to: 'user1',
      conversationType: TencentCloudChat.TYPES.CONV_C2C,
      payload: { file: res },
      onProgress: function(event) { console.log('file uploading:', event) }
    });
    // 3. 发送图片
    let promise = chat.sendMessage(message);
    promise.then(function(imResponse) {
      // 发送成功
      console.log(imResponse);
    }).catch(function(imError) {
      // 发送失败
      console.warn('sendMessage error:', imError);
    });
  }
})

// uni-app 发送图片
// 微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替
// 1. 选择图片
uni.chooseMedia({
  count: 1,
  mediaType: ['image'], // 图片
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album'], // 从相册选择
  success: function(res) {
    let message = chat.createImageMessage({
      to: 'user1',
      conversationType: TencentCloudChat.TYPES.CONV_C2C,
      payload: { file: res },
      onProgress: function(event) { console.log('file uploading:', event) }
    });
    // 2. 发送消息
    let promise = chat.sendMessage(message);
    promise.then(function(imResponse) {
      // 发送成功
      console.log(imResponse);
    }).catch(function(imError) {
      // 发送失败
      console.warn('sendMessage error:', imError);
    });
  }
});

chat.createAudioMessage(options);

// 示例：使用微信官方的 RecorderManager 进行录音
// 参考 https://developers.weixin.qq.com/minigame/dev/api/media/recorder/RecorderManager.start.html
// 1. 获取全局唯一的录音管理器 RecorderManager
const recorderManager = wx.getRecorderManager();

// 录音部分参数
const recordOptions = {
  duration: 60000, // 录音的时长，单位 ms，最大值 600000（10 分钟）
  sampleRate: 44100, // 采样率
  numberOfChannels: 1, // 录音通道数
  encodeBitRate: 192000, // 编码码率
  format: 'aac' // 音频格式，选择此格式创建的音频消息，可以在即时通信 IM 全平台（Android、iOS、微信小程序和Web）互通
};

// 2.1 监听录音错误事件
recorderManager.onError(function(errMsg) {
  console.warn('recorder error:', errMsg);
});
// 2.2 监听录音结束事件，录音结束后，调用 createAudioMessage 创建音频消息实例
recorderManager.onStop(function(res) {
  console.log('recorder stop', res);

  // 4. 创建消息实例，接口返回的实例可以上屏
  const message = chat.createAudioMessage({
    to: 'user1',
    conversationType: TencentCloudChat.TYPES.CONV_C2C,
    // 消息优先级，用于群聊
    // priority: TencentCloudChat.TYPES.MSG_PRIORITY_NORMAL,
    payload: {
      file: res
    },
    // 消息自定义数据（云端保存，会发送到对端，程序卸载重装后还能拉取到）
    // cloudCustomData: 'your cloud custom data'
  });

  // 5. 发送消息
  let promise = chat.sendMessage(message);
  promise.then(function(imResponse) {
    // 发送成功
    console.log(imResponse);
  }).catch(function(imError) {
    // 发送失败
    console.warn('sendMessage error:', imError);
  });
});

// 3. 开始录音
recorderManager.start(recordOptions);

// 在 Web 端创建语音消息并发送
// 示例：使用第三方库 js-audio-recorder 录制音频
// 1. 开始录制
let recorder = new Recorder({
  // 采样位数，支持 8 或 16，默认是16
  sampleBits: 16,
  // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
  sampleRate: 16000,
  // 声道，支持 1 或 2， 默认是1
  numChannels: 1,
});
let startTs;
recorder.start().then(() => {
  // 开始录音，记录起始时间戳
  startTs = Date.now();
}, (error) => {
  // 出错了
  console.log(`${error.name} : ${error.message}`);
});

// 2. 结束录制
recorder.stop();

// 3. 计算录音时长，获取 WAV 数据
let duration = Date.now() - startTs; // 单位：ms
let wavBlob = recorder.getWAVBlob();

// 4. blob 数据转成 File 对象
let audioFile = new File([wavBlob], 'hello.wav', { type: 'wav' });
audioFile.duration = duration;

// 5. 创建音频消息
let message = chat.createAudioMessage({
  to: 'user1',
  conversationType: 'C2C',
  payload: {
    file: audioFile
  }
});

// 6. 发送消息
let promise = chat.sendMessage(message);
promise.then(function(imResponse) {
  // 发送成功
  console.log(imResponse);
}).catch(function(imError) {
  // 发送失败
  console.warn('sendMessage error:', imError);
});

chat.createVideoMessage(options);

// 小程序端发送视频消息示例：
// 接口详情请查阅 https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html
// 1. 调用小程序接口选择视频
wx.chooseVideo({
  sourceType: ['album', 'camera'], // 来源相册或者拍摄
  maxDuration: 60, // 设置最长时间60s
  camera: 'back', // 后置摄像头
  success (res) {
    // 2. 创建消息实例，接口返回的实例可以上屏
    let message = chat.createVideoMessage({
      to: 'user1',
      conversationType: TencentCloudChat.TYPES.CONV_C2C,
      // 消息优先级，用于群聊
      // priority: TencentCloudChat.TYPES.MSG_PRIORITY_NORMAL,
      payload: {
        file: res
      },
      // 消息自定义数据（云端保存，会发送到对端，程序卸载重装后还能拉取到）
      // cloudCustomData: 'your cloud custom data'
      onProgress: function(event) { console.log('file uploading:', event) }
    })
    // 3. 发送消息
    let promise = chat.sendMessage(message);
    promise.then(function(imResponse) {
      // 发送成功
      console.log(imResponse);
    }).catch(function(imError) {
      // 发送失败
      console.warn('sendMessage error:', imError);
    });
  }
})

// web 端发送视频消息示例
// 1. 获取视频：传入 DOM 节点
// 2. 创建消息实例
const message = chat.createVideoMessage({
  to: 'user1',
  conversationType: TencentCloudChat.TYPES.CONV_C2C,
  payload: {
    file: document.getElementById('videoPicker') // 或者用event.target
  },
  onProgress: function(event) { console.log('file uploading:', event) }
});
// 3. 发送消息
let promise = chat.sendMessage(message);
promise.then(function(imResponse) {
  // 发送成功
  console.log(imResponse);
}).catch(function(imError) {
  // 发送失败
  console.warn('sendMessage error:', imError);
});

// uni-app 发送视频
// 1. 选择视频
uni.chooseVideo({
  count: 1,
  sourceType: ['camera', 'album'], // album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']
  maxDuration: 60, // 设置最长时间60s
  camera: 'back', // 后置摄像头
  success: function(res) {
    let message = chat.createVideoMessage({
      to: 'user1',
      conversationType: TencentCloudChat.TYPES.CONV_C2C,
      payload: { file: res },
      onProgress: function(event) { console.log('file uploading:', event) }
    });
    // 2. 发送消息
    let promise = chat.sendMessage(message);
    promise.then(function(imResponse) {
      // 发送成功
      console.log(imResponse);
    }).catch(function(imError) {
      // 发送失败
      console.warn('sendMessage error:', imError);
    });
  }
})