WeChat chat source code analysis-Data Interaction

In this example, focusto the vcard.html file, the operation interface

Static Page source code:

<form>    <fieldset>      <legend>Name</legend>      <table>          <tr><th nowrap>Full Name:</th><td width="100%"><input type=text id="FN" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Family Name:</th><td width="100%"><input type=text id="N.FAMILY" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Given Name:</th><td width="100%"><input type=text id="N.GIVEN" class="vcardBoxEditable"></td></tr>      </table>    </fieldset>        <fieldset>      <legend>Information</legend>      <table>          <tr><th nowrap>E-mail:</th><td width="100%"><input type=text id="EMAIL" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Web Site:</th><td width="100%"><input type=text id="URL" class="vcardBoxEditable"></td></tr>      </table>    </fieldset>        <fieldset>      <legend>Address</legend>      <table>          <tr><th nowrap>Address:</th><td width="100%"><input type=text id="ADR.STREET" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Address2:</th><td width="100%"><input type=text id="ADR.EXTADD" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>City:</th><td width="100%"><input type=text id="ADR.LOCALITY" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Province:</th><td width="100%"><input type=text id="ADR.REGION" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Postal Code:</th><td width="100%"><input type=text id="ADR.PCODE" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Country:</th><td width="100%"><input type=text id="ADR.CTRY" class="vcardBoxEditable"></td></tr>      </table>    </fieldset>    <fieldset>      <legend>Organization</legend>      <table>          <tr><th nowrap>Name:</th><td width="100%"><input type=text id="ORG.ORGNAME" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Unit:</th><td width="100%"><input type=text id="ORG.ORGUNIT" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Title:</th><td width="100%"><input type=text id="TITLE" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Role:</th><td width="100%"><input type=text id="ROLE" class="vcardBoxEditable"></td></tr>      </table>    </fieldset>    <fieldset>      <legend>About</legend>      <table width="100%">          <tr><th>Birthday:</th><td width="100%"><input type=text id="BDAY" class="vcardBoxEditable"></td></tr><tr><td colspan=2> </td></tr>          <tr><th>Description:</th><td width="100%"> </td></tr>          <tr><td colspan=2 width="100%"><textarea id="DESC" class="vcardBoxEditable" style="width:100%;" rows=4 wrap=virtual></textarea></td></tr>      </table>    </fieldset>    <div id="savebox">

The query information is implemented by the following code:

function init() {srcW = opener.top;getArgs();jid = passedArgs['jid'];document.title += jid;// request vcardvar iq = new JSJaCIQ();iq.setType('get');if (cutResource(jid) != srcW.cutResource(srcW.jid)) // not meiq.setTo(jid);var vCard = iq.getNode().appendChild(iq.getDoc().createElement('vCard'));vCard.setAttribute('xmlns', 'vcard-temp');me = this;srcW.con.send(iq, me.handleVCard);}function handleVCard(iq) {if (!iq) {srcW.Debug.log('got empty iq result', 1);return;}srcW.Debug.log(iq.getDoc().xml, 3);if (iq.getNode().getElementsByTagName('vCard').item(0)) {for ( var i = 0; i < iq.getNode().getElementsByTagName('vCard').item(0).childNodes.length; i++) {var token = iq.getNode().getElementsByTagName('vCard').item(0).childNodes.item(i);tokenname = token.nodeName;if (token.firstChild && token.firstChild.nodeType != 3) { // found// a// containerfor ( var j = 0; j < token.childNodes.length; j++) {if (typeof (document.forms[0].elements[tokenname + "."+ token.childNodes.item(j).nodeName]) != 'undefined'&& token.childNodes.item(j).firstChild)document.forms[0].elements[tokenname + "."+ token.childNodes.item(j).nodeName].value = token.childNodes.item(j).firstChild.nodeValue;}} else if (typeof (document.forms[0].elements[tokenname]) != 'undefined'&& token.firstChild)document.forms[0].elements[tokenname].value = token.firstChild.nodeValue;}}}
After the above code is executed, the following information will be received from the openfire Server:

[2] inQueue:[2] sending response [468651]:<body xmlns="http://jabber.org/protocol/httpbind" />[2] inQueue:<iq type="result" id="JSJaCID_2" to="13312345678@xjtu/jwchat"><vCard xmlns="vcard-temp"><FN>james boocher</FN><N><FAMILY>boocher</FAMILY><GIVEN>james</GIVEN></N><EMAIL>284771818@qq.com</EMAIL><URL>xjtu.com</URL><ORG><ORGUNIT>dev</ORGUNIT></ORG></vCard></iq>[2] sending response [468652]:<body xmlns="http://jabber.org/protocol/httpbind"><iq xmlns="jabber:client" id="JSJaCID_2" to="13312345678@xjtu/jwchat"type="result"><vCard xmlns="vcard-temp"><FN>james boocher</FN><N><FAMILY>boocher</FAMILY><GIVEN>james</GIVEN></N><EMAIL>284771818@qq.com</EMAIL><URL>xjtu.com</URL><ORG><ORGUNIT>dev</ORGUNIT></ORG></vCard></iq></body>
The above is the query part, and the following is the Information Modification part. The source code is as follows:

function sendSub() {var iq = new JSJaCIQ();iq.setType('set');var vCard = iq.getNode().appendChild(iq.getDoc().createElement('vCard'));vCard.setAttribute('xmlns', 'vcard-temp');for ( var i = 0; i < document.forms[0].elements.length; i++) {var item = document.forms[0].elements[i];if (item.id == '')continue;if (item.value == '')continue;if (item.id.indexOf('.') != -1) {var tagname = item.id.substring(0, item.id.indexOf('.'));var aNode;if (vCard.getElementsByTagName(tagname).length > 0)aNode = vCard.getElementsByTagName(tagname).item(0);elseaNode = vCard.appendChild(iq.getDoc().createElement(tagname));aNode.appendChild(iq.getDoc().createElement(item.id.substring(item.id.indexOf('.') + 1))).appendChild(iq.getDoc().createTextNode(item.value));} else {vCard.appendChild(iq.getDoc().createElement(item.id)).appendChild(iq.getDoc().createTextNode(item.value));}}srcW.Debug.log(iq.getDoc().xml, 3);srcW.con.send(iq);window.close();}
After the command is executed, the following message is sent to the openfire Server:

[2] inQueue:[2] sending response [468653]:<body xmlns="http://jabber.org/protocol/httpbind" />[2] inQueue:<iq type="result" to="13312345678@xjtu/jwchat" />[2] sending response [468654]:<body xmlns="http://jabber.org/protocol/httpbind"><iq xmlns="jabber:client" to="13312345678@xjtu/jwchat"type="result" /></body>


After this operation, the data persists to the DB.

---------------------------------------------------------- Source code analysis -----------------------------------------------------
The core method of data interaction is jsjaciq in jsjac. The source code is as follows:

function JSJaCIQ() {    this.base = JSJaCPacket;    this.base('iq');}

We can see the this. Base statement, which requires a good understanding.
function JSJaCPacket(name) {    this.name = name;    if (typeof(JSJACPACKET_USE_XMLNS) != 'undefined' && JSJACPACKET_USE_XMLNS) this.doc = XmlDocument.create(name, 'jabber:client');    else this.doc = XmlDocument.create(name, '');}

You can understand the above. during use, you only need to instantiate your own object.

var iq = new JSJaCIQ();iq.setType('set');//updateiq.setType('get');//query
Create the required text content according to the protocol specification, and then

srcW.con.send(iq);
Among them, srcw1_openr.top, top attribute in chat.html
---------------------------------------------------------- Data Interaction ends -----------------------------------------------------