• Spring Boot集成WebSocket以及基本使用

    Spring Boot集成WebSocket以及基本使用

    1.WebSocket概述

    WebSocket让客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

    浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

    本文使用WebSocket实现简单的客户端与服务端建立长连接并互相发送文本消息。

    2.引入依赖

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    3.服务端

    自定义WebSocketHandler

    TextWebSocketHandler: 文本内容

BinaryWebSocketHandler:二进制内容

    • 1
    • 2
    • 3

    创建CustomizeWebSocketHandler类继承TextWebSocketHandler, 重写了父类AbstractWebSocketHandler的四个方法

    @Component
public class CustomizeWebSocketHandler extends TextWebSocketHandler {

    private Logger log = LoggerFactory.getLogger(this.getClass());

    @Override
    public void afterConnectionEstablished(WebSocketSession session) {
        log.info("与客户端建立连接...");
    }

    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        session.close(CloseStatus.SERVER_ERROR);
        log.error("连接异常", exception);
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        super.afterConnectionClosed(session, status);
        log.info("与客户端断开连接...");
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // 获取客户端发送的消息
        String msg = message.getPayload();
        log.info("客户端发送消息:{}", msg);
        // 发送消息给客户端
        session.sendMessage(new TextMessage(msg));
        // 关闭连接
        // session.close(CloseStatus.NORMAL);
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    WebSocketSession: 代表每个客户端会话，提供了许多实用方法

    注册SocketHandler

    创建WebSocketServerConfigure配置类，将自定义的CustomizeWebSocketHandler 注册到Spring Boot容器并设置拦截路径/webSocket，凡是该路径请求的连接将自动连接到WebSocket服务端。

    @Configuration
@EnableWebSocket//开启WebSocket相关功能
public class WebSocketServerConfigure implements WebSocketConfigurer {

    @Autowired
    private CustomizeWebSocketHandler customizeWebSocketHandler;

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    	// 注册自定义customizeWebSocketHandler
        registry.addHandler(customizeWebSocketHandler, "/webSocket").withSockJS();
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    4.客户端

    SockJS介绍

    SockJS 是一个浏览器 JavaScript 库，它提供了一个类似 WebSocket 的对象

    SockJS 提供了一个连贯的、跨浏览器的 Javascript API，它在浏览器和 Web 服务器之间创建了一个低延迟、全双工、跨域的通信通道

    在底层，SockJS 尝试首先使用原生 WebSockets。如果失败，它可以使用各种特定于浏览器的传输协议，并通过类似 WebSocket 的抽象来呈现它们。

    SockJS: https://github.com/sockjs/sockjs-client

    SockJS对象包含几个常用的实用方法：

    onopen，和服务端讲了连接后的回调方法

onmessage，服务端返回消息时的回调方法

onclose，和服务端断开连接的回调方法

send，发送消息给服务端

close，断开和服务端的连接

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    创建client.html

    引入SockJS库。在connect()方法中，通过new SockJS(/connect)和服务端建立Socket通信

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket客户端</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>

</head>
<body>
<div style="width:50%;margin:auto;border-style:solid;border-color:aqua;border-width: 1px">
    <input type="text" placeholder="请输入发送的内容" id="text"/>
    <input type="button" value="连接" class="btn btn-info" onclick="connect()"/>
    <input type="button" value="发送" class="btn btn-success" onclick="sent()"/>
    <input type="button" value="断开" class="btn btn-danger" onclick="disconnect()"/>
    <div id="log">
        <p>聊天记录:</p>
    </div>
</div>
<script type="text/javascript">
    let text = document.querySelector('#text');
    let logDiv = document.querySelector("#log");

    let ws = null;

    function connect() {
        let url = "/webSocket";
        ws = new SockJS(url);

        ws.onopen = function () {
            log('与服务端连接成功！');
        };

        ws.onmessage = function (event) {
            log('服务端：' + event.data);
        };

        ws.onclose = function () {
            log('与服务端断开连接！')
        }

    }

    function sent() {
        if (ws != null) {
            ws.send(text.value);
            log('客户端：' + text.value);
        } else {
            log('请先建立连接！')
        }
    }

    function disconnect() {
        if (ws != null) {
            ws.close();
            ws = null;
        } else {
            log('连接已断开！')
        }
    }

    function log(value) {
        let content = document.createElement('p');
        content.innerHTML = value;
        logDiv.appendChild(content);
        text.value = '';
    }
</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69

    5.通信测试

    在这里插入图片描述

  • 相关阅读:
    挂载别的系统挂掉的磁盘解决步骤，mount: unknown filesystem type ‘LVM2_member‘ 报错
    第3章 内存管理
    【Python】简单的逻辑训练题目（计算机二级练习题）
    【Rust 日报】2022-09-01 在Rust中用AVX-2和AVX-512过滤矢量
    AI时代 编程高手的秘密武器：世界顶级大学推荐的计算机教材
    T1175计算两个日期之间的天数
    网站域名如何接入腾讯云CDN业务详细步骤！
    Mockito -- 如何Mock Util类中的static 方法？
    【Java-----IO流（一）之字节流详解】
    ⑩⑥ 【MySQL】详解 触发器TRIGGER，协助 确保数据的完整性，日志记录，数据校验等操作。
  • 原文地址：https://blog.csdn.net/qq_38628046/article/details/124813558