Skip to content

Commit

Permalink
Merge pull request #47 from OmarWKH/message-websocket-fix
Browse files Browse the repository at this point in the history 
Make CeleryWebSocketProgressBar a subclass of CeleryProgressBar
  • Loading branch information
@EJH2
EJH2 authored Sep 3, 2020
2 parents 59aa856 + 17f9ed2 commit 314e232
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 110 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ The `initProgressBar` function takes an optional object of options. The followin
| onTaskError | function to call when progress completes with an error | onError |
| onNetworkError | function to call on a network error (ignored by WebSocket) | onError |
| onHttpError | function to call on a non-200 response (ignored by WebSocket) | onError |
| onDataError | function to call on a 200 response that's not JSON or has invalid schema due to a programming error (ignored by WebSocket) | onError |
| onDataError | function to call on a response that's not JSON or has invalid schema due to a programming error | onError |
| onResult | function to call when returned non empty result | CeleryProgressBar.onResultDefault |


Expand Down
135 changes: 77 additions & 58 deletions celery_progress/static/celery_progress/celery_progress.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,32 @@
var CeleryProgressBar = (function () {
function onSuccessDefault(progressBarElement, progressBarMessageElement, result) {
class CeleryProgressBar {

constructor(progressUrl, options) {
this.progressUrl = progressUrl;
options = options || {};
let progressBarId = options.progressBarId || 'progress-bar';
let progressBarMessage = options.progressBarMessageId || 'progress-bar-message';
this.progressBarElement = options.progressBarElement || document.getElementById(progressBarId);
this.progressBarMessageElement = options.progressBarMessageElement || document.getElementById(progressBarMessage);
this.onProgress = options.onProgress || CeleryProgressBar.onProgressDefault;
this.onSuccess = options.onSuccess || CeleryProgressBar.onSuccessDefault;
this.onError = options.onError || CeleryProgressBar.onErrorDefault;
this.onTaskError = options.onTaskError || this.onError;
this.onDataError = options.onDataError || this.onError;
let resultElementId = options.resultElementId || 'celery-result';
this.resultElement = options.resultElement || document.getElementById(resultElementId);
this.onResult = options.onResult || CeleryProgressBar.onResultDefault;
// HTTP options
this.onNetworkError = options.onNetworkError || this.onError;
this.onHttpError = options.onHttpError || this.onError;
this.pollInterval = options.pollInterval || 500;
}

static onSuccessDefault(progressBarElement, progressBarMessageElement, result) {
progressBarElement.style.backgroundColor = '#76ce60';
progressBarMessageElement.textContent = "Success!";
progressBarMessageElement.textContent = "Success! " + result;
}

function onResultDefault(resultElement, result) {
static onResultDefault(resultElement, result) {
if (resultElement) {
resultElement.textContent = result;
}
Expand All @@ -14,13 +36,13 @@ var CeleryProgressBar = (function () {
* Default handler for all errors.
* @param data - A Response object for HTTP errors, undefined for other errors
*/
function onErrorDefault(progressBarElement, progressBarMessageElement, excMessage, data) {
static onErrorDefault(progressBarElement, progressBarMessageElement, excMessage, data) {
progressBarElement.style.backgroundColor = '#dc4f63';
excMessage = excMessage || '';
progressBarMessageElement.textContent = "Uh-Oh, something went wrong! " + excMessage;
}

function onProgressDefault(progressBarElement, progressBarMessageElement, progress) {
static onProgressDefault(progressBarElement, progressBarMessageElement, progress) {
progressBarElement.style.backgroundColor = '#68a9ef';
progressBarElement.style.width = progress.percent + "%";
var description = progress.description || "";
Expand All @@ -31,37 +53,49 @@ var CeleryProgressBar = (function () {
}
}

async function updateProgress (progressUrl, options) {
options = options || {};
var progressBarId = options.progressBarId || 'progress-bar';
var progressBarMessage = options.progressBarMessageId || 'progress-bar-message';
var progressBarElement = options.progressBarElement || document.getElementById(progressBarId);
var progressBarMessageElement = options.progressBarMessageElement || document.getElementById(progressBarMessage);
var onProgress = options.onProgress || onProgressDefault;
var onSuccess = options.onSuccess || onSuccessDefault;
var onError = options.onError || onErrorDefault;
var onTaskError = options.onTaskError || onError;
var onNetworkError = options.onNetworkError || onError;
var onHttpError = options.onHttpError || onError;
var onDataError = options.onDataError || onError;
var pollInterval = options.pollInterval || 500;
var resultElementId = options.resultElementId || 'celery-result';
var resultElement = options.resultElement || document.getElementById(resultElementId);
var onResult = options.onResult || onResultDefault;

getMessageDetails(result) {
if (this.resultElement) {
return ''
} else {
return result || '';
}
}

const getMessageDetails = function (result) {
if (resultElement) {
return ''
/**
* Process update message data.
* @return true if the task is complete, false if it's not, undefined if `data` is invalid
*/
onData(data) {
let done = false;
if (data.progress) {
this.onProgress(this.progressBarElement, this.progressBarMessageElement, data.progress);
}
if (data.complete === true) {
done = true;
if (data.success === true) {
this.onSuccess(this.progressBarElement, this.progressBarMessageElement, this.getMessageDetails(data.result));
} else if (data.success === false) {
this.onTaskError(this.progressBarElement, this.progressBarMessageElement, this.getMessageDetails(data.result));
} else {
return result || '';
done = undefined;
this.onDataError(this.progressBarElement, this.progressBarMessageElement, "Data Error");
}
if (data.hasOwnProperty('result')) {
this.onResult(this.resultElement, data.result);
}
};
} else if (data.complete === undefined) {
done = undefined;
this.onDataError(this.progressBarElement, this.progressBarMessageElement, "Data Error");
}
return done;
}

async connect() {
let response;
try {
response = await fetch(progressUrl);
response = await fetch(this.progressUrl);
} catch (networkError) {
onNetworkError(progressBarElement, progressBarMessageElement, "Network Error");
this.onNetworkError(this.progressBarElement, this.progressBarMessageElement, "Network Error");
throw networkError;
}

Expand All @@ -70,37 +104,22 @@ var CeleryProgressBar = (function () {
try {
data = await response.json();
} catch (parsingError) {
onDataError(progressBarElement, progressBarMessageElement, "Parsing Error")
this.onDataError(this.progressBarElement, this.progressBarMessageElement, "Parsing Error")
throw parsingError;
}

if (data.progress) {
onProgress(progressBarElement, progressBarMessageElement, data.progress);
}
if (data.complete === false) {
setTimeout(updateProgress, pollInterval, progressUrl, options);
} else {
if (data.success === true) {
onSuccess(progressBarElement, progressBarMessageElement, getMessageDetails(data.result));
} else if (data.success === false) {
onTaskError(progressBarElement, progressBarMessageElement, getMessageDetails(data.result));
} else {
onDataError(progressBarElement, progressBarMessageElement, "Data Error");
}
if (data.hasOwnProperty('result')) {
onResult(resultElement, data.result);
}
const complete = this.onData(data);

if (complete === false) {
setTimeout(this.connect.bind(this), this.pollInterval);
}
} else {
onHttpError(progressBarElement, progressBarMessageElement, "HTTP Code " + response.status, response);
this.onHttpError(this.progressBarElement, this.progressBarMessageElement, "HTTP Code " + response.status, response);
}
}
return {
onSuccessDefault: onSuccessDefault,
onResultDefault: onResultDefault,
onErrorDefault: onErrorDefault,
onProgressDefault: onProgressDefault,
updateProgress: updateProgress,
initProgressBar: updateProgress, // just for api cleanliness
};
})();

static initProgressBar(progressUrl, options) {
const bar = new this(progressUrl, options);
bar.connect();
}
}
69 changes: 18 additions & 51 deletions celery_progress/static/celery_progress/websockets.js
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,32 @@
var CeleryWebSocketProgressBar = (function () {
function onSuccessDefault(progressBarElement, progressBarMessageElement, result) {
CeleryProgressBar.onSuccessDefault(progressBarElement, progressBarMessageElement);
}

function onResultDefault(resultElement, result) {
CeleryProgressBar.onResultDefault(resultElement, result);
}

function onErrorDefault(progressBarElement, progressBarMessageElement, excMessage, data) {
CeleryProgressBar.onErrorDefault(progressBarElement, progressBarMessageElement, excMessage, data);
}
class CeleryWebSocketProgressBar extends CeleryProgressBar {

function onProgressDefault(progressBarElement, progressBarMessageElement, progress) {
CeleryProgressBar.onProgressDefault(progressBarElement, progressBarMessageElement, progress);
constructor(progressUrl, options) {
super(progressUrl, options);
}

function initProgress (progressUrl, options) {
options = options || {};
var progressBarId = options.progressBarId || 'progress-bar';
var progressBarMessage = options.progressBarMessageId || 'progress-bar-message';
var progressBarElement = options.progressBarElement || document.getElementById(progressBarId);
var progressBarMessageElement = options.progressBarMessageElement || document.getElementById(progressBarMessage);
var onProgress = options.onProgress || onProgressDefault;
var onSuccess = options.onSuccess || onSuccessDefault;
var onError = options.onError || onErrorDefault;
var onTaskError = options.onTaskError || onError;
var resultElementId = options.resultElementId || 'celery-result';
var resultElement = options.resultElement || document.getElementById(resultElementId);
var onResult = options.onResult || onResultDefault;

async connect() {
var ProgressSocket = new WebSocket((location.protocol === 'https:' ? 'wss' : 'ws') + '://' +
window.location.host + progressUrl);
window.location.host + this.progressUrl);

ProgressSocket.onopen = function (event) {
ProgressSocket.send(JSON.stringify({'type': 'check_task_completion'}));
};

const bar = this;
ProgressSocket.onmessage = function (event) {
var data = JSON.parse(event.data);

if (data.progress) {
onProgress(progressBarElement, progressBarMessageElement, data.progress);
let data;
try {
data = JSON.parse(event.data);
} catch (parsingError) {
bar.onDataError(bar.progressBarElement, bar.progressBarMessageElement, "Parsing Error")
throw parsingError;
}
if (data.complete) {
if (data.success) {
onSuccess(progressBarElement, progressBarMessageElement, data.result);
} else {
onTaskError(progressBarElement, progressBarMessageElement, data.result);
}
if (data.hasOwnProperty('result')) {
onResult(resultElement, data.result);
}

const complete = bar.onData(data);

if (complete === true || complete === undefined) {
ProgressSocket.close();
}
}
};
}
return {
onSuccessDefault: onSuccessDefault,
onResultDefault: onResultDefault,
onErrorDefault: onErrorDefault,
onProgressDefault: onProgressDefault,
initProgressBar: initProgress,
};
})();
}

0 comments on commit 314e232

Please sign in to comment.