使用 WebSocket 实现在线聊天室（Spring Boot + Vue3）

随着互联网的迅速发展，在线聊天室成为了人们交流的重要方式。本文将详细介绍如何通过 Spring Boot 和 Vue3 构建一个简易的在线聊天室，并使用 WebSocket 实现实时消息传递。

一、项目结构

我们将创建一个包含前端和后端的项目结构：

online-chat
├── backend
│   ├── src
│   │   ├── main
│   │   │   ├── java
│   │   │   └── resources
│   │   └── test
│   └── pom.xml
└── frontend
    ├── src
    ├── public
    └── package.json

1. 后端（Spring Boot）

1.1 添加依赖

在 pom.xml 中添加 WebSocket 和其他相关依赖：

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

1.2 创建 WebSocket 配置

在 src/main/java/com/example/chat/config/WebSocketConfig.java 中添加 WebSocket 配置：

package com.example.chat.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/chat").setAllowedOrigins("*").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }
}

1.3 创建消息处理器

在 src/main/java/com/example/chat/controller/ChatController.java 中创建消息处理器：

package com.example.chat.controller;

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;

@Controller
public class ChatController {
    private final SimpMessagingTemplate messagingTemplate;

    public ChatController(SimpMessagingTemplate messagingTemplate) {
        this.messagingTemplate = messagingTemplate;
    }

    @MessageMapping("/send")
    public void sendMessage(String message) {
        messagingTemplate.convertAndSend("/topic/messages", message);
    }
}

2. 前端（Vue3）

2.1 创建 Vue3 项目

我们可以使用 Vue CLI 创建一个新的 Vue3 项目：

vue create frontend
cd frontend
npm install --save sockjs-client stompjs

2.2 创建 Chat 组件

在 src/components/Chat.vue 中创建一个简单的聊天室组件：

<template>
  <div>
    <div v-for="msg in messages" :key="msg">{{ msg }}</div>
    <input v-model="message" @keyup.enter="send" placeholder="Type a message..." />
  </div>
</template>

<script>
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';

export default {
  data() {
    return {
      messages: [],
      message: '',
      stompClient: null,
    };
  },
  mounted() {
    this.connect();
  },
  methods: {
    connect() {
      const socket = new SockJS('http://localhost:8080/chat');
      this.stompClient = Stomp.over(socket);
      this.stompClient.connect({}, (frame) => {
        console.log('Connected: ' + frame);
        this.stompClient.subscribe('/topic/messages', (msg) => {
          this.messages.push(JSON.parse(msg.body));
        });
      });
    },
    send() {
      this.stompClient.send("/app/send", {}, JSON.stringify(this.message));
      this.message = '';
    },
  },
};
</script>

<style scoped>
input {
  width: 100%;
}
</style>

2.3 修改主入口

在 src/App.vue 中使用聊天室组件：

<template>
  <div id="app">
    <h1>在线聊天室</h1>
    <Chat />
  </div>
</template>

<script>
import Chat from './components/Chat.vue';

export default {
  components: {
    Chat,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
}
</style>

三、运行项目

1. 启动后端服务：

cd backend
mvn spring-boot:run

1. 启动前端开发服务器：

cd frontend
npm run serve

1. 打开浏览器，访问 http://localhost:8080，即可看到在线聊天室的界面。

总结

通过使用 Spring Boot 和 Vue3，我们成功实现了一个简单的在线聊天室。通过 WebSocket，用户可以实时接收和发送消息。这个例子可以作为更复杂应用的基础，您可以在此基础上添加更多功能，如用户身份认证、聊天记录存储等。希望这篇文章能够帮助您更好地理解 WebSocket 的使用。