NiceToMytyuk
NiceToMytyuk

Reputation: 4277

How to manage correctly websocket messages?

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

Answers (1)

ELKozel
ELKozel

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

Related Questions