Mercurial > xmpp-account-manager
view client.js @ 5:cd0434bb2eb1
Add a spinner on connecting/disconnecting.
author | Emmanuel Gil Peyrot <linkmauve@linkmauve.fr> |
---|---|
date | Sat, 22 Dec 2018 16:04:56 +0100 |
parents | 5e97e1808a35 |
children | e47b9bd55192 |
line wrap: on
line source
'use strict'; document.addEventListener('DOMContentLoaded', function () { let connection = null; const jid_element = document.getElementById('jid'); const pass_element = document.getElementById('pass'); const connect_button = document.getElementById('connect'); const spinner_img = document.getElementById('spinner'); const connected_div = document.getElementById('connected'); const avatar_img = document.getElementById('avatar'); function rawInput(data) { console.log('RECV', data); } function rawOutput(data) { console.log('SENT', data); } connect_button.addEventListener('click', function (evt) { if (connect_button.value == 'connect') { const jid = jid_element.value; getBOSHService(jid).then((bosh_service) => { connection = new Strophe.Connection(bosh_service); connection.rawInput = rawInput; connection.rawOutput = rawOutput; connection.connect(jid, pass_element.value, onConnect); }); } else if (connection != null) { connection.disconnect(); } evt.preventDefault(); }); function getBOSHService(jid) { return new Promise((resolve, reject) => { const [nodepart, domainpart] = jid.split('@', 2); //const url = 'https://' + domainpart + '/.well-known/host-meta'; const url = '/.well-known/host-meta'; const xhr = new XMLHttpRequest(); xhr.onload = function (evt) { const xml = evt.target.responseXML; const links = parseXPath(xml, './xrd:XRD/xrd:Link', XPathResult.ORDERED_NODE_ITERATOR_TYPE); let bosh_service = null; while (true) { const link = links.iterateNext(); if (!link) break; if (link.getAttributeNS(null, 'rel') == 'urn:xmpp:alt-connections:xbosh') { bosh_service = link.getAttributeNS(null, 'href'); break; } // TODO: also support WebSocket. } console.log('bosh_service', bosh_service); resolve(bosh_service); }; xhr.open('GET', url); xhr.send(); }); } function onConnect(status) { if (status == Strophe.Status.CONNECTING) { console.log('Strophe is connecting.'); connect_button.value = 'disconnect'; jid_element.disabled = true; pass_element.disabled = true; spinner_img.hidden = false; } else if (status == Strophe.Status.CONNFAIL) { console.log('Strophe failed to connect.'); onDisconnected(); } else if (status == Strophe.Status.DISCONNECTING) { console.log('Strophe is disconnecting.'); spinner_img.hidden = false; } else if (status == Strophe.Status.DISCONNECTED) { console.log('Strophe is disconnected.'); onDisconnected(); } else if (status == Strophe.Status.CONNECTED) { console.log('Strophe is connected.'); onConnected(); } } function onConnected() { connected_div.hidden = false; spinner_img.hidden = true; initRoster(connection); initPEP(connection); initNickname(connection); initAvatar(connection); } function onDisconnected() { connect_button.value = 'connect'; jid_element.disabled = false; pass_element.disabled = false; spinner_img.hidden = true; for (let item of document.getElementById('roster-table')) { item.remove(); } for (let item of document.getElementById('pep-table')) { item.remove(); } } });