怎么使用WebSocket+SpringBoot+Vue搭建简易网页聊天室

前言： WebSocket是一种在单个TCP连接上进行全双工通信的协议，适用于实时通信场景，比如网页聊天室。Spring Boot是一个开源框架，用于构建独立的、基于Java的生产级应用程序。Vue是一种用于构建用户界面的渐进式框架，有助于构建动态单页面应用。本文将介绍如何使用WebSocket、Spring Boot和Vue来搭建一个简易网页聊天室。 第一段：搭建后端WebSocket服务 首先，在Spring Boot项目中添加WebSocket的依赖项。可以通过在`pom.xml`文件中添加以下依赖项来实现：

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

然后，在Spring Boot的主类上添加`@EnableWebSocket`注解，启用WebSocket功能。 接下来，创建一个WebSocket处理器类。该类需要继承`TextWebSocketHandler`，并重写`handleTextMessage`方法以处理接收到的消息：

import org.springframework.stereotype.Component;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

@Component
public class ChatWebSocketHandler extends TextWebSocketHandler {

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // 处理接收到的消息
        String payload = message.getPayload();
        // ...
    }
}

然后，需要配置一个WebSocket处理器映射器和一个WebSocket处理器适配器：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

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

在这里，我们将WebSocket处理器映射为`/chat`路径，并允许来自任何来源的连接。 第二段：创建Vue前端界面 首先，使用Vue CLI创建一个新的Vue项目。可以在命令行中运行以下命令： ``` vue create chatroom ``` 然后，进入生成的项目目录： ``` cd chatroom ``` 接下来，在`src`目录下创建一个名为`components`的文件夹，并在其中创建一个名为`ChatRoom.vue`的文件。 在`ChatRoom.vue`文件中，可以使用以下代码构建聊天室的界面：

<template>
  <div>
    <h4>Welcome to Chat Room!</h4>

    <div>
      <div v-for="message in messages" :key="message.id">
        {{ message.content }}
      </div>
    </div>

    <input v-model="inputMessage" @keyup.enter="sendMessage" placeholder="Type a message" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      inputMessage: "",
    };
  },
  methods: {
    sendMessage() {
      // 发送消息给后端
      // ...
      this.inputMessage = "";
    },
  },
};
</script>

<style scoped>
h4 {
  font-size: 20px;
}

input {
  width: 300px;
  padding: 5px;
  margin-top: 10px;
}
</style>

在这里，我们展示了聊天室的标题，消息列表以及输入框。同时定义了`messages`和`inputMessage`两个数据属性，以及一个`sendMessage`方法用于发送消息。 第三段：处理前后端交互 为了实现前后端的交互，我们需要为WebSocket连接和消息传递添加一些逻辑。 在`ChatRoom.vue`中，我们可以在`mounted`生命周期中建立WebSocket连接，并在接收到消息时更新消息列表：

mounted() {
  const socket = new WebSocket("ws://localhost:8080/chat");

  socket.onmessage = (event) => {
    const message = JSON.parse(event.data);
    this.messages.push(message);
  };

  // 处理连接关闭的逻辑
  socket.onclose = (event) => {
    // ...
  };

  // 处理发生错误的逻辑
  socket.onerror = (event) => {
    // ...
  };
},

并且，在`sendMessage`方法中，我们可以通过WebSocket发送消息给后端：

sendMessage() {
  const message = {
    content: this.inputMessage,
  };

  this.messages.push(message);

  const socket = new WebSocket("ws://localhost:8080/chat");
  socket.onopen = () => {
    socket.send(JSON.stringify(message));
  };

  this.inputMessage = "";
},

在后端的`ChatWebSocketHandler`类中，可以将接收到的消息广播给所有连接的客户端：

import org.springframework.stereotype.Component;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.util.ArrayList;
import java.util.List;

@Component
public class ChatWebSocketHandler extends TextWebSocketHandler {

    private List 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 payload = message.getPayload();

        // 广播消息给所有连接的客户端
        for (WebSocketSession s : sessions) {
            s.sendMessage(new TextMessage(payload));
        }
    }

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

第四段：总结 通过使用WebSocket、Spring Boot和Vue，我们可以轻松地搭建一个简易的网页聊天室。首先，在后端使用Spring Boot来处理WebSocket连接和消息传递。然后，在前端使用Vue来构建聊天室的界面，并通过WebSocket与后端进行交互。最后，通过处理后端的WebSocket处理器来处理接收到的消息并广播给所有连接的客户端。这样，我们即可实现一个简单的网页聊天室。