WebSocket学习笔记，SpringBoot整合WebSocket，前后端建立心跳

最新推荐文章于 2026-05-09 06:16:57 发布
原创 最新推荐文章于 2026-05-09 06:16:57 发布 · 2.2k 阅读 · 18 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
JavaWeb

当前文章被收录于：

JavaWeb
14 篇文章 0 人学习
订阅专栏 查看详情
本文详细介绍了WebSocket的概念、特点及运行机制，通过springBoot整合WebSocket实现前后端通讯的实例，探讨了心跳检测、重连机制及消息丢失处理策略。

1.概述

1.1概念

WebSocket 是 HTML5 一种新的协议，基于TCP协议实现了客户端和服务端全双工异步通信。

1.2特点

  1. 最初的握手阶段是http协议，握手完成后就切换到websocket协议，并完全与http协议脱离了。
  2. 通讯一旦建立连接后，通讯就是“全双工”模式了。服务端和客户端都能在任何时间自由发送数据。
  3. 交互模式不再是“请求-应答”模式，完全由开发者自行设计通讯协议。
  4. 通信的数据是基于“帧(frame)”的，可以传输文本数据，也可以直接传输二进制数据，效率高。
  5. 协议标识符是ws（如果加密，则为wss，类似http与https），服务器网址就是 URL。

1.3运行机制

每个WebSocket连接都始于一个HTTP请求。 就是WebSocket协议在第一次握手连接时，通过HTTP协议在传送WebSocket支持的版本号，协议的字版本号等一些列字段给服务器端。其中，有个Upgrade首部，用来把当前的HTTP请求升级到WebSocket协议。

请求成功则返回状态码101

WebSocket通过第一次的HTTP请求实现客户端与服务端的连接，如果成功则触发onOpen事件，否则触发onError事件，后续的传输不再依赖HTTP协议。

2.应用

本次学习通过搭建springBoot整合webSocket来实现一个简单的webSocket前后端通讯，前端使用html界面。

2.1客户端

一个界面通常会用到以下几个方法与服务进行交互

$(document).ready(function(){
    // 服务端请求地址
    var urlPrefix ='ws://localhost:8088/demoTest/';
    var ws = null;
    $('#user_join').click(function(){
        var name = $('#in_user_name').val();
        var url = urlPrefix + name;
        ws = new WebSocket(url);
        ws.onopen = function () {
            console.log("客户端建立 websocket 连接...");
        };
        ws.onmessage = function(event){
            //服务端发送的消息
            $('#message_content').append(event.data+'\n');
            console.log("服务端发送的消息：" + event.data);
        };
        ws.onclose = function(){
            console.log("客户端关闭 websocket 连接...");
        }
    });
    // 客户端发送消息到服务器 私发
    $('#user_send_single').click(function(){
        var userName = $('#user_name_2').val();
        var msg = $('#in_room_msg3').val();
        if(ws){
            ws.send(userName + "=" + msg);
        }
    });
    // 客户端发送消息到服务器 群发
    $('#user_send_all').click(function(){
        var msg = $('#in_room_msg').val();
        if(ws){
            ws.send(msg);
        }
    });
    // 断开连接
    $('#user_exit').click(function(){
        if(ws){
            ws.close();
        }
    });
})

2.2服务端

1、maven引入相关依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2、配置Bean

@Component
public class WebSocketConfig {
    /**
     * ServerEndpointExporter 作用
     * 这个Bean会自动注册使用@ServerEndpoint注解声明的websocket endpoint
     * 前提是直接使用springboot的内置容器
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

3、服务端核心处理

@Component
// 把当前类标识成一个WebSocket的服务端
@ServerEndpoint("/demoTest/{name}")
public class WebSocket {
    //  用于存所有的连接服务的客户端，这个对象存储是安全的
    private static ConcurrentHashMap<String, WebSocket>
                         webSocketSet = new ConcurrentHashMap<>();
    @OnOpen
    public void onOpen(@PathParam(value = "name") String name) {
        webSocketSet.put(name,this);
        String message = 
            "用户[" + name + "]建立连接，当前人数为：" +  webSocketSet.size();
        groupSending(message);
    }
    @OnMessage
    public void onMessage(@PathParam("name") String name, 
                            String message) {
        // 判断是否需要指定发送
        String[] split = message.split("=");
        if (split.length > 1){
            appointSending(split[0] , 
                    "用户[" + name + "]发来的消息： " + split[1]);
            appointSending(name , 
                    "给用户[" + split[0] + "]发送消息： " + split[1]);
        } else {
            groupSending("用户[" + name + "]的群发消息：" + message);
        }
    }
    // 群发
    public void groupSending(String message){
        for (String name : webSocketSet.keySet()){
            try {
                webSocketSet.get(name).session.getBasicRemote().sendText(message);
            }catch (Exception e){
                e.printStackTrace();
            }
        }
    }
     // 指定发送
    public void appointSending(String name,String message){
        try {
            webSocketSet.get(name).session.getBasicRemote().sendText(message);
        }catch (Exception e){
            e.printStackTrace();
        }
    }
    
    @OnClose
    public void onClose(@PathParam(value = "name") String name) {
        // 当前的Session移除
        webSocketSet.remove(name);
        String message = 
            "用户[" + name + "]断开连接，当前人数为：" +  webSocketSet.size();
        groupSending(message);
    }
}

2.3运行结果

经过调试能够建立客户端与服务端之间的通讯

3.心跳检测和重连机制

3.1心跳的作用

在客户端和服务端建立了webSocket连接后，可能会发生一些异常现象，比如断网、断电之类，心跳是为了确认客户端和服务端是否都还正常存在，有了心跳，在某些断网瞬间可以及时重连，避免消息丢失。

3.2核心代码

前端增加心跳请求，后端在接收消息处修改，如果收到的是心跳信息，也返回一个心跳信息给前端

var heartCheck = {
    timeout: 5000, // 发送心跳间隔的时间 毫秒
    num: 3,  // 3次心跳均未响应重连
    timeoutObj: null,
    reset: function () {
        clearInterval(this.timeoutObj);
        this.start();
    },
    start: function () {
        var this_ = this;
        this.timeoutObj = setTimeout(function () {
            ws.send("msg=heartCheck");
        }, this.timeout)
    }
};

异常时调用重连方法

//重连函数
//因为重连函数会被socket事件频繁触发，设置延迟避免请求过多
function reconnect(url) {
    if (!flag) {
        return;
    }
    flag = false;
    setTimeout(function () {
        createWebsocket(url);
        flag = true;
    }, 5000)
}

//建立websocket连接函数
function createWebsocket(url) {
    try {
        ws = new WebSocket(url);
        //  对WebSocket各种事件进行监听方法，onopen那些
        init(ws);
    } catch (e) {
        //进行重连;
        console.log('websocket连接错误，即将重连');
        reconnect(url);
    }
}

3.3运行结果

建立心跳后把服务端断掉可以触发重连，重新启动服务端又可以连上了

 

3.4消息丢失

实际的交互场景中，有可能会出现连接已断开而服务端不知道的情况，那么此时服务端的消息可能没有传给客户端造成消息丢失的情况。可以把服务端接收到的消息存起来，并且给消息定义编号，在交互过程中带上这些信息，客户端在收到消息后返回该消息的确认信息，确认已经收到消息。

而客户端未收到的消息可以在正常情况下重新发送，通过比较服务端的消息编号与客户端确认收到的消息编号之间的大小来判断是否存在丢失的消息。交互过程可以把信息封装为json，接收时方便解析。

// 定义一个SendRequest 类来记录交互中传递的消息信息
public class SendRequest {
    private String sendName;
    private String revName;
    private Integer sendId;
    private Integer revId;
    private Map<Integer, String> msgRequestMap = new HashMap<>();
    //...getter setter 略
}
/服务端发送
// 封装信息
if (sendRequest != null){
    JSONObject jsonObject = new JSONObject();
    jsonObject.put("type","msg");
    jsonObject.put("msgId",sendRequest.getSendId());
    jsonObject.put("msg",message);
    jsonObject.put("sendName",sendRequest.getSendName());
    message = jsonObject.toJSONString();
}
try {
    webSocketSet.get(name).session.getBasicRemote().sendText(message);
    log.info("服务端发送消息：" + message);
}catch (Exception e){
    log.info("指定发送异常，接收用户[" + name +"]," + e.getMessage());
    e.printStackTrace();
}

修改接收消息

@OnMessage
    public void onMessage(@PathParam("name") String name, String message) {
        log.info("[WebSocket] [name={}]收到消息：{}" ,name, message);
        Map<String, SendRequest> sendRequestMap = MyConnect.getSendRequestMap();
        // 判断是否需要指定发送
        String[] split = message.split("=");
        if (split.length > 1){
            if ("heartCheck".equals(split[1])){
                // 如果是心跳，返回对应的心跳信息
                appointSending(name, "heart", null);
            } else if ("msgId".equals(split[1])){
                // 客户端确定收到消息了
                SendRequest sendRequest = sendRequestMap.get(split[0]);
                sendRequest.setRevId(Integer.valueOf(split[2]));
                sendRequestMap.put(name, sendRequest);
            } else {
                if (sendRequestMap.containsKey(name)){
                    // 已发送过消息，更新该用户的发送信息
                    SendRequest sendRequest = sendRequestMap.get(name);
                    Integer newSendId = sendRequest.getSendId() + 1;
                    String msgCon = "用户[" + name + "]发来的消息： " + split[1];
                    makeMsg(sendRequest, newSendId, msgCon);
                    sendRequest.setSendId(newSendId);
                    sendRequestMap.put(name, sendRequest);
                    appointSending(split[0] , msgCon, sendRequest);
//                    appointSending(name , "给用户[" + split[0] + "]发送消息： " + split[1], sendRequest);
                } else {
                    // 首次发送消息
                    SendRequest sendRequest = new SendRequest(name, split[0], 1, 0);
                    String msgCon = "用户[" + name + "]发来的消息： " + split[1];
                    makeMsg(sendRequest, 1, msgCon);
                    sendRequestMap.put(name, sendRequest);
                    appointSending(split[0] , msgCon, sendRequest);
//                    appointSending(name , "给用户[" + split[0] + "]发送消息： " + split[1], sendRequest);
                }
            }
            MyConnect.setSendRequestMap(sendRequestMap);
        } else {
            // 群发
            groupSending("用户[" + name + "]的群发消息：" + message);
        }

    }

重发消息

// 建立连接以后检测一下是否有丢失的消息
Collection<SendRequest> values = MyConnect.getSendRequestMap().values();
if (!values.isEmpty()){
    for (SendRequest sendRequest : values){
        //这个用户的相关消息
        if (name.equals(sendRequest.getRevName())){
            Integer revId = sendRequest.getRevId();
            // 发送之前未发出的消息
            while (revId < sendRequest.getSendId()){
                Map<Integer, String> msgRequestMap = sendRequest.getMsgRequestMap();
                Integer newId = revId++;
                String msgCon = msgRequestMap.get(newId);
                appointSending(name , msgCon, sendRequest);//发送消息
            }
        }
    }
}

运行结果

 

4.小结

通过本次学习，对WebSocket的概念、运行、应用等有了初步的理解，编写了相关demo运行调试后，也大概了解了主要的四个事件运用方法、心跳、重连等。这次的例子中只结合了spirngBoot做尝试，WebSocket还可以结合Netty、Mina等实现通信，后续可以继续了解。

 

本文涉及的demo示例代码可以点此下载

 

参考文章：

https://zhuanlan.zhihu.com/p/66771214

 

 

标签
#websocket #java #http
Spring boot 2基于Netty的高性能Websocket服务器(心跳模式) 页面
10-14
此资源为websocket的页面源码，配合Spring boot 2基于Netty的高性能Websocket服务器(心跳模式) 文章来使用
SpringBoot整合Netty心跳机制过程详解
08-24
主要介绍了SpringBoot整合Netty心跳机制过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Spring Boot WebSocketSession 实战：从心跳检测到连接管理，一个聊天室的完整实现
最新发布
weixin_30878501的博客
05-09 465
本文详细介绍了如何使用Spring Boot和WebSocketSession实现一个完整的聊天室应用，涵盖从心跳检测到连接管理的全流程。通过实战示例，展示了如何高效管理WebSocket连接、实现消息广播、处理异常及优化性能，为开发者提供了一套可靠的实时通信解决方案。
WebSocket的心跳检测和重连和Spring的整合
jacksonary的博客
01-12 1万+
最近搞好论文，对其中的WebSocket中相对比较实用的技术做一个总结，这个东西之前是用来作前后台的监控数据的实时通信，主要记录一下心跳包和重连的过程，websocket中的心跳这里是通过客户端定义一个定时器实现，主要代码如下： //心跳检测,每20s心跳一次 var heartCheck = { timeout: 20000, timeoutObj: null, s...
SpringBoot实现WebSocket心跳机制
qq_35019521的博客
11-16 7825
SpringBoot实现WebSocket心跳检测，检测数据写入CSV文件
SpringBoot+WebSocket实战与心跳机制
qq_42582773的博客
09-24 1万+
SpringBoot集成WebSocket
【websocket前后端交互】vue-springboot实现websocket前后端交互链接，websocket心跳重连，包含前后端代码，复制即可用【详细解释版本】
seeeeeeeeeee的博客
05-10 7693
前言： 还是老规矩，一步步的教大家如何建立前后端的 websocket 链接，并能完成互相传送数据的简单功能。由于网上找了半天发现很多帖子都是东一句西一句的，要不就是写的没什么注释和解释，导致我这个前端人员看后端代码非常折磨。 但是，总算慢慢摸索给整出来了，那现在我就把一个详细版的，用前端小伙伴也听得懂的大白话来说一下如何实现 websocket 功能。 效果图 文档说明 前端代码部分 防止有后端小伙伴想写个前端代码的，不知道写哪里。我给个结构图 代码直接复制，然后再views内创建一个vue文件
SpringBoot3-整合WebSocket指南
CoderJia的学习之路
12-15 1万+
WebSocket 是一种网络通信协议，提供全双工通信通道，使服务器可以主动向客户端推送数据。与传统的 HTTP 请求-响应模式不同，WebSocket 在建立连接后，允许服务器和客户端之间进行双向实时通信。
SPringboot整合WebSocket
2301_80387142的博客
12-05 2933
在现代Web应用中，实时通信变得越来越重要。WebSocket提供了一种在单个连接上进行全双工通信的方式，允许服务器主动向客户端发送消息。Spring Boot作为Java开发中流行的微框架，整合WebSocket可以非常方便地实现实时通信功能。本文将介绍如何在Spring Boot项目中整合WebSocket。提示：以下是本篇文章正文内容，下面案例可供参考通过上述步骤，我们可以在Spring Boot项目中整合WebSocket，实现服务器与客户端之间的实时通信。
Springboot整合websocket(附详细案例代码)
weixin_46425661的博客
09-09 1万+
本文主要介绍WebSocket的概念，和在springboot项目中的使用。
WebSocket（一）：SpringBoot整合与Socketjs心跳重连实现
菜鸡也有大佬梦
08-30 1万+
一.概念 1.单播(Unicast) ：点对点，私信私聊 2.多播，也叫组播(Multicast)（特地人群）: 多人聊天，发布订阅 3.广播(Broadcast)(所有人): 游戏公告，发布订阅 二.Springboot整合Websocket 1.依赖 后端 org.springframework.boot spring-boot-starter-websocket 2.定义两个消息发送的实...
WebSocket前后端交互
热门推荐
weixin_44402979的博客
03-12 3万+
SpringBoot集成webSocket,前后端交互整个流程详解
建立WebSocket心跳机制(Spring Boot + VUE)
qq_18244417的博客
06-17 5870
一、WebSocket 简介“HTML5 规范在传统的 web 交互基础上为我们带来了众多的新特性，随着 web 技术被广泛用于 web APP 的开发，这些新特性得以推广和使用，而 we...
Springboot 整合 WebSocket
原名：@程序员大禹
11-16 9469
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工（full-duplex）通信，即允许服务器主动发送信息给客户端。因此，在WebSocket中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，客户端和服务器之间的数据交换变得更加简单。
WebSocket服务端数据推送及心跳机制(Spring Boot + VUE)：
SunPeng的博客
01-25 3334
WebSocket服务端数据推送及心跳机制(Spring Boot + VUE)：
springboot集成websocket实现心跳维持，防止自动断开
weixin_42226741的博客
07-14 9402
1.maven依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <dependency> <groupId>org.projectlombok&...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值