目录结构

alt

导入依赖

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.14</version>
        </dependency>

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

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
    <script>
        let webSocket;
        $(
            function () {
                webSocket = new WebSocket('ws://localhost:8080/myWebSocket');
                webSocket.onopen = function (event) {
                    console.log('webSocket已连接');
                }
                webSocket.onclose = function (event) {
                    console.log('webSocket已关闭连接');
                };
                webSocket.onmessage = function (event) {
                    console.log(event);
                    console.log('接收到消息：' + event.data);
                };

                let close = $("#close");
                let send = $("#send");

                close.click(function () {
                    webSocket.close();
                });
                send.click(function () {
                    webSocket.send('hello webSocket');
                    console.log('消息已发送');
                });
            }
        );
    </script>
</head>
<body>
<input id="close" type="button" value="关闭webSocket"> <br>
<input id="send" type="button" value="发送消息">
</body>
</html>

配置类

package com.hky.algorithm.config;

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

/**
 * webSocket配置类
 */
@Configuration
public class WebSocketConfig {
    /**
     * 用于检测有@ServerEndpoint注解的类
     * 配置websocket需要
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

监听函数类

package com.hky.algorithm.webSocket;

import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
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.concurrent.ConcurrentHashMap;

/**
 * webSocket服务类，每次客户端连接的时候都会创建一个新的类。
 * 注意：不是单例的
 */
@Component
@Slf4j
@ServerEndpoint("/myWebSocket") // 服务端点，地址是“/myWebSocket”
public class MyWebSocket {
    private Session session;


    /**
     * 注解 @OnOpen 表示方法是一个监听连接成功的回调方法
     *
     * @param session webSocket 的session
     * @param name    参数
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("name") String name) {
        this.session = session;
        log.info("webSocket已连接，连接客户端为 ");
        log.info("sessionID = " + session.getId());
        log.info("name = " + name);
    }

    /**
     * 注解 @OnClose 表示方法是一个监听连接关闭的回调方法
     */
    @OnClose
    public void onClose() {
        log.info("连接关闭");
    }

    /**
     * 注解 @OnMessage 表示方法是一个监听接收到消息的回调方法
     */
    @OnMessage
    public void onMessage(String msg) {
        log.info("接收消息 = " + msg + "，sessionId = " + session.getId() + ", this = " + this);
        if ("hello webSocket".equals(msg)) {
            sendMsg();
        }
    }

    /**
     * 注解 @OnError 表示方法是出现错误时的回调方法
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.info("发生错误！sessionID = " + session.getId());
        error.printStackTrace();
    }

    /**
     * 发送消息
     */
    public void sendMsg() {
        try {
            log.info("发送消息" + "，sessionId = " + session.getId());
            session.getBasicRemote().sendText("hello browser");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

测试

alt

alt