SpringBoot + Vue 实现基于 WebSocket 的聊天室单聊和群聊

要实现基于 WebSocket 的聊天室单聊和群聊，可以分为以下几个步骤：

1. 创建 SpringBoot 项目：使用 SpringBoot 创建一个后端项目，添加 WebSocket 依赖。

2. 配置 WebSocket：在 SpringBoot 项目中添加配置类，开启 WebSocket 支持，并注册 WebSocket 处理器。

3. 创建前端项目：使用 Vue 创建一个前端项目，安装 WebSocket 库。

4. 实现单聊和群聊功能：前端和后端通过 WebSocket 进行通信，前端发送消息到后端，后端将收到的消息进行处理，然后再将消息发送给前端。

下面是一个简单的示例代码：

后端代码：

1. 添加 WebSocket 依赖

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

2. WebSocket 配置类

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new WebSocketHandler(), "/ws").setAllowedOrigins("*");
    }
}

3. WebSocket 处理器

@Component
public class WebSocketHandler extends TextWebSocketHandler {
    
    private static final Map<String, WebSocketSession> sessions = new ConcurrentHashMap<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        sessions.put(session.getId(), session);
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        sessions.remove(session.getId());
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // 处理收到的消息
        String payload = message.getPayload();
        JSONObject jsonObject = JSONObject.parseObject(payload);
        String type = jsonObject.getString("type");
        String content = jsonObject.getString("content");
        String from = jsonObject.getString("from");
        String to = jsonObject.getString("to");

        if("chat".equals(type)) {
            // 单聊
            WebSocketSession toSession = sessions.get(to);
            if(toSession != null && toSession.isOpen()) {
                TextMessage textMessage = new TextMessage(content);
                toSession.sendMessage(textMessage);
            }
        } else if("group".equals(type)) {
            // 群聊
            for(WebSocketSession session1 : sessions.values()) {
                if(session1.isOpen()) {
                    TextMessage textMessage = new TextMessage(content);
                    session1.sendMessage(textMessage);
                }
            }
        }
    }
}

前端代码：

1. 安装 WebSocket 库

npm install --save sockjs-client
npm install --save stompjs

2. 连接 WebSocket

import SockJS from 'sockjs-client'
import Stomp from 'stompjs'

let stompClient = null;

function connect() {
    const socket = new SockJS('/ws');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/chat', function (message) {
            // 接收到消息
            console.log(message);
        });
    });
}

connect();

3. 发送消息

function sendChatMessage() {
    const message = {
        type: 'chat',
        content: 'hello',
        from: 'user1',
        to: 'user2'
    };
    stompClient.send('/app/chat', {}, JSON.stringify(message));
}

以上代码仅为示例，具体实现还需要根据具体需求进行修改。