如何正确管理 websocket 消息？答案

【问题标题】：How to manage correctly websocket messages?如何正确管理 websocket 消息？
【发布时间】：2021-02-22 10:20:18
【问题描述】：

我有一个通过 WebSocket 与 WinForm 通信的网页，这是我第一次使用 WebSocket，我已经为与我的网页通信设置了一个 json 结构，然后通过检查 json 参数“类型”我做一些关于它的价值的东西。

到目前为止，它是else if 的链，但它是管理它的正确方法吗？

我的代码如下所示：

  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();
        }
      });
    }
  };

我应该以不同的方式管理它吗？

【问题讨论】：

标签： javascript jquery websocket

【解决方案1】：

我不是一个经验丰富的开发者（所以一些比我聪明的人可能有更好的解决方案），但我的建议是：

我会在不同的函数中创建切换逻辑，例如messageHandler(msg)，并用简单的switch 语句替换if ... else if 语句。它将具有相同的功能，但代码看起来会更清晰。

另外，对于每种情况，我都会将它们移到单独的函数中。这使得阅读、测试和记录变得更容易。只需将每个功能放在不同的功能中，该功能在顶部有很好的评论并且经过了很好的测试。我能找到的唯一缺点是测试耦合会很痛苦（如果你这样做的话），但对我来说，好处大于损失。

一种更高级的方法（如果您想提供灵活性）是有一个map [key, function]，它将键映射到需要调用的适当函数。这比较复杂，但如果您只是需要一个简单的解决方案来解决这个问题，我会不推荐它。

【讨论】：