JS采用WebSocket与后端服务器通信

最新推荐文章于 2025-06-27 09:03:09 发布

原创

最新推荐文章于 2025-06-27 09:03:09 发布 · 2.9k 阅读

6 ·

CC 4.0 BY-SA版权

本文为享有盛誉之名博主原创文章，未经博主允许不得转载。除非给我打钱，在征求本人同意即可。

本文介绍了在JavaScript中使用WebSocket与后端服务器进行通信的实践经验，包括连接建立、发送与接收数据、异常处理以及如何处理地址变化。通过创建发送和接收模板简化通信过程，并提供了一个通用的方法来管理WebSocket连接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我想大家会有个疑问，我为何会采用websocket通信，其实作为新手得我也尝试过用ajax、socket、vue.ajios等方式都失败了，我也没有搞懂什么回事，就是秉着不管白猫黑猫，能抓到老鼠就是好猫，我只要能通信，完成功能即可，暂时不管这么多，至于原理以后再研究。

我只负责前端，后端服务器是另个同事负责，他用的是C#来编写，所以参照一个网址模板（双方都按照约定方式编写）：https://www.cnblogs.com/notyourdog/p/9728047.html

如果后端使用java或者其他写法，网上搜索下服务端的websocket的写法。

尝试我给他发信息可以收到，他给我回得消息我也收的到。

用了一段时间，目前通信正常，没有发现什么异常，满足基本需求，其他得就不太了解了。

第一次连接，模板如下：

//第1步 连接后端
   //window.YESconnectServer();//后期修改ip方便
   var wsImpl = window.WebSocket || window.MozWebSocket;
    // 创建新的websocket新连接端口
    window.ws = new wsImpl('ws://192.168.0.1:8888');//192.168.0.1这是后端服务器地址，本地是127.0.0.1或者localhost，这里要注意：要与服务端统一ip写法（或者服务端监听所有得，如0.0.0.0：8888），否则其他电脑无法访问。
    console.log("连接中，等待连接 ..<br/>");
    //没有连接上就给客户提示
    document.getElementById("container").innerHTML = '<img src="img/xxx.gif" style="margin-left:80px;margin-top:50px;"/><span style="margin-left:-80px;color:red">请尝试按F5刷新页面</span>';

    //第2步 当链接对象找到服务端成功对接后，提示正常打开
    ws.onopen = function () {
        console.log("连接成功");
        //连接公共就要取消提示：visibility:hidden;
        document.getElementById("container").innerHTML = '<img src="img/xxx.gif" style="margin-left:80px;margin-top:30px;visibility:hidden;" /><span style="margin-left:-90px;color:red;visibility:hidden;">等待时间久，请尝试刷新页面</span>';

        // id对应刻客户本机的IP
        // console.log("唯一id号："+id); //打印看看对否

    // 发送数据给后端处理，这里我使用的是json
    let data = {
          "xxx": xx,
          "xxx": xx,
          "xxx": xx,
          "xxx": ""
        }
      var sendStr = JSON.stringify(data);
      // console.log("发送数据（转换后）:" + sendStr);
      ws.send(sendStr);
    };

    //第3步 接收到