SpringBoot 结合 WebSocket 实现双向通信

最新推荐文章于 2025-10-27 11:54:04 发布

原创最新推荐文章于 2025-10-27 11:54:04 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#websocket #网络协议 #网络

Springboot学习专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用SpringBoot框架整合WebSocket技术，实现浏览器与服务器之间的实时双向通信。文章详细介绍了整合步骤，包括添加依赖、配置类、通信处理类以及前端页面的实现。

一、WebSocket简介

HTTP协议只能单方面从浏览器/客户端往服务器发送请求，服务器不能主动向浏览器/客户端推送消息，WebSocket使得浏览器/客户端具备了实时双向通信的能力。

二、SpringBoot整合WebSocket

作为后端开发主流框架SpringBoot，整合WebSocket相对简单很多。

1、pom引入WebSocket依赖

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

2、配置WebSocket

这一步主要是配置WebSocket，通过@Configuration注解将ServerEndpointExporter类交由Spring容器管理，这个Bean在初始化时会扫描项目中@ServerEndpoint注解的类，这个类就是WebSocket通信的主要类。所以必须配置WebSocket才能开启WebSocket功能。

// 开启Socket支持 扫描@ServerEndpoint
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter()
    {
        return new ServerEndpointExporter();
    }
}

3、WebSocket通信处理类

/*
 * @ ServerEndpoint
 * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
 */

@Slf4j
@Service
@ServerEndpoint("/api/webSocket/{sid}")
public class WebSocketServer {
    //静态变量，用来记录当前在线连接数。
    private static int onlineCount = 0;
    //concurrent包的线程安全Set，用来存放每个客户端对应的WebSocket对象
    private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet();
    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;
    //接收sid
    private String sid = "";

    @OnOpen
    public void onOpen(Session session, @PathParam("sid") String sid){
        this.session = session;
        webSocketSet.add(this);
        this.sid = sid;
        addOnlineCount();
        try {
            sendMessage("conn_success");
            log.info("有新窗口开始监听:" + sid + ",当前在线人数为:" + getOnlineCount());
        } catch (IOException e) {
            log.error("websocket IO Exception");
        }
    }

    @OnClose
    public void onClose(){
        webSocketSet.remove(this);
        log.debug("remove this: {}", this);
        subOnlineCount();
        //断开连接，更新占用情况
        log.info("释放的sid为："+sid);
        log.info("有一连接关闭！当前在线人数为" + getOnlineCount());
    }

    /**
     * 收到客户端消息后调用的方法
     * @ Param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session){
        log.info("收到来自窗口" + sid + "的信息:" + message);
        //群发消息
        for (WebSocketServer item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    @OnError
    public void onError(Session session, Throwable error){
        log.error("{}发生错误",session);
        error.printStackTrace();
    }

    /**
     * 实现服务器主动推送
     */
    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }
    // 没啥用，重复的
    public static void sendInfo(String message, @PathParam("sid") String sid){
        log.info("推送消息到窗口" + sid + "，推送内容:" + message);
        for(WebSocketServer item : webSocketSet){
            try{
                if(message.isEmpty()){
                    item.sendMessage(message);
                } else if (item.sid.equals(sid)) {
                    item.sendMessage(message);
                }
            } catch (IOException e) {
                e.printStackTrace();
                continue;
            }
        }
    }

    public static synchronized int getOnlineCount() {
        return onlineCount;
    }

    public static synchronized void addOnlineCount() {
        WebSocketServer.onlineCount++;
    }

    public static synchronized void subOnlineCount() {
        WebSocketServer.onlineCount--;
    }

    public static CopyOnWriteArraySet getWebSocketSet() {
        return webSocketSet;
    }
}

对应的注解及方法顾名思义可以知道对应的方法的作用。

4. 前段index.html

这个可以整合进SpringBoot里测试，也可以通过Ningx反向代理，不过需要配置反向代理及Socket配置。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>websocket通讯</title>
</head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
 let socket;
 function openSocket() {

  const socketUrl = "ws://自己的ip地址及端口/api/webSocket/" + $("#userId").val();
  console.log(socketUrl);
  if(socket!=null){
   socket.close();
   socket=null;
  }
  socket = new WebSocket(socketUrl);
  //打开事件
  socket.onopen = function() {
   console.log("websocket已打开");
  };
  //获得消息事件
  socket.onmessage = function(msg) {
   console.log(msg.data);
   //发现消息进入,开始处理前端触发逻辑
  };
  //关闭事件
  socket.onclose = function() {
   console.log("websocket已关闭");
  };
  //发生了错误事件
  socket.onerror = function() {
   console.log("websocket发生了错误");
  }
 }

 //将消息显示在网页上
 function setMessageInnerHTML(innerHTML) {
  document.getElementById('message').innerHTML += innerHTML + '<br/>';
 }
 //关闭WebSocket连接
 function closeWebSocket() {
  socket.close();
 }

 //发送消息
 function send() {
  var message = document.getElementById('text').value;
  socket.send('{"msg":"' + message + '"}');
  setMessageInnerHTML(message + "&#13;");
 }
</script>
<body>
<p>【socket开启者的ID信息】：<div><input id="userId" name="userId" type="text" value="10"></div>

Welcome<br/><input id="text" type="text" />
<button onclick="send()">发送消息</button>
<hr/>
<button onclick="openSocket()">打开socket</button>
<button onclick="closeWebSocket()">关闭WebSocket连接</button>
<hr/>
<div id="message"></div>
</body>

</html>