SpringBoot整合websocket实现即时通信聊天

下面是详细讲解SpringBoot整合websocket实现即时通信聊天的攻略。

1. 环境准备

首先，我们需要准备好以下环境：

JDK 1.8及以上版本
Maven
Spring Boot 2.0.3.RELEASE及以上版本

2. 添加依赖

在pom.xml文件中添加以下依赖：

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

3. 创建WebSocket配置类

首先，我们需要创建一个WebSocket配置类，用来配置WebSocket相关的一些信息，比如Endpoint等：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new WebSocketHandler(), "/chat").setAllowedOrigins("*");
    }
}

在上面的代码中，我们通过@EnableWebSocket注解开启WebSocket功能，并实现了WebSocketConfigurer接口来配置WebSocket，其中WebSocketHandler()是我们自己定义的WebSocket处理器，/chat则是WebSocket的Endpoint。

4. 创建WebSocket处理器

接下来，我们需要创建一个WebSocket处理器，用来处理WebSocket的连接、断开、消息收发等操作：

@Component
public class WebSocketHandler extends TextWebSocketHandler {
    private static final List<WebSocketSession> sessions = new CopyOnWriteArrayList<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) {
        sessions.add(session);
        System.out.println("新连接加入：" + session.getId() + "，当前在线人数：" + sessions.size());
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) {
        sessions.remove(session);
        System.out.println("连接关闭：" + session.getId() + "，当前在线人数：" + sessions.size());
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        System.out.println("收到消息：" + message.getPayload());
        for (WebSocketSession s : sessions) {
            if (s.isOpen()) {
                s.sendMessage(message);
            }
        }
    }
}

在上面的代码中，我们通过@Component注解将该类注册为Spring的Bean组件，并继承了TextWebSocketHandler类，实现了afterConnectionEstablished()、afterConnectionClosed()和handleTextMessage()方法，分别用来处理WebSocket的连接、断开和消息收发操作。

在handleTextMessage()方法中，我们将接收到的消息发送给所有连接的客户端。

5. 编写前端页面

最后，我们需要编写一个前端页面，用来测试WebSocket的连接和消息收发功能。

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket测试</title>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div>连接状态：<span id="status"></span></div>
    <hr>
    <div>消息列表：</div>
    <ul id="messageList"></ul>
    <hr>
    <div>
        发送消息：<input type="text" id="message"/> <input type="button" value="发送" onclick="sendMessage()"/>
    </div>
    <script>
        $(function () {
            // 创建WebSocket连接
            var socket = new WebSocket('ws://' + window.location.host + '/chat');
            // 连接打开事件
            socket.onopen = function (event) {
                $('#status').text('已连接');
            };
            // 接收消息事件
            socket.onmessage = function (event) {
                $('#messageList').append('<li>' + event.data + '</li>');
            };
            // 连接关闭事件，刷新页面
            socket.onclose = function (event) {
                location.reload();
            };
            // 发送消息
            window.sendMessage = function () {
                var message = $('#message').val();
                socket.send(message);
            }
        });
    </script>
</body>
</html>

在上面的代码中，我们使用了jQuery库来简化DOM操作，创建了一个WebSocket连接，并通过onopen、onmessage和onclose等事件来管理WebSocket的连接和消息收发。

示例1：简单的WebSocket连接测试

在浏览器中打开上面编写的前端页面，页面会显示出当前的连接状态。如果能够正常显示，说明WebSocket连接已经建立成功。

示例2：WebSocket消息收发测试

在浏览器控制台中输入以下代码：

var socket = new WebSocket('ws://' + window.location.host + '/chat');
socket.onopen = function (event) {
    socket.send('Hello World!');
};

然后在前端页面中输入任意消息，发送后就可以在控制台中收到来自服务端的回复消息了。这个时候，我们在控制台中执行以下代码可以关闭WebSocket连接：

socket.close();

至此，我们已经成功地完成了Spring Boot整合WebSocket实现即时通信聊天的攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：SpringBoot整合websocket实现即时通信聊天 - Python技术站