Reputation: 4277
I have a webpage which communicate via WebSocket with a WinForm, it's the first time i'm using WebSocket, and i've set a json structure for the communication with my webpage then by checking the json param "type" i do some stuff on it's value.
Till now it's a chain of else if
but it is the correct way to manage it?
Here is how my code looks like:
websocket.onmessage = function (e) {
var data = JSON.parse(e.data);
if (data.type === "err_login") {
var feedback = $("#modalLogin .invalid-feedback");
$("#modalLogin .codope").val("");
$("#modalLogin .password").val("");
feedback.find("h5").text(data.content.title);
feedback.addClass("d-block");
} else if (data.type === "err") {
var content = data.content;
Swal.fire({
heightAuto: false,
title: content.title,
text: content.text,
icon: "warning",
allowOutsideClick: false,
showDenyButton: true,
buttonsStyling: false,
customClass: {
confirmButton: "btn btn-lg btn-primary btn-swal",
denyButton: "btn btn-lg btn-warning ml-3 btn-swal",
},
confirmButtonText: "OK",
denyButtonText: arrLang[lang]["assistenza"],
}).then((result) => {
if (result.isDenied) {
$("#modalAssistenza").modal("show");
}
});
} else if (data.type === "prod") {
addProdotto(data.content);
} else if (data.type === "sbt") {
subtotale(data.content);
} else if (data.type === "fid") {
addFidelity(data.content);
} else if (data.type === "lot") {
addLotteria(data.content.lotteria);
} else if (data.type === "reset") {
reset();
} else if (data.type === "closed") {
$("#modalOffline").modal("show");
} else if (data.type === "lang") {
changeLanguage(data.content.lang);
}else if (data.type === "payement_text") {
setPaymentText(data.content)
}else if (data.type === "payement_success") {
var content = data.content;
Swal.fire({
heightAuto: false,
title: content.title,
text: content.text,
icon: "success",
showConfirmButton: false,
allowOutsideClick: false,
allowEscapeKey: false,
})
}else if (data.type === "payement_success_close") {
Swal.close();
}else if (data.type === "payement_error") {
var content = data.content;
Swal.fire({
heightAuto: false,
title: content.title,
text: content.text,
icon: "error",
allowOutsideClick: false,
buttonsStyling: false,
customClass: {
confirmButton: "btn btn-lg btn-primary btn-swal",
},
confirmButtonText: "OK",
}).then((result) => {
if (result.isConfirmed) {
websocket.send(`<PAY></PAY>`);
pagamentoIndietro();
}
});
}
};
Should i manage it in a different way?
Upvotes: 0
Views: 175
Reputation: 114
I am not an experienced developer (so some people smarter than me could have a better solution), but my proposition is:
I would make the switching logic in a different function, something like messageHandler(msg)
, and replace the if ... else if
statements with a simple switch
statement. It will have the same functionality, but the code will look a lot clearer.
Also, for each of the cases, I would just move them into a separate function. This makes it easier to read, test and document. Just put each functionality in a different function, which has a good comment on top and is well-tested. The only drawback I can find is that testing the coupling is going to be a pain (if you do it), but for me, the benefits outweigh the losses.
A more advanced way of doing it (if you want to offer flexibility) is to have a map [key, function], which maps keys to the appropriate functions, which need to be called. This is more complex, but I would not recommend it if you just need a simple solution to this problem.
Upvotes: 1