打造多人实时聊天室：Vue3前端 + Spring框架后端

实时聊天室：利用 Vue3 和 Spring 框架打造多人沟通

构建多人实时聊天室

在当今瞬息万变的数字世界中，实时沟通已成为日常生活和工作中的必备工具。多人聊天室作为即时通讯的有效载体，在商务办公、休闲娱乐等场景中发挥着举足轻重的作用。本博客将深入探讨如何利用 Vue3 和 Spring 框架携手打造一个功能完善的多人实时聊天室。

前端：Vue3 登场

搭建 Vue3 项目

首先，创建一个 Vue3 项目，作为聊天室的前端基础。借助 Vue CLI，你可以通过简单的命令行操作快速搭建：

vue create chat-room

安装 WebSocket 库

为了实现实时通讯，我们需要引入 WebSocket 库。使用以下命令即可：

npm install --save websocket

创建 WebSocket 服务

Vue3 项目需要一个 WebSocket 服务，与后端进行通信。具体实现代码如下：

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

export default class WebSocketService {
  constructor() {
    this.sock = new SockJS('/websocket')
    this.stompClient = Stomp.over(this.sock)
  }

  connect() {
    this.stompClient.connect({}, () => {
      console.log('Connected to WebSocket server')
    })
  }

  disconnect() {
    this.stompClient.disconnect()
  }

  subscribe(destination, callback) {
    this.stompClient.subscribe(destination, callback)
  }

  send(destination, message) {
    this.stompClient.send(destination, {}, JSON.stringify(message))
  }
}

后端：Spring 框架登场

搭建 Spring Boot 项目

现在，转向后端，使用 Spring Initializr 工具快速搭建一个 Spring Boot 项目。

配置 WebSocket

在 Spring Boot 项目中，需要配置 WebSocket，具体实现代码如下：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

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

创建 WebSocket 处理器

后端需要一个 WebSocket 处理器，用于处理来自前端的消息：

@Component
public class ChatWebSocketHandler extends TextWebSocketHandler {

    private List<WebSocketSession> sessions = new ArrayList<>();

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

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        String msg = message.getPayload();
        for (WebSocketSession s : sessions) {
            s.sendMessage(new TextMessage(msg));
        }
    }

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

整合前端和后端

现在，是时候将前端和后端整合在一起，让实时通讯成为现实。

前端：连接后端

在前端项目中，导入 WebSocket 服务：

import WebSocketService from './websocket.service'

连接到后端：

const websocketService = new WebSocketService()
websocketService.connect()

前端：消息监听和发送

监听后端消息：

websocketService.subscribe('/chat', (message) => {
  console.log('Received message from server: ', message)
})

发送消息到后端：

websocketService.send('/chat', 'Hello from Vue3!')

运行项目

准备好一切后，你可以运行项目了：

前端：

npm run serve

后端：

mvn spring-boot:run

结论

恭喜！你已经成功打造了一个多人实时聊天室，可以享受即时通讯的便利。你可以根据自己的需求进一步定制和扩展聊天室，打造更符合你特定场景的沟通平台。

常见问题解答

问：如何在聊天室中添加新用户？

答：前端连接后端时，需要向后端发送一条消息，告知其已连接。后端收到消息后，将该用户添加到会话列表中。

问：如何处理用户离开聊天室的情况？

答：当用户关闭浏览器窗口或断开网络连接时，后端会收到一条消息，表明该用户已断开连接。此时，后端将该用户从会话列表中移除。

问：如何实现聊天室的广播功能？

答：当用户发送消息时，后端会将消息广播到所有连接的客户端。客户端收到消息后，会将其显示在聊天窗口中。

问：如何防止聊天室中出现垃圾信息？

答：可以通过在后端实现消息过滤功能，对发送的消息进行内容审查，过滤掉垃圾信息。

问：如何扩展聊天室，支持其他功能？

答：你可以扩展聊天室，添加更多功能，如文件共享、表情包支持、用户管理等。