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();

   ....
}
复制代码

看了一下好像也没有什么须要改的，那咱们再登陆一个帐号测试下成果吧

结尾

写到这我只能说腾讯的demo真的是很全，彻底能够当一个项目了，不亏是大公司出品。你们若是有须要把这个接入到框架也是很容易的呢，好了，到这就结束了，谢谢。本案例源码我的博客