new file mode 100644
--- /dev/null
+++ b/client.js
@@ -0,0 +1,70 @@
+'use strict';
+
+const BOSH_SERVICE = 'https://bosh.linkmauve.fr/';
+
+function rawInput(data)
+{
+    console.log('RECV', data);
+}
+
+function rawOutput(data)
+{
+    console.log('SENT', data);
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    const connection = new Strophe.Connection(BOSH_SERVICE);
+    connection.rawInput = rawInput;
+    connection.rawOutput = rawOutput;
+
+    const jid_element = document.getElementById('jid');
+    const pass_element = document.getElementById('pass');
+    const connect_button = document.getElementById('connect');
+
+    const connected_div = document.getElementById('connected');
+
+    const avatar_img = document.getElementById('avatar');
+
+    connect_button.addEventListener('click', function (evt) {
+        if (connect_button.value == 'connect') {
+            connection.connect(jid_element.value,
+                               pass_element.value,
+                               onConnect);
+        } else {
+            connection.disconnect();
+        }
+        evt.preventDefault();
+    });
+
+    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;
+        } else if (status == Strophe.Status.CONNFAIL) {
+            console.log('Strophe failed to connect.');
+            connect_button.value = 'connect';
+            jid_element.disabled = false;
+            pass_element.disabled = false;
+        } else if (status == Strophe.Status.DISCONNECTING) {
+            console.log('Strophe is disconnecting.');
+        } else if (status == Strophe.Status.DISCONNECTED) {
+            console.log('Strophe is disconnected.');
+            connect_button.value = 'connect';
+            jid_element.disabled = false;
+            pass_element.disabled = false;
+        } else if (status == Strophe.Status.CONNECTED) {
+            console.log('Strophe is connected.');
+            onConnected();
+        }
+    }
+
+    function onConnected()
+    {
+        connected_div.hidden = false;
+        initNickname(connection);
+        initAvatar(connection);
+    }
+});