1
Fork 0

Simplify the initial connection protocol.

The ServerConnection.connect method is no longer async,
we rely on the onconnected callback only.  The onconnected
callback is now only called after the initial handshake
completes.  There is a new onerror callback.
This commit is contained in:
Juliusz Chroboczek 2024-06-10 19:41:23 +02:00
parent 58934a1a46
commit 7151fad149
3 changed files with 205 additions and 172 deletions

View File

@ -21,12 +21,12 @@ async function start(url) {
// connect to the server // connect to the server
if(token) { if(token) {
await serverConnect(status, token); serverConnect(status, token);
} else if(status.authPortal) { } else if(status.authPortal) {
window.location.href = groupStatus.authPortal window.location.href = groupStatus.authPortal
return; return;
} else { } else {
await serverConnect(status, null); serverConnect(status, null);
} }
} }
@ -46,7 +46,7 @@ function displayStatus(status) {
* @parm {Object} status * @parm {Object} status
* @parm {string} token * @parm {string} token
*/ */
async function serverConnect(status, token) { function serverConnect(status, token) {
// create the connection to the server // create the connection to the server
let conn = new ServerConnection(); let conn = new ServerConnection();
conn.onconnected = async function() { conn.onconnected = async function() {
@ -66,7 +66,7 @@ async function serverConnect(status, token) {
conn.onjoined = onJoined; conn.onjoined = onJoined;
// connect and wait for the onconnected callback // connect and wait for the onconnected callback
await conn.connect(status.endpoint); conn.connect(status.endpoint);
} }
/** /**

View File

@ -420,6 +420,10 @@ function gotClose(code, reason) {
if(code != 1000) { if(code != 1000) {
console.warn('Socket close', code, reason); console.warn('Socket close', code, reason);
} }
let form = document.getElementById('userform');
if(!(form instanceof HTMLFormElement))
throw new Error('Bad type for userform');
form.active = true;
} }
/** /**
@ -433,7 +437,7 @@ function gotDownStream(c) {
}; };
c.onerror = function(e) { c.onerror = function(e) {
console.error(e); console.error(e);
displayError(e); displayError(e.toString());
}; };
c.ondowntrack = function(track, transceiver, stream) { c.ondowntrack = function(track, transceiver, stream) {
setMedia(c); setMedia(c);
@ -3903,12 +3907,12 @@ function displayMessage(message) {
return displayError(message, "info"); return displayError(message, "info");
} }
let connecting = false;
document.getElementById('userform').onsubmit = async function(e) { document.getElementById('userform').onsubmit = async function(e) {
e.preventDefault(); e.preventDefault();
if(connecting)
return; let form = this;
if(!(form instanceof HTMLFormElement))
throw new Error('Bad type for userform');
setVisibility('passwordform', true); setVisibility('passwordform', true);
@ -3921,12 +3925,8 @@ document.getElementById('userform').onsubmit = async function(e) {
getInputElement('presentoff').checked = true; getInputElement('presentoff').checked = true;
// Connect to the server, gotConnected will join. // Connect to the server, gotConnected will join.
connecting = true; form.active = false;
try { serverConnect();
await serverConnect();
} finally {
connecting = false;
}
}; };
document.getElementById('disconnectbutton').onclick = function(e) { document.getElementById('disconnectbutton').onclick = function(e) {
@ -3997,6 +3997,10 @@ async function serverConnect() {
serverConnection.close(); serverConnection.close();
serverConnection = new ServerConnection(); serverConnection = new ServerConnection();
serverConnection.onconnected = gotConnected; serverConnection.onconnected = gotConnected;
serverConnection.onerror = function(e) {
console.error(e);
displayError(e.toString());
};
serverConnection.onpeerconnection = onPeerConnection; serverConnection.onpeerconnection = onPeerConnection;
serverConnection.onclose = gotClose; serverConnection.onclose = gotClose;
serverConnection.ondownstream = gotDownStream; serverConnection.ondownstream = gotDownStream;

View File

@ -152,6 +152,13 @@ function ServerConnection() {
* @type{(this: ServerConnection) => void} * @type{(this: ServerConnection) => void}
*/ */
this.onconnected = null; this.onconnected = null;
/**
* onerror is called whenever a fatal error occurs. The stream will
* then be closed, and onclose called normally.
*
* @type{(this: ServerConnection, error: unknown) => void}
*/
this.onerror = null;
/** /**
* onclose is called when the connection is closed * onclose is called when the connection is closed
* *
@ -263,6 +270,19 @@ ServerConnection.prototype.close = function() {
this.socket = null; this.socket = null;
}; };
/**
* error forcibly closes a server connection and invokes the onerror
* callback. The onclose callback will be invoked when the connection
* is effectively closed.
*
* @param {any} e
*/
ServerConnection.prototype.error = function(e) {
if(this.onerror)
this.onerror.call(this, e);
this.close();
};
/** /**
* send sends a message to the server. * send sends a message to the server.
* @param {message} m - the message to send. * @param {message} m - the message to send.
@ -279,31 +299,30 @@ ServerConnection.prototype.send = function(m) {
* connect connects to the server. * connect connects to the server.
* *
* @param {string} url - The URL to connect to. * @param {string} url - The URL to connect to.
* @returns {Promise<ServerConnection>}
* @function * @function
*/ */
ServerConnection.prototype.connect = async function(url) { ServerConnection.prototype.connect = function(url) {
let sc = this; let sc = this;
if(sc.socket) { if(sc.socket)
sc.socket.close(1000, 'Reconnecting'); throw new Error("Attempting to connect stale connection");
sc.socket = null;
}
sc.socket = new WebSocket(url); sc.socket = new WebSocket(url);
return await new Promise((resolve, reject) => {
this.socket.onerror = function(e) { this.socket.onerror = function(e) {
reject(e); if(sc.onerror)
sc.onerror.call(sc, new Error('Socket error: ' + e));
}; };
this.socket.onopen = function(e) { this.socket.onopen = function(e) {
try {
sc.send({ sc.send({
type: 'handshake', type: 'handshake',
version: ['2'], version: ['2'],
id: sc.id, id: sc.id,
}); });
if(sc.onconnected) } catch(e) {
sc.onconnected.call(sc); sc.error(e);
resolve(sc); return;
}
}; };
this.socket.onclose = function(e) { this.socket.onclose = function(e) {
sc.permissions = []; sc.permissions = [];
@ -326,19 +345,30 @@ ServerConnection.prototype.connect = async function(url) {
sc.username = null; sc.username = null;
if(sc.onclose) if(sc.onclose)
sc.onclose.call(sc, e.code, e.reason); sc.onclose.call(sc, e.code, e.reason);
reject(new Error('websocket close ' + e.code + ' ' + e.reason));
}; };
this.socket.onmessage = function(e) { this.socket.onmessage = function(e) {
let m = JSON.parse(e.data); let m;
try {
m = JSON.parse(e.data);
} catch(e) {
sc.error(e);
return;
}
if(m.type !== 'handshake' && !sc.version) {
sc.error(new Error("Server didn't send handshake"));
return;
}
switch(m.type) { switch(m.type) {
case 'handshake': { case 'handshake': {
if((m.version instanceof Array) && m.version.includes('2')) { if((m.version instanceof Array) && m.version.includes('2')) {
sc.version = '2'; sc.version = '2';
} else { } else {
sc.version = null; sc.version = null;
console.error(`Unknown protocol version ${m.version}`); sc.error(new Error(`Unknown protocol version ${m.version}`));
throw new Error(`Unknown protocol version ${m.version}`); return;
} }
if(sc.onconnected)
sc.onconnected.call(sc);
break; break;
} }
case 'offer': case 'offer':
@ -463,7 +493,6 @@ ServerConnection.prototype.connect = async function(url) {
return; return;
} }
}; };
});
}; };
/** /**