铛铛源码前端结构

一、 结图（一Bex5铛铛前端代码的结构如图（一）所示。base文件夹下的.w页面为所有页面的基础页面。Bex5wex5base文件夹中继承的。铛铛Bex5版和wex5Bex5Bex5Bex5PCWex5铛铛PC在 下我们要关注的是base/js文件夹中的im.js和im.impl.jsim.jsdangchat-serverdangchat-中的方法需要将im.jsim.impl.jsim.js对于bex5或wex5有关的接口的实现(例如：铛铛的登录)我们放在各自文件夹中的js下，如图（二）所示。.js是我们登录时将的组织人员转换为对象，通过这个对象实现各个人员在dangchat-server中的和登图（二图（三 是跟dangchat-server有关的API。调用服务端方法都在actor .js中。如图（四）所示：图（四Promise-pollfill.js是兼容低版本不支持promise的Chromephotoswipe是消息页面调用的查看的工具superInputPC端移动端会有不同状态、表情、语音都在superInput.js中处理。clipboard.min.js是PC端功能调用的第electron-app.jsutil.js是全局页面的一些公共方法。如：会话列表中的最后一条消息的chat.min.css.xml和chat.min.js.xmlconfig.js是配置dangchat-serverchat 下index.w是兼容以前版本铛铛的首页跳转。默认跳转bex5铛铛源码引入步骤及用户可 /wex5中。点击图(五)所示的标题，进入后 图（五将铛铛源码（chat文件夹）的导入x5平台的 下Wex5版铛铛源码需要将baas/org文件夹（ /wex5/wex5-org可）导入x5平台下的Baas进行模型编译。varchar类型。Bex5版铛铛中示例组织人员的头像为longblob类型。Bex5版铛铛的搜索文档，搜索历史消息功能为x5的拓展服务，点击图(六)所示标题，进入页面进行。的文件名修改为chat，放入BIZ 图（六图（七dangchat-server准备铛铛绿色安装包如（八所示红框内为dangchat-server的重要文件，可单独拷贝到服务器作为dangchat-server。注：需要修改dangchat-server/conf/server.conf文件中的所在服务器的端口，修改chat/config.js的端口修改为dangchat-server的端口。图（八以上步骤完成后，启动dangchat服务，启动tomcat，运行chat/bex5/index.wchat登录以wex5doLogin:function(param)varloginByWex5=function(params){"url":"/org/login","action""url":"/org/login","action":"loginAction","async":false,"params":{"userName":params.username,"password":params.password"success":function(data)//返回参数为flag（登录是是否成功 ID（登录人//Name（登录人//message（登录失败消息）//isInOrg(是否在组织中ret=:s,pid)vardeferred= :s,pid)vardeferred= s) 对象varp=id:s,function(i,v)name:uid:v.sNumb,//数据库存放uid的字段avatar:get nick:'',phones:about:ID]= return进 主页面的修登录逻辑只是实现当前的人在dangchat-server的中的，这时当前人还没在dangchat-serverdangchat-server的API对主页面进行修改，须要等当前人在dangchat-server登录之后，当前人才能调用dangchat-server提供的方法。////登录dangchat-server的方法this.loginActorDfdIM.loginActor();this.loginActorDfd.done(function(){Wex5在登录时工作页面的需要的登录信息存到了storevarvarloginByWex5=function(params)varvaruserParams={}; ID="";userParams.CurrentName="";userParams.CurrentFID="";userParams.CurrentFName="";userParams.CurrentOgnID="";userParams.CurrentOgnName="";userParams.CurrentDeptID="";userParams.CurrentDeptName="";userParams.CurrentDeptFID="";userParams.CurrentDeptFName="";userParams.CurrentOgnFID="";userParams.CurrentOgnFName="";userParams.CurrentFunRole"3";/3：普通员工。（1:公司领"url":"/org/login","action":"loginAction","async":false,"params":{"userName":params.username,"password":params.password"success":function(data)retret=if(ret.flag){ID=Name=FID=FName=userParams.CurrentOgnID=ret.CurrentOgnID;userParams.CurrentOgnName=ret.CurrentOgnName;userParams.CurrentFunRole=userParams.CurrentOgnFName="/"+if(ret.CurrentFID.indexOf("dpt")>0){userParams.CurrentDeptID=ret.CurrentDeptID;userParams.CurrentDeptName=userParams.CurrentDeptFID=ret.CurrentFID.substring(0,ret.CurrentFID.indexOf("dpt")+3);userParams.CurrentDeptFName=ret.CurrentFName.substring(0,ret.CurrentFName.indexOf("/",ret.CurrentFName.indexOf("/",2)+1));}}}returnvarsaveLoginDataToStore=function(data){data=JSON.stringify(data);store.set('work_loginData',encrypt(data,工作页面用到当前人的信息只需调用getCurrentInfo()注:关于发送消息的方法还需要登录dangchat-server如图（九）所示为所有页面的基础页面。bex5铛铛和wex5铛铛调用有关与dangchat-serverAPIbasejs文件中，bex5铛wex5base文件下页面，调用各自的不同实现。如：doLogin()、bizwex5的baas提供相应的方法提供实现。如图(十)所示，img文件夹放的是界面用到的一些。Js文件中im.js为抽离dangchat-server提供API的接口，im.impl.js是实现im.js中的接口。 会话页面(移动端:main.wPCmain.w为移动端的会话页面；dialogList.wPC端的会话页面。会话页面中我们调用dangchat-serverbindDialogs()（十一）图（十一counter为未读消息数，datepeer为会peer.id就是我们前文提到的人员的uid。我们可以通过此id调用dangchat-server中的的人员信息。Sender为最后一条消息的发送人。text为最后一条信息的内容。删除会话功能：调用deleteChat(peer);注：只是人员或群组的删除。不会删除群组的删除并退出：dangchat-server没有提供相应的API，我们调用注：每当有新的会话时，dangchat-server都会将全部的会列表推送给用户，表的前二十条。调用onDialogsEnd()查看历史会话。消息页面在消息页面我需要每个会话的peer对象。打开消息页面时调用读消息。关闭页面时调用onConversationClosed(peer)。通过bindMessages(peer,callback)方法在回调函数中取到与该联系人或该群组的聊天内容，每次新打开会话时dangchat-server只会推二十条聊天内容，调用消息推送过来后我们调用messageParse文件、、语音、和分别作了处理，到页面显示相应的页面样式。注：因路径推送过来，所以做文件时需注意文件的路径。sendTextMessage(peer,text)是发送文本API,sendFileMessage(peer,file)是发送加)sent(消息发送成功)recevied(对方接收)read(接收已读)error(发送失败)四种消息页面x5平台为铛铛作了一个输入框组件为适应不同端输入框的状态。在chat/lib 下。输入框组件包含css(输入框样式)icon(输入框用到的icon)img(表情)js(表情API)lib(第插件)superInput.js(输入框的代码语音录制，端键盘高度的计算)。结构如图（十二）所示。图（十二superInput.jsmousedown',this.startRecVoice.bind(this)).on('touchendmouseup',this.stopRecVoice.bind(this));deleteMessage(peer,rid)：删除单条消息（rid为dangchat-server关注和取消关注是dangchat-server与bex5结合的一个功能。调用图（十三biz端所需参数。取消关注同理。这样我们就可以查看人员列表页面此页面为组织机构中的人员信息，bex5wex5铛铛实现有差异；bex5biz的方法获取当前人登录的所有组织人员和所有部门。Wex5铛铛调用baas服务获取获取当前人所在组织的所有组织人员和所有部门。话与组织人员构成页面此页面差异比较大基础页面存放在bex5和wex5下。点击群组时传递群组的peer.id和typeidcontact.w进行处理。对组织人员注册和加好友等操作。此页面为重用页面，点击消息页面消息的转发，wex5的创人员详细页面在进入页面时通过其他页面传过来的组织人员的id。get 对象调用add 组织人员在dangchat-server中 并添加此组织人员为好友调用bindUser(uid)获取该组织人员在dangchat-server中的信息离开页面时对人员页面进行unbind。群组详细页面图（十四进入群组页面我们需要群组的peer.idbindGroup(peer.id,callback)方法的回调的peer.id、群关于(about)peer.id,群成员(members)、群名称。拓展 搜索历史消息API为getSearchText(val,option)，具体实现在.impl.js文Mtotype.modelParamsReceiveMtotype.modelParamsReceive=function(event)this.sId=this.params.sId;this.destId=this.params.destId;this.groupId=this.params.groupId; Mtotype.searchClick=function(event)varself=this;varrows=[];varmessage;varval= varoption=sId:this.sId,destId:this.destId,groupId:IM.getSearchText(val,if(searchText.length>0)for(vari=0;i<searchText.length;messagemessage=searchText[i];fID:message.rid,fContent:message.content,fMessageTime:message.d