Springboot整合websocket(附详细案例代码)


WebSocket简述

WebSocket是什么?

WebSocket 是一种网络通信协议,它提供了全双工(full-duplex)的通信渠道,允许客户端和服务端之间的双向数据交换。WebSocket 协议是在 HTTP 协议的基础上构建的,它通过一个初始的 HTTP 握手过程来建立连接,之后转换到二进制帧传输数据。
在这里插入图片描述

WebSocket 的特点

  • 全双工通信:WebSocket 支持客户端和服务端之间的双向通信,这意味着服务端可以主动向客户端发送信息,而不必等待客户端的请求。
  • 持久连接:WebSocket 连接一旦建立,就会保持打开状态,直到任何一方关闭连接。
  • 低延迟:相比轮询等其他实时通信方案,WebSocket 通信具有更低的延迟。
  • 安全性:WebSocket 可以通过 SSL/TLS 加密(wss://)来保证通信的安全性。
  • 实时性:WebSocket 支持实时数据推送,减少了轮询带来的延迟。
  • 性能:相比轮询,WebSocket 减少了请求次数,降低了带宽消耗。
  • 灵活性:WebSocket 可以用于多种类型的数据传输,包括文本、二进制数据等。

WebSocket 的工作流程

握手:客户端首先通过 HTTP 协议发起一个特殊的 GET 请求到服务端,这个请求包含了特定的升级头(Upgrade: websocket 和 Connection: Upgrade)以及其他必要的信息。
响应:服务端响应这个请求,并通过一个特定的算法生成一个接受密钥(accept key),然后发送回客户端。
建立连接:一旦握手成功,客户端和服务端之间的 WebSocket 连接就建立起来了。
数据交换:通过这个连接,客户端和服务端可以相互发送数据帧。

在这里插入图片描述

WebSocket的消息(帧)格式

WebSocket 的消息格式与 HTTP 请求和响应的消息格式有所不同。WebSocket 的消息格式可以是文本或二进制数据,并且 WebSocket 消息的传输是在一个已经建立的连接上进行的,因此不需要再进行 HTTP 请求和响应的握手操作。

WebSocket 消息格式由两个部分组成:消息头(帧头)和消息体(负载)。
消息头包含以下信息:

  • FIN: 表示这是一条完整的消息,一般情况下都是1。
  • RSV1、RSV2、RSV3: 暂时没有使用,一般都是0。
  • Opcode: 表示消息的类型,包括文本消息、二进制消息等。
  • Mask: 表示消息是否加密。
  • Payload length: 表示消息体的长度。
  • Masking key: 仅在消息需要加密时出现,用于对消息进行解密。

消息体就是实际传输的数据,可以是文本或二进制数据。

WebSocket 与 HTTP

HTTP 是一种基于请求/响应模式的应用层协议,用于在 Web 浏览器和 Web 服务器之间传输数据。它是一个无状态协议,意味着每次请求都是独立的,服务器不会记住之前的请求。
而WebSocket 是一种网络通信协议,它提供了全双工(full-duplex)的通信渠道,允许客户端和服务端之间的双向数据交换。WebSocket 协议是在 HTTP 协议的基础上构建的,它通过一个初始的 HTTP 握手过程来建立连接,之后转换到二进制帧传输数据。

springboot中整合WebSocket

pom依赖

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

		<dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>4.6.3</version>
        </dependency>
        
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

实体类

用于存储客户端的相关信息

import lombok.Data;

import javax.websocket.Session;
import java.time.LocalDateTime;

/**
 * 客户端实体类
 *
 * @author qf
 * @since 2024/08/29 19:50
 */
@Data
public class ClientInfoEntity {

    /**
     * 客户端唯一标识
     */
    private String token;
    /**
     * 客户端连接的session
     */
    private Session session;
    /**
     * 连接存活时间
     */
    private LocalDateTime existTime;
}

配置类

握手配置类

在和客户端连接时需要用到代表每个客户端的唯一的连接标识,可以在握手配置类中为每个客户端生成一个唯一的连接标识,也可以让客户端传一个唯一的连接标识。本文使用让客户端传一个唯一的连接标识。

import org.springframework.context.annotation.Configuration;

import javax.servlet.http.HttpSession;
import javax.websocket.HandshakeResponse;
import javax.websocket.server.HandshakeRequest;
import javax.websocket.server.ServerEndpointConfig;
import java.util.Map;
import java.util.UUID;

/**
 * 主要用于WebSocket的握手配置
 * @author qf
 * @since 2024/08/29 19:55
 */
@Configuration
public class GetHttpSessionConfig  extends ServerEndpointConfig.Configurator {
    /**
     * 注意:  每一个客户端发起握手,端点就有一个新的实列,那么引用的这个配置也是新的实列,这里sec的用户属性也不同就不会产生冲突。
     * 修改握手机制  就是第一次http发送过来的握手
     * @param sec   服务器websocket端点的配置
     * @param request
     * @param response
     */
    @Override
    public void modifyHandshake(ServerEndpointConfig sec, HandshakeRequest request, HandshakeResponse response) {
//        将从握手的请求中获取httpsession
        HttpSession httpSession =(HttpSession) request.getHttpSession();


        /**
         * 一般会在请求头中添加token 解析出来id作为键值对
         */
        Map<String, Object> properties = sec.getUserProperties();
        /**
         * 一个客户端和和服务器发起一次请求交互 就有一个唯一session
         * 设置唯一标识:为每个客户端生成一个唯一的UUID作为连接标识,并将其存储在UserProperties中,便于后续跟踪与管理
         */
//        properties.put(HttpSession.class.getName(),httpSession);
        String sessionKey = UUID.randomUUID().toString().replaceAll("-", "");
        properties.put("Connected",sessionKey);
    }
}

WebSocket配置类

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * WebSocketConfig类的主要功能是配置和管理WebSocket端点,
 *      确保它们在应用程序启动时被正确初始化和注册,以便能够处理WebSocket连接和通信。
 *
 * @author qf
 * @since 2024/08/29 20:02
 */
@Configuration
public class WebSocketConfig {

    /**
     * 该方法用来创建并返回一个ServerEndpointExporter实例。
     * 这个实例的作用是扫描并自动配置所有使用@ServerEndpoint注解标记的WebSocket端点
     *
     * @return ServerEndpointExporter:这是一个用于自动检测和管理WebSocket端点的类。
     *          通过将其实例化并配置为Spring管理的Bean,可以确保所有WebSocket端点在应用程序启动时被自动初始化和注册。
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

自定义异常类

public class ServiceException extends RuntimeException {

    private Integer code;

    private String msg;

    public ServiceException(Integer code, String msg) {
        super();
        this.msg = msg;
        this.code = code;
    }

    public ServiceException(String msg) {
        this(1, msg);
    }

    @Override
    public String getMessage() {
        return msg;
    }

    /**
     * @return code
     */
    public Integer getCode() {
        return code;
    }
}

webSocket服务类


import cn.hutool.core.util.ObjectUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;
import org.springframework.web.bind.annotation.CrossOrigin;

import javax.annotation.PostConstruct;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.time.LocalDateTime;
import java.util.Date;
import java.util.Iterator;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

/**
 * 该类负责监听客户端的连接、断开连接、接收消息、发送消息等操作。
 *
 * @author qf
 * @since 2024/08/29 19:50
 */
@Slf4j
@Component
@CrossOrigin(origins = "*")
@ServerEndpoint(value = "/webSocket/{token}", configurator = GetHttpSessionConfig.class)
public class ChatEndpoint2 {
    //key:客户端连接唯一标识(token)
    //value:ClientInfoEntity
    private static final Map<String, ClientInfoEntity> uavWebSocketInfoMap = new ConcurrentHashMap<String, ClientInfoEntity>();

    private static final int EXIST_TIME_HOUR = 6;

    /**
     * 连接建立成功调用的方法
     *
     * @param session 第一个参数必须是session
     * @param sec
     * @param token   代表客户端的唯一标识
     */
    @OnOpen
    public void onOpen(Session session, EndpointConfig sec, @PathParam("token") String token) {
        if (uavWebSocketInfoMap.containsKey(token)) {
            throw new ServiceException("token已建立连接");
        }
        
        //把成功建立连接的会话在实体类中保存
        ClientInfoEntity entity = new ClientInfoEntity();
        entity.setToken(token);
        entity.setSession(session);
        //默认连接6个小时
        entity.setExistTime(LocalDateTime.now().plusHours(EXIST_TIME_HOUR));
        uavWebSocketInfoMap.put(token, entity);
        //之所以获取http session 是为了获取获取httpsession中的数据 (用户名 /账号/信息)
        log.info("WebSocket 连接建立成功: " + token);
    }

    /**
     * 当断开连接时调用该方法
     *
     * @param session
     */
    @OnClose
    public void onClose(Session session, @PathParam("token") String token) {
        // 找到关闭会话对应的用户 ID 并从 uavWebSocketInfoMap 中移除
        if (ObjectUtil.isNotEmpty(token) && uavWebSocketInfoMap.containsKey(token)) {
            uavWebSocketInfoMap.remove(token);
            log.info("WebSocket 连接关闭成功: " + token);
        }
    }

    /**
     * 接受消息
     * 这是接收和处理来自用户的消息的地方。我们需要在这里处理消息逻辑,可能包括广播消息给所有连接的用户。
     *
     */
    @OnMessage
    public void onMessage(Session session, @PathParam("token") String token, String message) throws IOException {
        log.info("接收到消息:" + message);

        ClientInfoEntity entity = uavWebSocketInfoMap.get(token);
        //如果是心跳包
        if("heartbeat".equals(message)){
            //只要接受到客户端的消息就进行续命(时间)
            entity.setExistTime(LocalDateTime.now().plusHours(EXIST_TIME_HOUR));
            if (entity.getSession().isOpen()) {
                entity.getSession().getBasicRemote().sendText("{\"msg\": \"success\", \"code\": 0}");
            }
            return;
        }
        //业务逻辑

        //只要接受到客户端的消息就进行续命(时间)
        entity.setExistTime(LocalDateTime.now().plusHours(EXIST_TIME_HOUR));
        if (entity.getSession().isOpen()) {
            entity.getSession().getBasicRemote().sendText("{\"msg\": \"success\", \"code\": 0}");
        }
    }

    /**
     * 处理WebSocket中发生的任何异常。可以记录这些错误或尝试恢复。
     */
    @OnError
    public void onError(Throwable error) {
        log.error("报错信息:" + error.getMessage());
        error.printStackTrace();

    }

    private static final SimpleDateFormat FORMAT = new SimpleDateFormat("yyyy:MM:dd hh:mm:ss");

    /**
     * 发生消息定时器
     */
    @PostConstruct
    @Scheduled(cron = "0/1 * *  * * ? ")
    public void refreshDate() {
        //开启定时任务,1秒一次向前台发送当前时间
        //当没有客户端连接时阻塞等待
        if (!uavWebSocketInfoMap.isEmpty()) {
            //超过存活时间进行删除
            Iterator<Map.Entry<String, ClientInfoEntity>> iterator = uavWebSocketInfoMap.entrySet().iterator();
            while (iterator.hasNext()) {
                Map.Entry<String, ClientInfoEntity> entry = iterator.next();
                if (entry.getValue().getExistTime().compareTo(LocalDateTime.now()) <= 0) {
                    log.info("WebSocket " + entry.getKey() + " 已到存活时间,自动断开连接");
                    try {
                        entry.getValue().getSession().close();
                    } catch (IOException e) {
                        log.error("WebSocket 连接关闭失败: " + entry.getKey() + " - " + e.getMessage());
                    }
                    //过期则进行移除
                    iterator.remove();
                }
            }
            sendMessage(FORMAT.format(new Date()));
        }
    }

    /**
     * 群发信息的方法
     *
     * @param message 消息
     */
    public void sendMessage(String message) {
        System.out.println(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date())
                + "发送全体消息:" + message);
        //循环客户端map发送消息
        uavWebSocketInfoMap.values().forEach(item -> {
            //向每个用户发送文本信息。这里getAsyncRemote()解释一下,向用户发送文本信息有两种方式,
            // 一种是getBasicRemote,一种是getAsyncRemote
            //区别:getAsyncRemote是异步的,不会阻塞,而getBasicRemote是同步的,会阻塞,由于同步特性,第二行的消息必须等待第一行的发送完成才能进行。
            // 而第一行的剩余部分消息要等第二行发送完才能继续发送,所以在第二行会抛出IllegalStateException异常。所以如果要使用getBasicRemote()同步发送消息
            // 则避免尽量一次发送全部消息,使用部分消息来发送,可以看到下面sendMessageToTarget方法内就用的getBasicRemote,因为这个方法是根据用户id来私发的,所以不是全部一起发送。
            item.getSession().getAsyncRemote().sendText(message);
        });
    }
}

websocket中Session的 getBasicRemote() 和 getAsyncRemote() 方法的区别

websocket中Session的 getBasicRemote() 和 getAsyncRemote() 方法有以下主要区别

  1. 同步 vs 异步
    • getBasicRemote():同步发送消息的方式。发送消息时会阻塞当前线程,直到消息发送完成。
    • getAsyncRemote():异步发送消息的方式。发送消息后立即返回,不阻塞当前线程。
  2. 性能和并发
    • getBasicRemote():由于同步特性,可能会导致性能瓶颈,尤其是在高并发场景下。
    • getAsyncRemote():异步特性使得它更适合高并发场景,提高系统的响应速度和吞吐量。
  3. 使用场景
    • getBasicRemote():适用于消息量较小且对实时性要求较高的场景。
    • getAsyncRemote():适用于大量消息发送或者对实时性要求相对较低的场景。

总之两者的使用场景为:
getBasicRemote():同步发送,适合小量消息和高实时性需求。
getAsyncRemote():异步发送,适合大量消息和高并发场景。

前端代码

代码为.uve后缀文件,直接将代码复制到uve项目中即可。

<template>
<!-- websocketceshi -->
  <div class="layout">
    <div class="msgBody">{{ msg }}</div>
    <input v-model="sendMsg" style="width:200px;height:30px;margin-top:20px"/>
    <button @click="sendMessage" style="width:100px;height:30px;">发送</button>
    <button @click="close" style="width:100px;height:30px;">断开链接</button>
    <button @click="init" style="width:100px;height:30px;">建立链接</button>
  </div>
</template>

<script>
export default {
  name: "LayOut",
  data() {
    return {
      msg: "",
      sendMsg: "",
      //后台的地址,只需要动localhost:8089部分,改成你后端的地址。
      //后面webSocket是后台设定的接口地址,uuid_test001是你前台的客户端唯一id(可以使用uuid生成)。
      //用于区分不同的客户端,比如你多个客户端连接后台,后台推送数据的时候需要根据这个id不同,给对应的人推送,不然就推送到所有建立链接的网页上了
      path: "ws://localhost:8089/qf/webSocket/uuid_test001",
      //存websocket实例化的
      socket: "",
    };
  },
  methods: {
    //用于前台发送数据到后台,调用websocket中的send方法把数据发过去。
    sendMessage() {
      this.socket.send(this.sendMsg);
    },
    //初始化建立前后台链接
    init() {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path);
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
        this.socket.onclose = this.close;
      }
    },
    //链接成功时的回调函数
    open() {
      console.log("socket连接成功");
    },
    //链接错误时的回调
    error(err) {
      console.log("连接错误" + err);
    },
    //后台消息推送过来,接收的函数,参数为后台推过来的数据。
    getMessage(msg) {
      this.msg = msg.data;
    },
    //链接关闭的回调
    close(event) {
      //socket是链接的实例,close就是关闭链接
      this.socket.close()
      console.log("断开链接成功");
    },
  },
  created() {
    //开局初始化建立链接
    this.init();
  },
};
</script>
<style scoped>
.layout {
  position: relative;
  width: 100%;
  height: 100%;
}
.msgBody {
  width: 500px;
  height: 300px;
  border: 1px solid rgb(95, 79, 79);
}
</style>

心跳机制

在WebSocket中使用心跳机制是为了保持 WebSocket 连接的活跃状态而设计的一种机制。在长时间没有数据传输的情况下,WebSocket 连接可能会被中间的网络设备(如路由器或防火墙)认为已经断开,从而导致连接失效。心跳机制通过定期发送小的数据包来保持连接的活动状态,从而避免这种情况的发生。

心跳机制的作用:

  1. 保持连接活跃:在网络设备中,长时间没有数据传输的连接可能会被视为断开,心跳机制可以防止这种情况。
  2. 检测连接状态:心跳机制可以帮助检测连接是否仍然有效,及时发现并处理连接中断的情况。
  3. 优化资源使用:心跳机制可以确保无效的连接被及时关闭,释放资源。

实现心跳机制的方式
心跳机制可以通过多种方式实现,常见的方法包括定时发送心跳包、响应心跳请求以及超时重试等。

添加心跳机制的前端代码

<template>
    <!-- websocketceshi -->
    <div class="layout">
      <div class="msgBody">{{ msg }}</div>
      <input
        v-model="sendMsg"
        style="width: 200px; height: 30px; margin-top: 20px"
      />
      <button @click="websocketsend(sendMsg)" style="width: 100px; height: 30px">
        发送
      </button>
      <button @click="websocketclose" style="width: 100px; height: 30px">
        断开链接
      </button>
      <button @click="initWebSocket" style="width: 100px; height: 30px">
        建立链接
      </button>
    </div>
  </template>
  
  <script>
  export default {
    name: "LayOut",
    data() {
      return {
        websock: null, //建立的连接
        lockReconnect: false, //是否真正建立连接
        timeout: 20 * 1000, //20秒一次心跳
        timeoutObj: null, //心跳心跳倒计时
        serverTimeoutObj: null, //心跳倒计时
        timeoutnum: null, //断开 重连倒计时
        msg: "", //显示的值
        sendMsg: "", //输入框的值
      };
    },
    created() {
      // //页面刚进入时开启长连接
      this.initWebSocket();
    },
    destroyed() {
      //页面销毁时关闭长连接
      this.websocketclose();
    },
    methods: {
            //建立连接,初始化weosocket
      initWebSocket() {
        //后台地址,前面的ws不动,后面是后台地址,我是本地运行的所以填的本地,自行更改。再后面webSocket是后端的接口地址,uuid_test002是参数
        const wsuri = "ws://localhost:8089/qf/webSocket/uuid_test000";
        //建立连接
        this.websock = new WebSocket(wsuri);
        //连接成功
        this.websock.onopen = this.websocketonopen;
        //连接错误
        this.websock.onerror = this.websocketonerror;
        //接收信息
        this.websock.onmessage = this.websocketonmessage;
        //连接关闭
        this.websock.onclose = this.websocketclose;
      },
      reconnect() {
        //重新连接
        var that = this;
        //判断链接状态,true就是链接,false是断开,这里如果是链接状态就不继续执行了,跳出来。
        if (that.lockReconnect) {
          return;
        }
        //把链接状态改为true
        that.lockReconnect = true;
        //没连接上会一直重连,设置延迟避免请求过多
        that.timeoutnum && clearTimeout(that.timeoutnum);
        that.timeoutnum = setTimeout(function () {
          //初始化新连接
          that.initWebSocket();
          //把链接状态改为false
          that.lockReconnect = false;
        }, 5000);
      },
      reset() {
        //重置心跳
        var that = this;
        //清除时间
        clearTimeout(that.timeoutObj);
        clearTimeout(that.serverTimeoutObj);
        //重启心跳
        that.start();
      },
      start() {
        //开启心跳
        var self = this;
        //有延迟时间的就清除掉
        self.timeoutObj && clearTimeout(self.timeoutObj);
        self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
        //从新创建计时器
        self.timeoutObj = setTimeout(function () {
          //这里发送一个心跳,后端收到后,返回一个心跳消息
          if (self.websock.readyState == 1) {
            //如果连接正常发送信息到后台
            self.websock.send("ping");
          } else {
            //否则重连
            self.reconnect();
          }
          self.serverTimeoutObj = setTimeout(function () {
            //超时关闭
            self.websock.close();
          }, self.timeout);
        }, self.timeout);
      },
      //链接成功时执行的方法
      websocketonopen() {
        //连接成功事件
        this.websocketsend("heartbeat");
        //提示成功
        console.log("连接成功", 3);
        //开启心跳
        this.start();
      },
      //连接失败事件
      websocketonerror(e) {
        //错误
        console.log("WebSocket连接发生错误");
        //重连
        this.reconnect();
      },
      //连接关闭事件
      websocketclose(e) {
        this.websock.close();
        //提示关闭
        console.log("连接已关闭");
        //重连
        this.reconnect();
      },
      //接收服务器推送的信息
      websocketonmessage(event) {
        //打印收到服务器的内容
        console.log("收到服务器信息", event.data);
        this.msg = event.data;
        //收到服务器信息,心跳重置
        this.reset();
      },
      websocketsend(msg) {
        //向服务器发送信息
        this.websock.send(msg);
      },
    },
  };
  </script>
  <style scoped>
  .layout {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .msgBody {
    width: 500px;
    height: 300px;
    border: 1px solid rgb(95, 79, 79);
  }
  </style>
  
  

参考文章:
websocket前后端交互

  • 24
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值