springboot+ vue私信功能

### 使用 Spring Boot 和 Vue 实现私信消息功能

#### 1. 添加 WebSocket 依赖
为了实现实时通信，需要在 `pom.xml` 文件中引入 WebSocket 的 Maven 依赖：

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

这一步骤确保了项目能够支持 WebSocket 协议[^1]。

#### 2. 配置 WebSocket 支持
创建一个新的配置类来启用并自定义 WebSocket 功能。通过继承 `WebSocketConfigurer` 接口可以注册端点以及设置传输方式为 SockJS 或原生 WebSocket 连接。

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketConfigurer {

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

}

此代码片段展示了如何配置 WebSocket 处理器并将它映射到特定 URL 路径上。

#### 3. 构建后端控制器
编写用于处理来自前端的消息请求的服务层逻辑。这里假设有一个简单的 RESTful API 来发送和接收私信数据结构体（DTO），并通过 WebSocket 将这些信息推送给目标用户。

@Controller
public class MessageController {

    private final SimpMessagingTemplate messagingTemplate;

    @Autowired
    public MessageController(SimpMessagingTemplate messagingTemplate){
        this.messagingTemplate = messagingTemplate;
    }
    
    @PostMapping("/sendPrivateMsg")
    public ResponseEntity<String> sendPrivateMessage(@RequestBody PrivateMessageDto message){
        String targetUserDestination = "/topic/private/" + message.getRecipient();
        messagingTemplate.convertAndSend(targetUserDestination, "New private message from "+message.getSender());
        
        return new ResponseEntity<>("Message sent successfully", HttpStatus.OK);
    }   
}

上述例子说明了一个 POST 请求处理器方法，该方法接受 JSON 格式的私信对象作为输入参数，并将其转发给指定的目标用户订阅的主题路径下。

#### 4. 前端集成与交互设计
利用 Vue.js 开发聊天界面组件，监听连接状态变化事件、捕获服务器推送过来的新消息通知等操作。下面是一个简化版的 Vue 组件模板示意：

<div id="app">
  <!-- Chat UI elements -->
  
  <script type="text/javascript">
      const socket = new SockJS('/ws');
      stompClient = Stomp.over(socket);

      function connect() {
          stompClient.connect({}, frame => {
              console.log('Connected: ' + frame);
              
              // Subscribe to personal channel after successful connection.
              stompClient.subscribe(`/topic/private/${userId}`, response => {
                  alert(`Received a new private message! ${response.body}`);
              });
          });
      }
      
      // Call the connect method when initializing or reloading page...
      window.onload = () => {connect()};
  </script>
</div>

这段脚本实现了客户端与服务端建立 Web Socket 连接的过程，并订阅个人专属频道以便及时获取新到来的信息提示。