详解@Stomp/Stompjs在Vue3中的应用与实践(Vue3中@Stomp/Stompjs的应用详解与实践指南)

原创

ithorizon 6个月前 (10-19) 阅读数 28 #后端开发

一、引言

在现代的前后端分离架构中，实时通信变得越来越重要。WebSocket 协议为浏览器提供了实时通信的能力，让前端可以与后端进行双向通信。在 Vue3 中，@Stomp/Stompjs 是一个流行的库，它为 STOMP（Simple Text Oriented Messaging Protocol）协议的实现提供了拥护，让 Vue 应用程序可以轻松地与后端进行实时通信。本文将详细介绍 @Stomp/Stompjs 在 Vue3 中的应用与实践。

二、@Stomp/Stompjs 简介

@Stomp/Stompjs 是一个基于 SockJS 的 STOMP 客户端实现。STOMP 是一种简洁的文本导向的消息协议，用于在客户端和服务器之间进行异步消息传递。它定义了一组简洁的帧格式，用于发送和接收消息。@Stomp/Stompjs 提供了与 STOMP 服务器进行通信的接口，让前端开发者可以轻松地实现实时通信功能。

三、环境搭建

在 Vue3 项目中集成 @Stomp/Stompjs 需要进行以下步骤：

1. 安装依存

npm install @stomp/stompjs sockjs-client

2. 创建 Vue3 项目

vue create my-vue3-stomp

四、@Stomp/Stompjs 在 Vue3 中的使用

下面我们将详细介绍怎样在 Vue3 项目中集成和使用 @Stomp/Stompjs。

1. 创建 STOMP 客户端实例

首先，我们需要在 Vue 组件中创建一个 STOMP 客户端实例。这里我们创建一个名为 `StompClient` 的 Vue 组件。

2. 发送消息

在组件中，我们可以添加一个方法来发送消息到服务器。


const sendMessage = (message) => {
  if (client.value) {
    client.value.send('/app/send-message', {}, JSON.stringify({ message }));
  }
};

3. 接收消息

在组件的 `connect` 方法中，我们已经订阅了一个主题，当服务器发送消息到该主题时，客户端会自动接收并打印出来。


client.value.subscribe('/topic/messages', (message) => {
  console.log('Received: ' + message.body);
});

五、@Stomp/Stompjs 实践案例

下面我们通过一个简洁的聊天应用案例，来演示 @Stomp/Stompjs 在 Vue3 中的实际应用。

1. 前端界面

创建一个简洁的聊天界面，包含输入框、发送按钮和消息展示区域。

2. 后端处理

在 Spring Boot 应用程序中，我们需要配置 STOMP 服务器，并创建一个简洁的消息处理器。


@Configuration
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/socket").withSockJS();
    }
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app");
    }
}
@Controller
public class ChatController {
    @MessageMapping("/chat")
    @SendTo("/topic/chat")
    public String processMessageFromClient(String message) {
        return message;
    }
}