SpringBoot整合WebSocket

最新推荐文章于 2025-09-05 15:15:28 发布

原创最新推荐文章于 2025-09-05 15:15:28 发布 · 5.4k 阅读

72 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #前端 #java

SpringBoot 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了WebSocket与HTTP的区别，重点讲解了如何在Spring Boot中搭建WebSocket服务端，包括配置、事件处理及客户端实现，以及简单的测试过程。

在这里插入图片描述

一、WebSocket与Http的区别

HTTP是应用层上的一个单向的、无状态的、基于请求与响应的协议。http协议本身是没有持久通信能力的，当客户端向服务器发送HTTP请求时，接收到请求后，服务器会将响应发送给客户端。每个请求都与一个对应的响应相关联，在发送响应后客户端与服务器的连接会被关闭。这种的基于请求响应的通讯方式有一点不足，服务器端无法主动向客户端推送数据。
在这里插入图片描述
Websocket是应用层上的一个全双工的有状态协议。websocket以ws://或wss://开头，它必须依赖 HTTP 协议进行一次握手，握手成功后，数据就直接从 TCP 通道传输，与 HTTP 无关了。

与HTTP协议不同，websocket是长连接模式，连接后客户端和服务器之间的连接将保持活动状态，直到被任何一方终止。在通过客户端和服务器中的任何一方关闭连接之后，连接将从两端终止。这种模式的缺点是连接会持续占用服务器资源，可以采用心跳机制检测当前连接是否存在数据传输，如果没有数据传输，先关闭连接以节约服务器资源。
在这里插入图片描述

二、搭建Websocket服务端

1.导入websocket依赖。

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

2.编写websocket配置类。

package com.it.config;

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

@Configuration
@EnableWebSocket // 启用websocket
public class WebSocketConfig {

	@Bean
    public ServerEndpointExporter getServerEndpointExporter() { //服务终端
        return new ServerEndpointExporter();
    }
}

WebSocket是基于事件的方式实现的通讯操作，javax.websocket包下提供了许多事件注解。

No	注解	作用
1	@ServerEndpoint	声明一个WebSocket操作终端
1	@PathParam	接收客户端请求路径参数
1	@OnOpen	监听WebSocket连接打开事件
1	@OnClose	监听WebSocket连接关闭事件
1	@OnMessage	监听WebSocket接收到消息事件
1	@OnError	监听WebSocket方法出错事件

编写WebSocket处理类。

package com.it.handle;

import io.micrometer.core.instrument.util.StringUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Objects;

@Slf4j
@Component
@ServerEndpoint("/websocket/{token}") // 提供给客户端一个操作终端
public class WebSocketHandler {

    @OnOpen
    public void handleOpen(Session session, @PathParam("token") String token) {
        if (StringUtils.isEmpty(token)) {
            sendMessage(session, "[websocket ERROR] 客户端Token错误，连接失败");
        }
        log.info("[websocket]客户端创建连接，session ID = {} ", session.getId());
    }

    @OnClose
    public void handleClose(Session session) {
        log.info("[websocket]客户端断开websocket连接，session ID = {} ", session.getId());
    }

    @OnError
    public void handleError(Session session, Throwable throwable) {
        log.info("[websocket]出现错误，session ID = {} ", session.getId());
        log.info("[websocket]出现错误，throwable = {} ", throwable);
    }

    @OnMessage
    public void handleMessage(Session session, String message) {
        log.info("[websocket]用户发送请求，session ID = {}, message = {}", session.getId(), message);
        sendMessage(session, "[ECHO]" + message);
    }

    // 发送数据到客户端
    private void sendMessage(Session session, String message) {
        if (Objects.isNull(session)) {
            return;
        }
        synchronized (session) { // 同步发送
            try {
                session.getBasicRemote().sendText(message); // 发送数据
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

三、搭建Websocket客户端

WebSocket默认支持跨域访问，客户端可以搭建在其它项目中(button-classic.css)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket</title>
    <style type="text/css">
        input {
            outline-style: none ;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 13px 14px;
            width: 400px;
            font-size: 14px;
            font-weight: 700;
            font-family: "Microsoft soft";
        }
        #echo-div{
            width: 650px;
            height: 300px;
            padding: 20px;
            background-color: #eee;
            margin-top:10px;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="./css/button-classic.css" />
    <script type="text/javascript" >
        window.onload = function() {
            const url = 'ws://localhost:8080/websocket/test-token';
            let websocket = new WebSocket(url);
            websocket.onopen = function(event) {
                document.getElementById('echo-div').innerHTML += '<p>服务器连接成功</p>'
            }
            websocket.onclose = function(event) {
                document.getElementById('echo-div').innerHTML += '<p>服务器连接关闭...</p>'
            }
            websocket.onmessage = function(obj) {
                document.getElementById('echo-div').innerHTML += '<p>' + obj.data + '</p>'
                document.getElementById('message').value = '';
            }
            document.getElementById('send-btn').addEventListener('click', function(e) {
                let message = document.getElementById('message').value;
                websocket.send(message);
            })
            document.getElementById('close-btn').addEventListener('click', function(e) {
                websocket.close();
            })
        }
    </script>
</head>
<body>
<div>
    <span>信息：</span>
    <input id="message" type="text" />
    <button id="send-btn" class="button orange" >发送</button>
    <button id="close-btn" class="button black" >关闭</button>
</div>
<div id="echo-div"></div>
</body>
</html>