annotate client.js @ 10:e47b9bd55192

Also use a spinner on nickname get/set.
author Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
date Sat, 22 Dec 2018 16:13:01 +0100
parents cd0434bb2eb1
children 139b223dafb0
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
1 'use strict';
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
2
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
3 document.addEventListener('DOMContentLoaded', function () {
1
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
4 let connection = null;
0
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
5
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
6 const jid_element = document.getElementById('jid');
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
7 const pass_element = document.getElementById('pass');
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
8 const connect_button = document.getElementById('connect');
10
e47b9bd55192 Also use a spinner on nickname get/set.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 5
diff changeset
9 const spinner_img = document.getElementById('connect-spinner');
0
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
10
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
11 const connected_div = document.getElementById('connected');
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
12
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
13 const avatar_img = document.getElementById('avatar');
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
14
1
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
15 function rawInput(data)
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
16 {
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
17 console.log('RECV', data);
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
18 }
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
19
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
20 function rawOutput(data)
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
21 {
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
22 console.log('SENT', data);
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
23 }
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
24
0
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
25 connect_button.addEventListener('click', function (evt) {
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
26 if (connect_button.value == 'connect') {
1
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
27 const jid = jid_element.value;
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
28 getBOSHService(jid).then((bosh_service) => {
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
29 connection = new Strophe.Connection(bosh_service);
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
30 connection.rawInput = rawInput;
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
31 connection.rawOutput = rawOutput;
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
32 connection.connect(jid,
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
33 pass_element.value,
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
34 onConnect);
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
35 });
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
36 } else if (connection != null) {
0
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
37 connection.disconnect();
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
38 }
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
39 evt.preventDefault();
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
40 });
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
41
1
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
42 function getBOSHService(jid)
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
43 {
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
44 return new Promise((resolve, reject) => {
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
45 const [nodepart, domainpart] = jid.split('@', 2);
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
46 //const url = 'https://' + domainpart + '/.well-known/host-meta';
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
47 const url = '/.well-known/host-meta';
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
48 const xhr = new XMLHttpRequest();
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
49 xhr.onload = function (evt) {
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
50 const xml = evt.target.responseXML;
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
51 const links = parseXPath(xml, './xrd:XRD/xrd:Link', XPathResult.ORDERED_NODE_ITERATOR_TYPE);
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
52 let bosh_service = null;
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
53 while (true) {
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
54 const link = links.iterateNext();
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
55 if (!link)
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
56 break;
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
57 if (link.getAttributeNS(null, 'rel') == 'urn:xmpp:alt-connections:xbosh') {
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
58 bosh_service = link.getAttributeNS(null, 'href');
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
59 break;
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
60 }
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
61 // TODO: also support WebSocket.
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
62 }
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
63 console.log('bosh_service', bosh_service);
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
64 resolve(bosh_service);
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
65 };
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
66 xhr.open('GET', url);
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
67 xhr.send();
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
68 });
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
69 }
d6df73b466f6 Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 0
diff changeset
70
0
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
71 function onConnect(status)
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
72 {
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
73 if (status == Strophe.Status.CONNECTING) {
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
74 console.log('Strophe is connecting.');
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
75 connect_button.value = 'disconnect';
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
76 jid_element.disabled = true;
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
77 pass_element.disabled = true;
5
cd0434bb2eb1 Add a spinner on connecting/disconnecting.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 4
diff changeset
78 spinner_img.hidden = false;
0
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
79 } else if (status == Strophe.Status.CONNFAIL) {
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
80 console.log('Strophe failed to connect.');
4
5e97e1808a35 Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 3
diff changeset
81 onDisconnected();
0
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
82 } else if (status == Strophe.Status.DISCONNECTING) {
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
83 console.log('Strophe is disconnecting.');
5
cd0434bb2eb1 Add a spinner on connecting/disconnecting.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 4
diff changeset
84 spinner_img.hidden = false;
0
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
85 } else if (status == Strophe.Status.DISCONNECTED) {
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
86 console.log('Strophe is disconnected.');
4
5e97e1808a35 Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 3
diff changeset
87 onDisconnected();
0
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
88 } else if (status == Strophe.Status.CONNECTED) {
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
89 console.log('Strophe is connected.');
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
90 onConnected();
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
91 }
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
92 }
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
93
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
94 function onConnected()
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
95 {
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
96 connected_div.hidden = false;
5
cd0434bb2eb1 Add a spinner on connecting/disconnecting.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 4
diff changeset
97 spinner_img.hidden = true;
4
5e97e1808a35 Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 3
diff changeset
98 initRoster(connection);
3
5aa1bf7154b0 Add a simple PEP node viewer and editor.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 1
diff changeset
99 initPEP(connection);
0
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
100 initNickname(connection);
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
101 initAvatar(connection);
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
102 }
4
5e97e1808a35 Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 3
diff changeset
103
5e97e1808a35 Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 3
diff changeset
104 function onDisconnected()
5e97e1808a35 Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 3
diff changeset
105 {
5e97e1808a35 Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 3
diff changeset
106 connect_button.value = 'connect';
5e97e1808a35 Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 3
diff changeset
107 jid_element.disabled = false;
5e97e1808a35 Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 3
diff changeset
108 pass_element.disabled = false;
5
cd0434bb2eb1 Add a spinner on connecting/disconnecting.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 4
diff changeset
109 spinner_img.hidden = true;
4
5e97e1808a35 Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 3
diff changeset
110 for (let item of document.getElementById('roster-table')) {
5e97e1808a35 Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 3
diff changeset
111 item.remove();
5e97e1808a35 Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 3
diff changeset
112 }
5e97e1808a35 Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 3
diff changeset
113 for (let item of document.getElementById('pep-table')) {
5e97e1808a35 Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 3
diff changeset
114 item.remove();
5e97e1808a35 Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 3
diff changeset
115 }
5e97e1808a35 Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 3
diff changeset
116 }
0
2a8d4e8600d0 Initial commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
diff changeset
117 });