如何使用WebSocket+SpringBoot+Vue搭建简易网页聊天室

在现代Web应用中，实时通信变得越来越重要。WebSocket作为一种全双工通信协议，能够实现客户端与服务器之间的实时数据传输。本文将介绍如何使用WebSocket、Spring Boot和Vue.js搭建一个简易的网页聊天室。

1. 项目结构

首先，我们需要创建一个Spring Boot项目作为后端服务，并使用Vue.js作为前端框架。项目的基本结构如下：

chat-room/
├── backend/          # Spring Boot 后端项目
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/
│   │   │   │   └── com/
│   │   │   │       └── example/
│   │   │   │           └── chatroom/
│   │   │   │               ├── config/
│   │   │   │               ├── controller/
│   │   │   │               ├── model/
│   │   │   │               └── ChatRoomApplication.java
│   │   │   └── resources/
│   │   │       └── application.properties
│   │   └── test/
│   └── pom.xml
└── frontend/         # Vue.js 前端项目
    ├── public/
    ├── src/
    │   ├── assets/
    │   ├── components/
    │   ├── views/
    │   ├── App.vue
    │   └── main.js
    ├── package.json
    └── vue.config.js

2. 后端实现

2.1 添加依赖

在pom.xml中添加WebSocket和Spring Boot的依赖：

<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>
</dependencies>

2.2 配置WebSocket

在com.example.chatroom.config包下创建WebSocketConfig类，配置WebSocket：

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
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 configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/chat").withSockJS();
    }
}

2.3 创建消息模型

在com.example.chatroom.model包下创建ChatMessage类，用于表示聊天消息：

public class ChatMessage {
    private String content;
    private String sender;

    // Getters and Setters
}

2.4 创建控制器

在com.example.chatroom.controller包下创建ChatController类，处理WebSocket消息：

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class ChatController {

    @MessageMapping("/chat.sendMessage")
    @SendTo("/topic/public")
    public ChatMessage sendMessage(ChatMessage chatMessage) {
        return chatMessage;
    }
}

3. 前端实现

3.1 创建Vue项目

使用Vue CLI创建一个新的Vue项目：

vue create frontend

3.2 安装依赖

在frontend目录下安装sockjs-client和stompjs：

npm install sockjs-client stompjs

3.3 创建聊天室组件

在src/components目录下创建ChatRoom.vue组件：

<template>
  <div class="chat-room">
    <div class="messages">
      <div v-for="(message, index) in messages" :key="index" class="message">
        <strong>{{ message.sender }}:</strong> {{ message.content }}
      </div>
    </div>
    <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="Type a message..." />
  </div>
</template>

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

export default {
  data() {
    return {
      stompClient: null,
      messages: [],
      newMessage: ''
    };
  },
  mounted() {
    this.connect();
  },
  methods: {
    connect() {
      const socket = new SockJS('http://localhost:8080/chat');
      this.stompClient = Stomp.over(socket);
      this.stompClient.connect({}, frame => {
        this.stompClient.subscribe('/topic/public', message => {
          this.messages.push(JSON.parse(message.body));
        });
      });
    },
    sendMessage() {
      if (this.newMessage.trim()) {
        const chatMessage = {
          sender: 'User',
          content: this.newMessage
        };
        this.stompClient.send("/app/chat.sendMessage", {}, JSON.stringify(chatMessage));
        this.newMessage = '';
      }
    }
  }
};
</script>

<style>
.chat-room {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.messages {
  height: 300px;
  overflow-y: auto;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}
.message {
  margin-bottom: 10px;
}
input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
</style>

3.4 在主应用中使用聊天室组件

在src/App.vue中使用ChatRoom组件：

<template>
  <div id="app">
    <ChatRoom />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    ChatRoom
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4. 运行项目

4.1 启动后端服务

在backend目录下运行Spring Boot应用：

mvn spring-boot:run

4.2 启动前端服务

在frontend目录下运行Vue应用：

npm run serve

5. 测试聊天室

打开浏览器，访问http://localhost:8081，你将看到一个简易的聊天室界面。输入消息并按下回车键，消息将实时显示在聊天窗口中。

6. 总结

通过本文的介绍，我们使用WebSocket、Spring Boot和Vue.js搭建了一个简易的网页聊天室。这个项目展示了如何实现客户端与服务器之间的实时通信，为更复杂的实时应用奠定了基础。你可以在此基础上进一步扩展功能，例如添加用户认证、消息存储等。

希望本文对你有所帮助，祝你编程愉快！