官网文档
https://cloud.tencent.com/document/product/269/37413
由于我是用的laravel,所以用的web方式
<script src="/public/vendor/tim/tim-js.js"></script>
<script src="/public/vendor/tim/cos-js-sdk-v5.min.js"></script>
1、后端签名
https://cloud.tencent.com/document/product/269/32688
https://github.com/tencentyun/tls-sig-api-v2-php/blob/master/src/TLSSigAPIv2.php
拷贝一下就可以了
class TimUserSig
{
private $key = false;
private $sdkappid = 0;
public function __construct()
{
$this->key = env('TIM_KEY');
$this->sdkappid = env('TIM_SDKAPPID');
}
public function getSdkAppId()
{
return $this->sdkappid;
}
public function genUserSig( $userid, $expire = 86400*180 )
{
try {
return $this->__genSig( $userid, $expire, '', false );
} catch(\Exception $e) {
return '';
}
}
private function __genSig( $identifier, $expire, $userbuf, $userbuf_enabled )
{
$curr_time = time();
$sig_array = Array(
'TLS.ver' => '2.0',
'TLS.identifier' => strval( $identifier ),
'TLS.sdkappid' => intval( $this->sdkappid ),
'TLS.expire' => intval( $expire ),
'TLS.time' => intval( $curr_time )
);
$base64_userbuf = '';
if ( true == $userbuf_enabled ) {
$base64_userbuf = base64_encode( $userbuf );
$sig_array['TLS.userbuf'] = strval( $base64_userbuf );
}
$sig_array['TLS.sig'] = $this->hmacsha256( $identifier, $curr_time, $expire, $base64_userbuf, $userbuf_enabled );
if ( $sig_array['TLS.sig'] === false ) {
throw new \Exception( 'base64_encode error' );
}
$json_str_sig = json_encode( $sig_array );
if ( $json_str_sig === false ) {
throw new \Exception( 'json_encode error' );
}
$compressed = gzcompress( $json_str_sig );
if ( $compressed === false ) {
throw new \Exception( 'gzcompress error' );
}
return $this->base64_url_encode( $compressed );
}
private function base64_url_encode( $string )
{
static $replace = Array( '+' => '*', '/' => '-', '=' => '_' );
$base64 = base64_encode( $string );
if ( $base64 === false ) {
throw new \Exception( 'base64_encode error' );
}
return str_replace( array_keys( $replace ), array_values( $replace ), $base64 );
}
private function hmacsha256( $identifier, $curr_time, $expire, $base64_userbuf, $userbuf_enabled )
{
$content_to_be_signed = 'TLS.identifier:' . $identifier . "\n"
. 'TLS.sdkappid:' . $this->sdkappid . "\n"
. 'TLS.time:' . $curr_time . "\n"
. 'TLS.expire:' . $expire . "\n";
if ( true == $userbuf_enabled ) {
$content_to_be_signed .= 'TLS.userbuf:' . $base64_userbuf . "\n";
}
return base64_encode( hash_hmac( 'sha256', $content_to_be_signed, $this->key, true ) );
}
}
前端页面可以参考demo
https://cloud.tencent.com/document/product/269/36852
<div class="layui-card-body">
<div class="im-chat-wrapper">
<div class="layui-row">
<div class="layui-col-xs4">
<div class="im-list-container">
<div class="im-header-bar">
<button class="header-btn" title="刷新列表"><i class="layui-icon layui-icon-refresh-1" id="refushConversationList"></i></button>
</div>
<div class="im-scroll-container" id="conversationList">
</div>
</div>
</div>
<div class="layui-col-xs8">
<div class="im-current-conversation-wrapper">
<ul id="emojis">
</ul>
<div class="im-current-conversation">
<div class="im-header"><h3 id="fromUser">用户</h3></div>
<div class="im-content" id="imcontent"></div>
<div class="im-footer">
<div id="im-message-send-box-wrapper">
<div class="im-send-header-bar">
<i class="layui-icon layui-icon-face-smile-fine upload-picker" id="emojiPicker" title="发表情"></i>
<i class="layui-icon layui-icon-picture upload-picker" id="imageMessage" title="发图片"><input type="file" id="imagePicker" accept="image/*" /></i>
<i class="layui-icon layui-icon-video upload-picker" title="发视频"><input type="file" id="videoPicker" accept="video/*" /></i>
<i class="layui-icon layui-icon-file upload-picker" title="发文件"><input type="file" id="filePicker" accept=".xls,.xlsx,.doc,.docx,.csv,.pdf,.txt,.zip.tar" /></i>
</div>
<div class="im-send-box">
<textarea class="layui-textarea" rows="4" id="message"></textarea>
<button type="button" class="layui-btn im-send-btn" id="send">发送</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我这里把一些东西抽离了下
tim.js
var $ = layui.$;
var scrollContent = document.getElementById('imcontent');
/**
* 发送文本消息
*/
function sendTextMessage(tim, msg, toUsesr)
{
// 发送文本消息,Web 端与小程序端相同
// 1. 创建消息实例,接口返回的实例可以上屏
var message = tim.createTextMessage({
to: toUsesr,
conversationType: TIM.TYPES.CONV_C2C,
// 消息优先级,用于群聊(v2.4.2起支持)。如果某个群的消息超过了频率限制,后台会优先下发高优先级的消息,详细请参考:https://cloud.tencent.com/document/product/269/3663#.E6.B6.88.E6.81.AF.E4.BC.98.E5.85.88.E7.BA.A7.E4.B8.8E.E9.A2.91.E7.8E.87.E6.8E.A7.E5.88.B6)
// 支持的枚举值:TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL(默认), TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST
// priority: TIM.TYPES.MSG_PRIORITY_NORMAL,
payload: {
text: msg
}
});
// 2. 发送消息, 返回Promise
var promise = tim.sendMessage(message);
if (promise != undefined) {
promise.then(function(imResponse) {
console.log(imResponse)
if (imResponse.code == 0) {
parseMyResponse(imResponse)
}
$('#message').val('');
}).catch(function(imError) {
layer.msg('消息发送失败,请检查网络或重新发送');
});
}
}
/**
* 发送图片消息
*/
function sendImageMessage(tim, file, toUsesr)
{
var message = tim.createImageMessage({
to: toUsesr,
conversationType: TIM.TYPES.CONV_C2C,
payload: {
file: file,
},
onProgress: function(event) { console.log('file uploading:', event) }
});
// 2. 发送消息
var promise = tim.sendMessage(message);
if (promise != undefined) {
promise.then(function(imResponse) {
if (imResponse.code == 0) {
parseMyResponse(imResponse)
}
}).catch(function(imError) {
layer.msg('消息发送失败,请检查网络或重新发送');
});
}
}
/**
* 发送视频消息
*/
function sendVideoMessage(tim, file, toUsesr)
{
var message = tim.createVideoMessage({
to: toUsesr,
conversationType: TIM.TYPES.CONV_C2C,
payload: {
file: file,
},
onProgress: function(event) { console.log('file uploading:', event) }
});
// 2. 发送消息
var promise = tim.sendMessage(message);
if (promise != undefined) {
promise.then(function(imResponse) {
if (imResponse.code == 0) {
parseMyResponse(imResponse)
}
}).catch(function(imError) {
layer.msg('消息发送失败,请检查网络或重新发送');
});
}
}
/**
* 发送文件消息
*/
function sendFileMessage(tim, file, toUsesr)
{
var message = tim.createFileMessage({
to: toUsesr,
conversationType: TIM.TYPES.CONV_C2C,
payload: {
file: file,
},
onProgress: function(event) { console.log('file uploading:', event) }
});
// 2. 发送消息
var promise = tim.sendMessage(message);
if (promise != undefined) {
promise.then(function(imResponse) {
if (imResponse.code == 0) {
parseMyResponse(imResponse)
}
}).catch(function(imError) {
layer.msg('消息发送失败,请检查网络或重新发送');
});
}
}
/**
* 发送表情消息
*/
function sendFaceMessage(tim, index, emoji, toUsesr)
{
var message = tim.createFaceMessage({
to: toUsesr,
conversationType: TIM.TYPES.CONV_C2C,
payload: {
index: index,
data: emoji // String 额外数据
}
});
// 2. 发送消息
var promise = tim.sendMessage(message);
if (promise != undefined) {
promise.then(function(imResponse) {
if (imResponse.code == 0) {
parseMyResponse(imResponse)
}
}).catch(function(imError) {
layer.msg('消息发送失败,请检查网络或重新发送');
});
}
}
/**
* 获取会话列表
*/
function mgetConversationList(tim)
{
var promiseConversationList = tim.getConversationList();
if (promiseConversationList != undefined) {
promiseConversationList.then(function(imResponse) {
var conversationList = imResponse.data.conversationList; // 会话列表,用该列表覆盖原有的会话列表
if (conversationList != undefined) {
for(var i = 0; i < conversationList.length; i++) {
console.log(conversationList[i])
parseConversationList(conversationList[i]);
}
}
}).catch(function(imError) {
layer.msg('获取会话列表失败,请检查网络或重新发送');
});
}
}
/**
* 获取消息列表
*/
function mgetMessageList(tim, dataConversationID)
{
let promiseMessageList = tim.getMessageList({conversationID: dataConversationID, count: 30});
if (promiseMessageList != undefined) {
promiseMessageList.then(function(imResponse) {
var messageList = imResponse.data.messageList; // 消息列表。
console.log(messageList)
if (messageList.length > 0) {
for(var i = 0; i < messageList.length; i++) {
parseFriendResponse(messageList[i])
}
}
// 设置消息已读, 这里默认最多未读消息30条
tim.setMessageRead({conversationID: dataConversationID});
//const nextReqMessageID = imResponse.data.nextReqMessageID; // 用于续拉,分页续拉时需传入该字段。
//const isCompleted = imResponse.data.isCompleted; // 表示是否已经拉完所有消息。
});
}
}
/**
*
* 解析发送回调
*/
function parseImResponse(payload, resType)
{
var html = '';
if (resType == 'TIMTextElem') {
html = payload.text;
} else if (resType == 'TIMImageElem') {
var images = payload.imageInfoArray;
if (images.length > 1) {
var image = images[1].imageUrl;
html = '<img src="'+image+'" height="180"/>';
}
} else if (resType == 'TIMFileElem') {
var fileName = payload.fileName;
var fileUrl = payload.fileUrl;
html = fileName + ' <a href="'+fileUrl+'" style="color:#0099CC">下载</a>';
} else if (resType == 'TIMFaceElem') {
var emoji = payload.data;
html = '<img src="https://imgcache.qq.com/open/qcloud/tim/assets/emoji/'+emoji+'" width="30" height="30"/>';
}
return html;
}
/**
*
* 解析会话列表回调
*/
function parseImConversationResponse(payload, resType)
{
var html = '';
if (resType == 'TIMTextElem') {
html = payload.text;
} else if (resType == 'TIMImageElem') {
html = '[图片]';
} else if (resType == 'TIMFileElem') {
html = '[文件]';
} else if (resType == 'TIMFaceElem') {
html = '[表情]';
}
return html;
}
/**
* 显示自己的消息
*/
function parseMyResponse(imResponse)
{
var resData = imResponse.data.message;
var resType = resData.type;
var resPayload = resData.payload;
var html = parseImResponse(resPayload, resType);
var resDate = formatDateTime(resData.time);
var resAvatar = 'https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-2.png';
if (html != '') {
var htmlRes = myMessage(resAvatar, resDate, html);
$('#imcontent').append(htmlRes);
scrollContent.scrollTop = scrollContent.scrollHeight + 100;
}
}
/**
* 显示别人的消息
*/
function parseFriendResponse(imResponse)
{
var resType = imResponse.type;
var resPayload = imResponse.payload;
var html = parseImResponse(resPayload, resType);
var resDate = formatDateTime(imResponse.time);
var resAvatar = 'https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-2.png';
if (html != '') {
var htmlRes = friendMessage(resAvatar, resDate, html);
$('#imcontent').append(htmlRes);
scrollContent.scrollTop = scrollContent.scrollHeight + 100;
}
}
/**
* 回显自己的消息
*/
function myMessage(avatar, date, content)
{
var html = '<div class="message-wrapper position-right">';
html += '<div class="group-layout position-right">';
html += '<div class="col-1"><div class="avatar shape-circle"><img src="'+avatar+'"></div></div>';
html += '<div class="col-2">';
html += '<div class="date">'+date+'</div>';
html += '<div class="content-wrapper"><div class="message-content">'+content+'</div></div>';
html += '</div>';
html += '</div></div>';
return html;
}
/**
* 回显别人的消息
*/
function friendMessage(avatar, date, content)
{
var html = '<div class="message-wrapper position-left">';
html += '<div class="group-layout position-left">';
html += '<div class="col-1"><div class="avatar shape-circle"><img src="'+avatar+'"></div></div>';
html += '<div class="col-2">';
html += '<div class="date">'+date+'</div>';
html += '<div class="content-wrapper"><div class="message-content">'+content+'</div></div>';
html += '</div>';
html += '</div></div>';
return html;
}
/**
* 解析会话列表
*/
function parseConversationList(conversationData)
{
var resMessage = conversationData.lastMessage;
var resConversationID = conversationData.conversationID;
var resUserProfile = conversationData.userProfile;
var resUnreadCount = conversationData.unreadCount;
var resUserId = resUserProfile.userID;
var resAvatar = resUserProfile.avatar;
if (resAvatar == '') {
resAvatar = 'https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-3.png';
}
var resType = resMessage.type;
var resPayload = resMessage.payload;
var resHtml = parseImConversationResponse(resPayload, resType);
var html ='<div class="im-conversation-container" data-id="'+resConversationID+'" data-user="'+resUserId+'">';
html += '<div class="im-close-btn"><div class="im-item-delete">删除</div></div>';
html += '<div class="im-warp">';
html += '<div class="im-avatar"><img src="'+resAvatar+'" width="40" height="40" /></div>';
html += '<div class="im-content-main">';
html += '<div class="im-name-time"><div class="im-name">'+resUserId+'</div><div class="im-time">2020-10-15</div></div>';
html += '<div class="im-content-count"><div class="im-content">'+resHtml+'</div><div class="im-count">';
if (resUnreadCount > 0) {
html += '<span class="layui-badge">'+resUnreadCount+'</span>';
}
html += '</div></div>';
html += '</div></div></div>';
$('#conversationList').append(html);
}
/**
* 格式化时间戳
*/
function formatDateTime(date)
{
var date = new Date(date * 1000);
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
month = month < 10 ? "0"+month:month;
day = day < 10 ? "0"+day:day;
return year+'-'+month+'-'+day;
}
function emojis()
{
return [
'emoji_141@2x.png', 'emoji_113@2x.png', 'emoji_75@2x.png', 'emoji_7@2x.png', 'emoji_9@2x.png', 'emoji_69@2x.png',
'emoji_68@2x.png', 'emoji_85@2x.png', 'emoji_88@2x.png', 'emoji_76@2x.png', 'emoji_33@2x.png', 'emoji_27@2x.png',
'emoji_120@2x.png', 'emoji_59@2x.png', 'emoji_37@2x.png', 'emoji_5@2x.png', 'emoji_79@2x.png', 'emoji_107@2x.png',
'emoji_18@2x.png', 'emoji_105@2x.png', 'emoji_38@2x.png', 'emoji_48@2x.png', 'emoji_22@2x.png', 'emoji_49@2x.png',
'emoji_53@2x.png', 'emoji_39@2x.png', 'emoji_54@2x.png', 'emoji_10@2x.png', 'emoji_83@2x.png', 'emoji_95@2x.png',
'emoji_91@2x.png', 'emoji_8@2x.png', 'emoji_127@2x.png', 'emoji_55@2x.png', 'emoji_90@2x.png', 'emoji_29@2x.png',
'emoji_3@2x.png', 'emoji_56@2x.png', 'emoji_84@2x.png', 'emoji_111@2x.png', 'emoji_67@2x.png', 'emoji_126@2x.png',
'emoji_35@2x.png', 'emoji_15@2x.png', 'emoji_19@2x.png', 'emoji_62@2x.png', 'emoji_30@2x.png', 'emoji_133@2x.png',
'emoji_119@2x.png', 'emoji_70@2x.png', 'emoji_32@2x.png', 'emoji_17@2x.png', 'emoji_45@2x.png', 'emoji_44@2x.png',
'emoji_66@2x.png', 'emoji_104@2x.png', 'emoji_63@2x.png', 'emoji_11@2x.png', 'emoji_99@2x.png', 'emoji_108@2x.png',
'emoji_112@2x.png', 'emoji_26@2x.png', 'emoji_89@2x.png', 'emoji_14@2x.png', 'emoji_1@2x.png', 'emoji_82@2x.png',
'emoji_25@2x.png', 'emoji_71@2x.png', 'emoji_12@2x.png', 'emoji_16@2x.png', 'emoji_43@2x.png', 'emoji_64@2x.png',
'emoji_50@2x.png', 'emoji_34@2x.png', 'emoji_97@2x.png', 'emoji_92@2x.png', 'emoji_137@2x.png', 'emoji_65@2x.png',
'emoji_123@2x.png', 'emoji_135@2x.png', 'emoji_24@2x.png', 'emoji_60@2x.png', 'emoji_61@2x.png', 'emoji_140@2x.png',
'emoji_40@2x.png', 'emoji_58@2x.png', 'emoji_51@2x.png', 'emoji_23@2x.png', 'emoji_98@2x.png', 'emoji_4@2x.png',
'emoji_0@2x.png', 'emoji_116@2x.png', 'emoji_52@2x.png', 'emoji_118@2x.png', 'emoji_94@2x.png', 'emoji_28@2x.png',
'emoji_115@2x.png', 'emoji_77@2x.png', 'emoji_110@2x.png', 'emoji_87@2x.png', 'emoji_41@2x.png', 'emoji_20@2x.png',
'emoji_124@2x.png', 'emoji_86@2x.png', 'emoji_101@2x.png', 'emoji_131@2x.png', 'emoji_102@2x.png', 'emoji_139@2x.png',
'emoji_138@2x.png', 'emoji_96@2x.png', 'emoji_6@2x.png', 'emoji_114@2x.png', 'emoji_46@2x.png', 'emoji_109@2x.png',
'emoji_81@2x.png', 'emoji_72@2x.png', 'emoji_36@2x.png', 'emoji_130@2x.png', 'emoji_136@2x.png', 'emoji_134@2x.png',
'emoji_42@2x.png', 'emoji_117@2x.png', 'emoji_21@2x.png', 'emoji_31@2x.png', 'emoji_2@2x.png', 'emoji_63@2x.png',
'emoji_78@2x.png', 'emoji_132@2x.png', 'emoji_125@2x.png', 'emoji_128@2x.png', 'emoji_47@2x.png', 'emoji_80@2x.png',
'emoji_103@2x.png', 'emoji_57@2x.png', 'emoji_129@2x.png'
];
}
function wiboEmojis()
{
return {
'[NO]': 'emoji_0@2x.png',
'[OK]': 'emoji_1@2x.png',
'[下雨]': 'emoji_2@2x.png',
'[么么哒]': 'emoji_3@2x.png',
'[乒乓]': 'emoji_4@2x.png',
'[便便]': 'emoji_5@2x.png',
'[信封]': 'emoji_6@2x.png',
'[偷笑]': 'emoji_7@2x.png',
'[傲慢]': 'emoji_8@2x.png',
'[再见]': 'emoji_9@2x.png',
'[冷汗]': 'emoji_10@2x.png',
'[凋谢]': 'emoji_11@2x.png',
'[刀]': 'emoji_12@2x.png',
'[删除]': 'emoji_13@2x.png',
'[勾引]': 'emoji_14@2x.png',
'[发呆]': 'emoji_15@2x.png',
'[发抖]': 'emoji_16@2x.png',
'[可怜]': 'emoji_17@2x.png',
'[可爱]': 'emoji_18@2x.png',
'[右哼哼]': 'emoji_19@2x.png',
'[右太极]': 'emoji_20@2x.png',
'[右车头]': 'emoji_21@2x.png',
'[吐]': 'emoji_22@2x.png',
'[吓]': 'emoji_23@2x.png',
'[咒骂]': 'emoji_24@2x.png',
'[咖啡]': 'emoji_25@2x.png',
'[啤酒]': 'emoji_26@2x.png',
'[嘘]': 'emoji_27@2x.png',
'[回头]': 'emoji_28@2x.png',
'[困]': 'emoji_29@2x.png',
'[坏笑]': 'emoji_30@2x.png',
'[多云]': 'emoji_31@2x.png',
'[大兵]': 'emoji_32@2x.png',
'[大哭]': 'emoji_33@2x.png',
'[太阳]': 'emoji_34@2x.png',
'[奋斗]': 'emoji_35@2x.png',
'[奶瓶]': 'emoji_36@2x.png',
'[委屈]': 'emoji_37@2x.png',
'[害羞]': 'emoji_38@2x.png',
'[尴尬]': 'emoji_39@2x.png',
'[左哼哼]': 'emoji_40@2x.png',
'[左太极]': 'emoji_41@2x.png',
'[左车头]': 'emoji_42@2x.png',
'[差劲]': 'emoji_43@2x.png',
'[弱]': 'emoji_44@2x.png',
'[强]': 'emoji_45@2x.png',
'[彩带]': 'emoji_46@2x.png',
'[彩球]': 'emoji_47@2x.png',
'[得意]': 'emoji_48@2x.png',
'[微笑]': 'emoji_49@2x.png',
'[心碎了]': 'emoji_50@2x.png',
'[快哭了]': 'emoji_51@2x.png',
'[怄火]': 'emoji_52@2x.png',
'[怒]': 'emoji_53@2x.png',
'[惊恐]': 'emoji_54@2x.png',
'[惊讶]': 'emoji_55@2x.png',
'[憨笑]': 'emoji_56@2x.png',
'[手枪]': 'emoji_57@2x.png',
'[打哈欠]': 'emoji_58@2x.png',
'[抓狂]': 'emoji_59@2x.png',
'[折磨]': 'emoji_60@2x.png',
'[抠鼻]': 'emoji_61@2x.png',
'[抱抱]': 'emoji_62@2x.png',
'[抱拳]': 'emoji_63@2x.png',
'[拳头]': 'emoji_64@2x.png',
'[挥手]': 'emoji_65@2x.png',
'[握手]': 'emoji_66@2x.png',
'[撇嘴]': 'emoji_67@2x.png',
'[擦汗]': 'emoji_68@2x.png',
'[敲打]': 'emoji_69@2x.png',
'[晕]': 'emoji_70@2x.png',
'[月亮]': 'emoji_71@2x.png',
'[棒棒糖]': 'emoji_72@2x.png',
'[汽车]': 'emoji_73@2x.png',
'[沙发]': 'emoji_74@2x.png',
'[流汗]': 'emoji_75@2x.png',
'[流泪]': 'emoji_76@2x.png',
'[激动]': 'emoji_77@2x.png',
'[灯泡]': 'emoji_78@2x.png',
'[炸弹]': 'emoji_79@2x.png',
'[熊猫]': 'emoji_80@2x.png',
'[爆筋]': 'emoji_81@2x.png',
'[爱你]': 'emoji_82@2x.png',
'[爱心]': 'emoji_83@2x.png',
'[爱情]': 'emoji_84@2x.png',
'[猪头]': 'emoji_85@2x.png',
'[猫咪]': 'emoji_86@2x.png',
'[献吻]': 'emoji_87@2x.png',
'[玫瑰]': 'emoji_88@2x.png',
'[瓢虫]': 'emoji_89@2x.png',
'[疑问]': 'emoji_90@2x.png',
'[白眼]': 'emoji_91@2x.png',
'[皮球]': 'emoji_92@2x.png',
'[睡觉]': 'emoji_93@2x.png',
'[磕头]': 'emoji_94@2x.png',
'[示爱]': 'emoji_95@2x.png',
'[礼品袋]': 'emoji_96@2x.png',
'[礼物]': 'emoji_97@2x.png',
'[篮球]': 'emoji_98@2x.png',
'[米饭]': 'emoji_99@2x.png',
'[糗大了]': 'emoji_100@2x.png',
'[红双喜]': 'emoji_101@2x.png',
'[红灯笼]': 'emoji_102@2x.png',
'[纸巾]': 'emoji_103@2x.png',
'[胜利]': 'emoji_104@2x.png',
'[色]': 'emoji_105@2x.png',
'[药]': 'emoji_106@2x.png',
'[菜刀]': 'emoji_107@2x.png',
'[蛋糕]': 'emoji_108@2x.png',
'[蜡烛]': 'emoji_109@2x.png',
'[街舞]': 'emoji_110@2x.png',
'[衰]': 'emoji_111@2x.png',
'[西瓜]': 'emoji_112@2x.png',
'[调皮]': 'emoji_113@2x.png',
'[象棋]': 'emoji_114@2x.png',
'[跳绳]': 'emoji_115@2x.png',
'[跳跳]': 'emoji_116@2x.png',
'[车厢]': 'emoji_117@2x.png',
'[转圈]': 'emoji_118@2x.png',
'[鄙视]': 'emoji_119@2x.png',
'[酷]': 'emoji_120@2x.png',
'[钞票]': 'emoji_121@2x.png',
'[钻戒]': 'emoji_122@2x.png',
'[闪电]': 'emoji_123@2x.png',
'[闭嘴]': 'emoji_124@2x.png',
'[闹钟]': 'emoji_125@2x.png',
'[阴险]': 'emoji_126@2x.png',
'[难过]': 'emoji_127@2x.png',
'[雨伞]': 'emoji_128@2x.png',
'[青蛙]': 'emoji_129@2x.png',
'[面条]': 'emoji_130@2x.png',
'[鞭炮]': 'emoji_131@2x.png',
'[风车]': 'emoji_132@2x.png',
'[飞吻]': 'emoji_133@2x.png',
'[飞机]': 'emoji_134@2x.png',
'[饥饿]': 'emoji_135@2x.png',
'[香蕉]': 'emoji_136@2x.png',
'[骷髅]': 'emoji_137@2x.png',
'[麦克风]': 'emoji_138@2x.png',
'[麻将]': 'emoji_139@2x.png',
'[鼓掌]': 'emoji_140@2x.png',
'[龇牙]': 'emoji_141@2x.png'
};
}
function wiboEmojiNames()
{
return [
'[龇牙]',
'[调皮]',
'[流汗]',
'[偷笑]',
'[再见]',
'[敲打]',
'[擦汗]',
'[猪头]',
'[玫瑰]',
'[流泪]',
'[大哭]',
'[嘘]',
'[酷]',
'[抓狂]',
'[委屈]',
'[便便]',
'[炸弹]',
'[菜刀]',
'[可爱]',
'[色]',
'[害羞]',
'[得意]',
'[吐]',
'[微笑]',
'[怒]',
'[尴尬]',
'[惊恐]',
'[冷汗]',
'[爱心]',
'[示爱]',
'[白眼]',
'[傲慢]',
'[难过]',
'[惊讶]',
'[疑问]',
'[困]',
'[么么哒]',
'[憨笑]',
'[爱情]',
'[衰]',
'[撇嘴]',
'[阴险]',
'[奋斗]',
'[发呆]',
'[右哼哼]',
'[抱抱]',
'[坏笑]',
'[飞吻]',
'[鄙视]',
'[晕]',
'[大兵]',
'[可怜]',
'[强]',
'[弱]',
'[握手]',
'[胜利]',
'[抱拳]',
'[凋谢]',
'[米饭]',
'[蛋糕]',
'[西瓜]',
'[啤酒]',
'[瓢虫]',
'[勾引]',
'[OK]',
'[爱你]',
'[咖啡]',
'[月亮]',
'[刀]',
'[发抖]',
'[差劲]',
'[拳头]',
'[心碎了]',
'[太阳]',
'[礼物]',
'[皮球]',
'[骷髅]',
'[挥手]',
'[闪电]',
'[饥饿]',
'[咒骂]',
'[折磨]',
'[抠鼻]',
'[鼓掌]',
'[糗大了]',
'[左哼哼]',
'[打哈欠]',
'[快哭了]',
'[吓]',
'[篮球]',
'[乒乓]',
'[NO]',
'[跳跳]',
'[怄火]',
'[转圈]',
'[磕头]',
'[回头]',
'[跳绳]',
'[激动]',
'[街舞]',
'[献吻]',
'[左太极]',
'[右太极]',
'[闭嘴]',
'[猫咪]',
'[红双喜]',
'[鞭炮]',
'[红灯笼]',
'[麻将]',
'[麦克风]',
'[礼品袋]',
'[信封]',
'[象棋]',
'[彩带]',
'[蜡烛]',
'[爆筋]',
'[棒棒糖]',
'[奶瓶]',
'[面条]',
'[香蕉]',
'[飞机]',
'[左车头]',
'[车厢]',
'[右车头]',
'[多云]',
'[下雨]',
'[钞票]',
'[熊猫]',
'[灯泡]',
'[风车]',
'[闹钟]',
'[雨伞]',
'[彩球]',
'[钻戒]',
'[沙发]',
'[纸巾]',
'[手枪]',
'[青蛙]'
];
}
登录及消息发送
//var emojis = emojis();
var emojis = wiboEmojis();
var emojiNames = wiboEmojiNames();
var emojisList = '';
/*for(var i = 0; i < emojis.length; i++) {
emojisList += '<li data-index="'+i+'" data-emoji="https://imgcache.qq.com/open/qcloud/tim/assets/emoji/'+emojis[i]+'"><img src="https://imgcache.qq.com/open/qcloud/tim/assets/emoji/'+emojis[i]+'" width="30" height="30" /></li>';
}*/
for(var i = 0; i < emojiNames.length; i++) {
emojisList += '<li data-index="'+i+'" data-emoji="'+emojis[emojiNames[i]]+'"><img src="https://imgcache.qq.com/open/qcloud/tim/assets/emoji/'+emojis[emojiNames[i]]+'" width="30" height="30" /></li>';
}
$('#emojis').html(emojisList);
var scrollContent = document.getElementById('imcontent');
var userSig = '{{$userSig}}';
if (userSig == '') {
layer.msg('验证失败');
} else {
var options = {
SDKAppID: '{{$sdkAppId}}' // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
};
// 创建 SDK 实例,`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
var tim = TIM.create(options);
// 设置 SDK 日志输出级别,详细分级请参见 setLogLevel 接口的说明
tim.setLogLevel(0); // 普通级别,日志量较多,接入时建议使用
// tim.setLogLevel(1); // release 级别,SDK 输出关键信息,生产环境时建议使用
// 注册 COS SDK 插件
tim.registerPlugin({'cos-js-sdk': COS});
// 接下来可以通过 tim 进行事件绑定和构建 IM 应用
let promiseLogin = tim.login({userID: '{{$userId}}', userSig: '{{$userSig}}'});
if (promiseLogin != undefined) {
promiseLogin.then(function(imResponse) {
layer.msg('登录成功,点击刷新列表按钮获取最新信息');
}).catch(function(imError) {
layer.msg('登录失败,请检查网络或重新发送');
});
}
// 表情框显示与隐藏
$('#emojiPicker').click(function() {
$('#emojis').toggle();
})
$('#refushConversationList').click(function() {
$('#conversationList').html('');
$('#imcontent').html('');
$('#fromUser').html('');
// 获取会话列表
mgetConversationList(tim);
})
$('#conversationList').on('click', '.im-conversation-container', function() {
$('.im-conversation-container').removeClass('choose');
$(this).addClass('choose');
var dataUser = $(this).attr('data-user');
var dataConversationID = $(this).attr('data-id');
$('#imcontent').html('');
if (dataUser != '') {
var toUser = dataUser;
$('#fromUser').html(toUser);
// 获取消息
mgetMessageList(tim, dataConversationID);
// 发送文本
$('#send').click(function() {
var message = $('#message').val();
sendTextMessage(tim, message, toUser);
})
// 发送图片
$('#imagePicker').change(function(e) {
var file = e.currentTarget.files[0]
sendImageMessage(tim, file, toUser);
})
// 发送视频
$('#videoPicker').change(function(e) {
var file = e.currentTarget.files[0]
sendVideoMessage(tim, file, toUser);
})
// 发送文件
$('#filePicker').change(function(e) {
var file = e.currentTarget.files[0]
sendFileMessage(tim, file, toUser);
})
// 发送表情
$('#emojis').on('click', 'li', function() {
var dataIndex = parseInt($(this).attr('data-index'));
var dataEmoji = $(this).attr('data-emoji')
sendFaceMessage(tim, dataIndex, dataEmoji, toUser);
$('#emojis').hide();
})
}
})
$('#conversationList').on('click', '.im-conversation-container .im-close-btn', function() {
$(this).parent().remove();
})
$('#conversationList').on('mouseover', '.im-conversation-container', function() {
console.log(1111)
$(this).find('.im-close-btn').css('right', '0px');
})
$('#conversationList').on('mouseout', '.im-conversation-container', function() {
console.log(1111)
$(this).find('.im-close-btn').css('right', '-50px');
})
let onMessageReceived = function(event) {
// event.data - 存储 Message 对象的数组 - [Message]
var messages = event.data;
for(var i = 0; i< messages.length; i++) {
var resData = messages[i];
parseFriendResponse(resData)
}
};
tim.on(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived);
// 监听状态
let onSdkNotReady = function(event) {
// 如果想使用发送消息等功能,接入侧需驱动 SDK 进入 ready 状态,重新调用 login 接口即可,如下所示:
tim.login({userID: '{{$userId}}', userSig: '{{$userSig}}'});
};
tim.on(TIM.EVENT.SDK_NOT_READY, onSdkNotReady);
}