web 接入騰訊雲通訊實現即時通訊

時間 2019-11-17

原文原文鏈接

介紹

騰訊是國內最先也是最大的即時通信開發商，QQ 和微信已經成爲每一個互聯網用戶必不可少的應用。順應行業數字化轉型的趨勢，騰訊將高併發、高可靠的即時通信能力進行開放，您能夠輕易地根據騰訊提供的 SDK 將即時通信功能集成到 App 中，來知足您業務的各類需求。針對開發者的不一樣階段需求及不一樣場景，雲通訊 IM 團隊提供了一系列解決方案，包括：Android、iOS、Windows、Web 的 SDK 組件、服務端集成 REST API 接口、第三方回調接口等。利用這些組件和能力，開發者能夠簡單快捷地構建高可靠且穩定的即時通信產品，隨心所想，觸達全球。很少逼逼，我也不太清楚，有須要能夠自行查閱官方文檔javascript

準備

在開始擼代碼以前咱們須要先登陸雲通訊 IM 控制檯來建立咱們的應用css

本案例源碼我的博客雲通訊控制檯html

建立應用

我是建立過了纔會有我標紅框的地方，你們第一次進來是沒有的哈，不要介意java

這個東西隨便填吧，目前好像是沒啥影響jquery

配置應用

點擊應用配置git

帳號體系集成這裏是比較重要的，請你們定不要忘記，否則無法繼續下去的github

開發輔助工具

填入咱們剛剛下載下來的私鑰內容，userid 隨便填web

而後會生成一個簽名，建議你們建立個txt文件，把userid和簽名記下來，咱們後續會用到。而且你們按照這個步驟多生成幾回簽名，方便後續的測試json

下載 demo

從 Github 下載 IM SDK H5 開發包。其實這個項目我並無寫太多的代碼，由於看了下這個demo 寫的很全，咱們須要什麼功能直接 COPY 而後改一改就OK了數組

開始 COPY 修修改改

你們個剛下載下來的demo目錄應該是這個樣子的

接下來咱們須要把 base.js、jquery.js、login.js、receive_new_msg.js、send_common_msg.js、show_one_msg.js 以及咱們的主角 webim.js 複製到咱們目錄下的js目錄下

接下來咱們寫一下簡單的樣式，並引入js 和一些配置。先聲明哈：我偷了個懶一半寫一半複製了demo的樣式，不要噴我哈

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style> .lable { width: 100px; text-align: justify; display: inline-block; } .login { margin: 100px auto; position: relative; padding: 20px; width: 300px; height: 200px; border: 2px dashed #999999; } .btn-login { position: absolute; bottom: 50px; right: 50px; width: 100px; } #p_my_face { position: relative; width: 60px; height: 60px; border: 1px white solid; margin: 10px; float: left; } #t_my_name { position: relative; top: 10px; left: 10px; float: left; font-size: 20px; color: white; } #webim_demo { display: none; } .chatpart { width: 539px; border: 0px red solid; background: #d7eaf3; margin: 20px auto; } .msgflow { width: 525px; height: 380px; border: 1px rgb(181, 178, 178) solid; padding: 20px 6px 0 6px; background: #f5f5f5; overflow: auto; } .msgflow .onemsg { position: relative; } .msgflow .onemsg .msghead { color: green; line-height: 12px; font-size: 12px; } .msgflow .onemsg .msgbody { margin: 0 0 0 18px; line-height: 13px; font-size: 14px; } .msgflow .msgbody img { max-width: 500px; } .msgedit { width: 525px; height: 100px; border: 1px rgb(181, 178, 178) solid; background: #f5f5f5; padding: 6px 6px; line-height: 1.5; } .sendbar { width: 526px; height: 30px; } .sendbtn { float: right; width: 80px; margin-right: 10px; font: 10px/1.5 "微軟雅黑"; } .headurlClass { height: 30px; width: 30px; border-radius: 50%; } </style>
</head>

<body>

  <div id="wrapper">
    <img id="p_my_face">
    <p id="t_my_name"></p>
    <div class="login" id="login_dialog">
      <div>
        <span class="lable">identifier：</span>
        <input id="login_account" value="" type="text" placeholder='請輸入identifier' />
      </div>
      <div>
        <span class="lable">userSig：</span>
        <input id="login_pwd" value="" type="text" placeholder='userSig' />
      </div>
      <div>
        <span class="lable">selToID：</span>
        <input id="selToID" value="" type="text" placeholder='請輸入selToID' />
      </div>
      <button class="btn-login" onclick="independentModeLogin()">登陸</button>
    </div>

    <div id="webim_demo">
      <div class="chatpart">
        <div class="msgflow"></div>
        <span id="msg_end" style="overflow:hidden"></span>
        <textarea class="msgedit" cols="82" id="send_msg_text" onkeydown="onTextareaKeyDown()" rows="5"></textarea>
        <div class="sendbar">
          <button class="sendbtn" onclick="onSendMsg()" type="button">發送</button>
        </div>
      </div>
    </div>

    <script src="./js/jquery.js"></script>
    <script src="./js/base.js"></script>
    <script src="./js/webim.js"></script>
    <script src="./js/login.js"></script>
    <script src="./js/show_one_msg.js"></script>
    <script src="./js/send_common_msg.js"></script>
    <script src="./js/receive_new_msg.js"></script>

    <script type="text/javascript"> // 將如下兩個參數替換成您的配置 var sdkAppID = ''; // 填寫第一步獲取到的 sdkappid //var accountType = ''; // 填寫第二步設置帳號體系集成獲取到的 accountType , 已廢棄 // 登陸賬號 var identifier = '', // 填寫第三步輸入的 identifier，由您指定，能夠在登陸頁面直接輸入 userSig = ''; //填寫第三步生成的userSig，能夠在登陸頁面直接輸入 //賬號模式，0-表示獨立模式，1-表示託管模式(託管模式已經停用，請使用獨立模式集成賬號) var accountMode = 0; //當前用戶身份 var loginInfo = { 'sdkAppID': sdkAppID, //用戶所屬應用id,必填 // 'accountType': accountType, //用戶所屬應用賬號類型, 已廢棄 'identifier': identifier, //當前用戶ID,必須是否字符串類型，必填 'userSig': userSig, //當前用戶身份憑證，必須是字符串類型，必填 'identifierNick': null, //當前用戶暱稱，不用填寫，登陸接口會返回用戶的暱稱，若是沒有設置，則返回用戶的id 'headurl': './images/me.jpg' //當前用戶默認頭像，選填，若是設置過頭像，則能夠經過拉取我的資料接口來獲得頭像信息 }; var AdminAcount = 'qwe101'; var selType = webim.SESSION_TYPE.C2C; //當前聊天類型 var selToID = null; //當前選中聊天id（當聊天類型爲私聊時，該值爲好友賬號，不然爲羣號） var selSess = null; //當前聊天會話對象 var recentSessMap = {}; //保存最近會話列表 var reqRecentSessCount = 50; //每次請求的最近會話條數，業務能夠自定義 var isPeerRead = 1; //是否須要支持APP端已讀回執的功能,默認爲0。是：1，否：0。 //默認好友頭像 var friendHeadUrl = './images/friend.jpg'; //僅demo使用，用於沒有設置過頭像的好友 var infoMap = {}; //初始化時，能夠先拉取個人好友和個人羣組信息 //監聽鏈接狀態回調變化事件 var onConnNotify = function (resp) { var info; switch (resp.ErrorCode) { case webim.CONNECTION_STATUS.ON: webim.Log.warn('創建鏈接成功: ' + resp.ErrorInfo); break; case webim.CONNECTION_STATUS.OFF: info = '鏈接已斷開，沒法收到新消息，請檢查下你的網絡是否正常: ' + resp.ErrorInfo; // alert(info); webim.Log.warn(info); break; case webim.CONNECTION_STATUS.RECONNECT: info = '鏈接狀態恢復正常: ' + resp.ErrorInfo; // alert(info); webim.Log.warn(info); break; default: webim.Log.error('未知鏈接狀態: =' + resp.ErrorInfo); break; } }; //IE9(含)如下瀏覽器用到的jsonp回調函數 function jsonpCallback(rspData) { webim.setJsonpLastRspData(rspData); } //監聽事件 var listeners = { "onConnNotify": onConnNotify //監聽鏈接狀態回調變化事件,必填 , "jsonpCallback": jsonpCallback //IE9(含)如下瀏覽器用到的jsonp回調函數， , "onMsgNotify": onMsgNotify //監聽新消息(私聊，普通羣(非直播聊天室)消息，全員推送消息)事件，必填 , "onLongPullingNotify": function (data) { console.debug('onLongPullingNotify', data) } }; var isAccessFormalEnv = true; //是否訪問正式環境 var isLogOn = false; //是否開啓sdk在控制檯打印日誌 //初始化時，其餘對象，選填 var options = { 'isAccessFormalEnv': isAccessFormalEnv, //是否訪問正式環境，默認訪問正式，選填 'isLogOn': isLogOn //是否開啓控制檯打印日誌,默認開啓，選填 } var msgflow = document.getElementsByClassName("msgflow")[0]; var bindScrollHistoryEvent = { init: function () { msgflow.onscroll = function () { if (msgflow.scrollTop == 0) { msgflow.scrollTop = 10; if (selType == webim.SESSION_TYPE.C2C) { getPrePageC2CHistoryMsgs(); } else { getPrePageGroupHistoryMsgs(); } } } }, reset: function () { msgflow.onscroll = null; } }; </script>
</body>

</html>
複製代碼

特別提醒 =============================> sdkAppID: 必填

在這裏我只取了我須要的代碼塊，少了不少東西，不要慌張

這是咱們的一個初始頁面哈，identifuer 就是你的 userid ，userSig 就是你生成的簽名, selToID 就是你要聊天的對象，對方的 userid,我是偷懶才這麼玩的，你們實際項目中不要這麼搞哈。接下來咱們須要作登陸功能

登陸

你們有沒有注意到這個方法 independentModeLogin

其實這個方法在 base.js裏 咱們來進行改造

//點擊登陸按鈕(獨立模式)
function independentModeLogin () {
    if ($("#login_account").val().length == 0) {
        alert('請輸入賬號');
        return;
    }
    if ($("#login_pwd").val().length == 0) {
        alert('請輸入UserSig');
        return;
    }
    
    /***************************************/
    if ($("#selToID").val().length == 0) {
        alert('請輸入selToID');
        return;
    }
    /***************************************/
   
    loginInfo.identifier = $('#login_account').val();
    loginInfo.userSig = $('#login_pwd').val();
    
    /***************************************/
    selToID = $('#selToID').val();
    /***************************************/
    
    webimLogin(function () {
        $('#login_dialog').hide();
    }, function () { });
}
複製代碼

由於咱們須要對方的 userid 因此我在這加了兩段代碼

接下來咱們看到這裏有個 webimLogin 方法，一看這就是登陸的主要邏輯代碼，那確定是在 login.js裏了

function webimLogin (successCB, errorCB) {
    webim.login(
        loginInfo, listeners, options,
        function (resp) {
            successCB && successCB(resp);
            loginInfo.identifierNick = resp.identifierNick; //設置當前用戶暱稱
            loginInfo.headurl = resp.headurl; //設置當前用戶頭像
            initDemoApp();
        },
        function (err) {
            alert(err.ErrorInfo);
            errorCB && errorCB(err);
        }
    );
}
複製代碼

其實這裏咱們並不須要改什麼，咱們看到這裏有個 initDemoApp 的方法，這應該是作一些初始化的操做，咱們繼續追蹤

發現仍是在 base.js 裏

function initDemoApp () {
    $("body").css("background-color", '#2f2f2f');
    $("#webim_demo").show();
    document.getElementById("p_my_face").src = loginInfo.headurl || './images/me.jpg';
    if (loginInfo.identifierNick) {
        document.getElementById("t_my_name").innerHTML = webim.Tool.formatText2Html(loginInfo.identifierNick);
    } else {
        document.getElementById("t_my_name").innerHTML = webim.Tool.formatText2Html(loginInfo.identifier);
    }
}
複製代碼

代碼邏輯也都不難，你們一看也大概能看的明白

聊天

如今你們嘗試登陸，進來後會是這個樣子，而且咱們看到有個發送按鈕，咱們來追一下這個方法

而後咱們在 send_common_msg.js 文件中找到這個方法，併發如今這個方法體內去調用了 handleMsgSend 這個方法，其實你們在這個文件中不須要去改任何東西

function onSendMsg () {
    ....
    
    //發消息處理
    handleMsgSend(msgContent);
}
複製代碼

在 handleMsgSend 這個方法裏咱們看到了 addMsg 咱們來對他進行改造

//聊天頁面增長一條消息

function addMsg (msg, prepend) {
    
    /*********************************/
    onemsg.style.clear = "both";
    
    // 若是是發出的消息
    if (isSelfSend) {
        onemsg.style.float = "right";
        msgbody.style.textAlign = 'right'
        //暱稱  消息時間
        msghead.innerHTML = webim.Tool.formatText2Html(webim.Tool.formatTimeStamp(msg.getTime()) + "&nbsp;&nbsp;" + fromAccountNick) + "&nbsp;&nbsp;" + "<img class='headurlClass' src='" + fromAccountImage + "'>";
    }

    // 若是是發給本身的消息
    if (!isSelfSend) {
        msghead.style.color = "blue";
        onemsg.style.float = "left";
        //暱稱  消息時間
        msghead.innerHTML = "<img class='headurlClass' src='" + fromAccountImage + "'>" + "&nbsp;&nbsp;" + webim.Tool.formatText2Html(fromAccountNick + "&nbsp;&nbsp;" + webim.Tool.formatTimeStamp(msg.getTime()));
    }
   /**************************************/
}
複製代碼

這個時候咱們看到已經能夠發送消息了，可是接收消息呢？？繼續追。。。

咱們去找到這個方法，看看有沒有什麼須要改的

//監聽新消息事件
var msgList = [];
var dateStart = null;
var dateEnd = null;
//newMsgList 爲新消息數組，結構爲[Msg]
function onMsgNotify (newMsgList) {
    //console.warn(newMsgList);
    var sess, newMsg;
    //獲取全部聊天會話
    var sessMap = webim.MsgStore.sessMap();

   ....
}
複製代碼