php集成腾讯云im

最新推荐文章于 2024-05-05 11:17:47 发布
最新推荐文章于 2024-05-05 11:17:47 发布
阅读量1.3k 收藏 4
点赞数 1
分类专栏： js php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tang05709/article/details/109225651
版权
php 同时被 2 个专栏收录
209 篇文章 1 订阅
订阅专栏
js
109 篇文章 0 订阅
订阅专栏

官网文档

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 + ' &nbsp;<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);
}

 

tang05709
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PHP使用laravel框架对接腾讯IM即时聊天系统
itcont的博客
07-08 1929
框架版本： 1、封装请求路由： public function buildEndpoint(string $servername, string $command): string { $query = http_build_query([ 'sdkappid' => env('SDK_APPID', ''), 'identifier' => env('SDK_ADMIN', ''),
PHP使用laravel 6框架对接腾讯IM服务开发客服聊天系统
php_xml的博客
08-11 1209
时间：2020年8月11日10:42:39 框架版本： 1、封装请求路由： public function buildEndpoint(string $servername, string $command): string { $query = http_build_query([ 'sdkappid' => env('SDK_APPID', ''), 'identifier' => env('SDK_ADMIN', ''), 'usersig' => $this-&gt
TimSDK:腾讯云IM非官方SDK
05-11
TimSDK 腾讯即时消息的IM Sdk。 要求 PHP> = 5.5.9 OpenSSL扩展 安装 $ composer require jimchen/tim-sdk -vvv 用法 基本用法： use TimSDK ; use TimSDK \ Core \ API ; $ options = [ 'app_id' => '14000xxxx' , 'identifier' => 'admin' , 'private_key' => 'Your private key' , 'public_key' => 'Your public key' , 'http' => [ 'timeout' => 5 , 'base_uri' => 'Your base url' , ], ]; $ app = new TimCloud (
开源im即时通讯app源码系统/php即时聊天im源码/php+uniapp框架【终身使用】
仿站、源码搭建/迁移技术博客
05-05 1257
随着开源文化的蓬勃发展，即时通讯(IM)系统作为现代通信不可或缺的一部分，其开源实现正变得越来越普遍。本文将深入探讨基于PHP的全开源即时通讯源码系统，并结合UniApp开源框架，从理论基础到代码实现，再到实际应用场景，全面解析这一技术融合的潜力与实践路径。
腾讯云即时通信 IM 服务端 SDK for PHP
hedeqiang
11-08 1860
安装 $ composer require hedeqiang/ten-im -vvv 配置 使用本扩展前需要登录 即时通信 IM 控制台 创建应用，配置管理员、获取 app_id、Key 等关键信息 更多请查看并熟读 即时通信 IM 服务端API REST API 接口列表 使用 获取用户在线状态...
php对接腾讯云直播，聊天，im，云录制产生回放
宋拾壹的博客
05-21 1832
首先先在腾讯云中开通这三项 IM中创建项目 云直播 解析推拉流地址： $domain = $this->getConfig('anchor_push'); //推流地址 $domainpull = $this->getConfig('anchor_pull'); //拉流地址 $streamName = 'kangfuyuan'.$res; //直播间ID（唯一的） $key = $this->getConfig('anchor_push_key');
腾讯云即时通讯IM前端使用步骤简述
廖若星辰-LTY
01-22 6827
腾讯云 即时通讯 IM uniapp-微信小程序 客户端接入步骤/流程 为项目接入腾讯云即时通信
uniapp对接腾讯云IM+音视频生成userSig
03-14
本教程将详细讲解如何在基于Vue.js框架的uni-app项目中，对接腾讯云IM+音视频服务，并生成userSig，以便用户能够安全地进行通信。 首先，了解userSig。userSig是腾讯云IM服务中的一个重要概念，它是一个用于验证...
vue2+腾讯云IM的聊天系统
07-25
vue2腾讯云IM聊天系统
vue中使用腾讯云Im的示例
01-21
在vue中使用腾讯云Im 通信时，官方给出的文档及sdk提供的都是es5的写法。我们在vue中使用均需要用es6的方式来改写sdk的js文件及按自己所需要的业务调用对应的api就行了 对sdk的js文件改写 使用exports方法导出函数。...
腾讯云_即时通信_IM
07-13
文档中心 > 即时通信 IM > 场景方案 > 实现直播群功能 https://cloud.tencent.com/document/product/269/43002#.E6.AD.A5.E9.AA.A45.EF.BC.9A.E7.99.BB.E5.BD.95-sdk 接收消息 ...
腾讯云IM web sdk
02-23
腾讯云IM web SDK ，符合eslint代码规则，适合nodejs开发。
腾讯云通信独立模式demo
03-05
采用PHP SDK<br> 把server文件夹上传至服务器，<br> 修改server/tim/comfig.php配置<br> 修改private.pem为自己从腾讯云通讯控制台下载的私钥<br> 导入独立账号api为<br> 服务器IP+"/server/tim/apiimport.php";<br> 获取用户usersig api为<br> 服务器IP+"/server/tim/apigetsig.php";<br> 采用SDK v3.x<br> 导入android文件夹到android studio<br> 修改Config.java配置信息<br> 到此配置结束，运行即可<br>
腾讯im对接实例.zip腾讯im对接实例.zip腾讯im对接实例.zip
04-25
腾讯im对接实例.zip
（未完待续）浅谈微服务以及 常用中间件（ zookeeper redis rabbitmq）
舒婷(Zoe)
09-29 6241
传统的单体框架，已经不满足目前公司战略规划要求，近几年“微服务“ 这个字眼，出现的越来越频繁，虽然有过一年多微服务项目经验，也很难把微服务解释清楚，到底何为微服务？ 哈哈哈，好正经的开头，Martin Fowler曾在其blog上发表了”Microservices“的文章，正式提出了微服务架构，对于微服务的解释，他的定义为：微服务架构是一种架构模式，他 提倡将单一应用程序，划分为一个个独立的服务，服务之间相互协调，相互配合，为用户提供最终价值。 来一张图，感受一下微服务的魅力~ 将传统一个独...
腾讯im接入流程
Jasongy的博客
09-11 4746
1 sdk接入： 从https://www.qcloud.com/product/im下载sdk ， https://www.qcloud.com/document/product/269/1565sdk集成流程。 2 结合项目： 在集合第三方初始化appkey的头文件中，全局化相关应用配置（定义宏） 应用配置地址：https://console.qcloud.com/avc 需要全局化的字段：SdkAppId accountType （如果需要离线推送，则需要加一...
即时通讯 emj.js文件
姚辉乾
11-30 1364
export const emojiUrl = 'https://imgcache.qq.com/open/qcloud/tim/assets/emoji/' export const emojiMap = { '[NO]': 'emoji_0@2x.png', '[OK]': 'emoji_1@2x.png', '[下雨]': 'emoji_2@2x.png', '[么么哒]': 'emoji_3@2x.png', '[乒乓]': 'emoji_4@2x.png', '[便便]'.
im即时聊天离线消息php,IM-demo
weixin_32160507的博客
03-19 413
IM-DEMO即时通讯demo;主要功能：登录、注册、发送消息、添加好友、离线消息环境Ubuntu 16.04Redis 4.0.8Laravel 5.6Swoole 2.1.0Beanstalkd 1.1.0MySQL 5.7.21目录结构im-demo : 前台页面im-demo/js/config.js//laravel-server地址var api_host = 'http://loca...
腾讯云总结
qq_43406276的博客
11-29 1583
腾讯云 ps: 总结不易，来者皆是客，请尊重作者的劳动成果 CDN 腾讯云 CDN 节点默认超时时间是多长？ 腾讯云 CDN 节点默认超时时间是10秒。 在 CDN 管理下关闭接入域名，关闭后 CDN 节点上的文件会怎么样？ 若您关闭当前已接入 CDN 的域名加速服务，则 CDN 节点将会保留对应域名的接入配置，但不再产生 CDN 流量，该域名下的请求都将直接回源。 在做此...
腾讯云im 70001
最新发布
06-08
如果你需要了解关于腾讯云IM的具体内容，比如它的功能特性、使用场景、价格计划或者如何集成到应用中，你可以做如下几步操作： 1. 访问腾讯云官方网站（https://cloud.tencent.com）。 2. 在服务目录中搜索“即时...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值