websocket简单运用前后端交互_websocket 交互逻辑-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43525290/article/details/108081372

WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议，简化了客户端和服务器之间的数据交换，允许服务端主动发送数据。本文介绍了在实际开发中使用 WebSocket 的步骤，包括创建 websocket.js 文件、后台交互的代码、Spring 的 ServerEndpointExporter 配置以及处理不支持 WebSocket 的浏览器的解决方案。

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

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

（以上都是百度搜索的，嘿嘿）

这块就贴一下我们开发的过程中的代码：

1、页面需要有websocket.js文件，在首次主界面访问时就应该加载。

var websocket = null;

if("WebSocket" in window){
   
    var userId="guest";
    var user= findUserInfo();
    if(null!=user)userId=user.id;
    // var webUrl = $("#headBasePath").val();
    var wsHref = baseUrl().replace("http:","ws:");
    console.log(wsHref);
    websocket = new WebSocket(wsHref+"/"+'webSocket/'+userId);
    websocket.onopen = function (event) {
   
        console.log("建立连接");
    }

    websocket.onclose = function (event) {
   
        console.log("连接关闭");

    }

    websocket.onmessage = function (event) {
   
        console.log("websocket收到消息" );
        var result=JSON.parse(event.data);
        // 后台返回的消息，拿到后进行逻辑操作
        createExcelList(result.data,result.datafileId);
    }

    websocket.onerror = function () {
   
        console.log('websocket通信发生错误！');
    }

    window.onbeforeunload = function () {
   
        websocket.close();

    }
}else {
   
    console.log('该浏览器不支持websocket');
}