Spring Boot整合WebSocket

WebSocket协议

基于TCP的一种新的网络协议，它实现了浏览器与服务器全双工通信——允许服务器主动向客户端推送消息。

目前很多浏览器已经实现了WebSocket协议，但是依旧存在着很多浏览器没有实现该协议，为了兼容那些没有实现该协议的浏览器，往往还需要通过STOMP协议来完成这些兼容。

开发使用

浏览器支持WebSocket协议

1、引入依赖

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

2、通过Java配置文件进行相关配置

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter createEndPoint() {
        return new ServerEndpointExporter();
    }
}

3、定义服务端点

/**
 * 让Spring创建WebSocket的服务端点，请求地址为"/ws"
 */
@Service
@ServerEndpoint("/ws")
@Slf4j
public class WebSocketService {
    private Session session;

    /**
     * 客户端打开WebSocket服务端点调用方法
     */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        log.info("连接建立成功方法调用");
    }

    /**
     * 客户端关闭WebSocket服务端点调用方法
     */
    @OnClose
    public void onClose() {
        log.info("连接关闭方法调用");
    }

    /**
     * 客户端发送消息，WebSocket服务端点调用方法
     *
     * @param msg 来自客户端的信息
     */
    @OnMessage
    public void onMessage(String msg) throws IOException {
        this.session.getBasicRemote().sendText("服务器端发来的消息啦：你好啊");
        log.info("客户端消息:{}", msg);
    }

    /**
     * 客户端请求WebSocket服务端点异常方法
     */
    public void onError() {
        log.info("错误发生时调用");
    }
}

4、客户端：创建index.html

<html>
<title>WebSocket测试页面</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<body>
	<input id="message" type="text"/>
	<button onclick="sendMessage()">发送消息</button>
	<button onclick="closeWebSocket()">关闭WebSocket连接</button>
	<div id="context"></div>
</body>
<script>
    let websocket = new WebSocket("ws://localhost:8082/ws");
    websocket.onerror = () => {
        appendMessage("连接错误")
    };

    websocket.onopen = () => {
        appendMessage("连接成功")
    };

    //接收消息方法回调
    websocket.onmessage = (event) => {
        appendMessage(event.data)
    };

    websocket.onclose = () => {
        appendMessage("关闭连接")
    };

    function appendMessage(message) {
        let context = $("#context").html() + "</br>" + message;
        $("#context").html(context);
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function sendMessage() {
        let message = $("#message").val();
        websocket.send(message);
    }

</script>
</html>

最终效果图：

客户端
服务器端：