Springboot WebSocket + Vue.js 基础代码

Eddie_920

已于 2023-03-03 15:48:30 修改

阅读量126

点赞数

分类专栏：常用代码块文章标签： spring boot websocket vue.js Powered by 金山文档

于 2023-03-03 15:44:39 首次发布

本文链接：https://blog.csdn.net/Eddie_920/article/details/129321644

版权

常用代码块专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在Springboot中，我们需要使用Stomp协议来实现WebSocket连接。首先，需要添加以下依赖项：

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>webjars-locator-core</artifactId>
  <version>0.40</version>
</dependency>
<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>sockjs-client</artifactId>
  <version>1.0.2</version>
</dependency>
<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>stomp-websocket</artifactId>
  <version>2.3.3</version>
</dependency>

创建WebSocket的配置文件：

@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("/websocket").setAllowedOrigins("*").withSockJS();
    }

}

这里定义了WebSocket的消息代理和端点。

创建WebSocketController，处理WebSocket的请求：

@Controller
public class WebSocketController {

    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting greeting(HelloMessage message) {
        return new Greeting("Hello, " + message.getName() + "!");
    }

    @MessageMapping("/chat")
    @SendTo("/topic/messages")
    public ChatMessage chat(ChatMessage message) {
        return new ChatMessage(message.getContent(), message.getSender());
    }

}

这里定义了两个WebSocket请求（/hello和/chat），并将它们的响应发送到特定的主题（/topic/greetings和/topic/messages）。

在Vue.js中，我们需要使用SockJS和Stomp.js库来实现WebSocket连接。首先，需要添加以下依赖项：

<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.0/dist/sockjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/dist/stomp.min.js"></script>

创建Vue.js组件，处理WebSocket的连接和消息：

<template>
  <div>
    <label for="name">Name:</label>
    <input v-model="name" type="text" id="name">

    <button @click="connect">Connect</button>

    <div v-if="connected">
      <label for="message">Message:</label>
      <input v-model="message" type="text" id="message">
      <button @click="sendMessage">Send</button>

      <ul>
        <li v-for="greeting in greetings" :key="greeting.id">{{ greeting.content }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ws: null,
        connected: false,
        name: "",
        message: "",
        greetings: [],
      };
    },
    methods: {
      connect() {
        const socket = new SockJS("http://localhost:8080/websocket");
        this.ws = Stomp.over(socket);
        this.ws.connect({}, () => {
          this.connected = true;
          this.ws.subscribe("/topic/greetings", (greeting) => {
            this.greetings.push(JSON.parse(greeting.body));
          });
        });
      },
      sendMessage() {
        const message = { name: this.name };
        this.ws.send("/app/hello", {}, JSON.stringify(message));
        this.message = "";
      },
    },
  };
</script>

这里定义了一个Vue.js组件，用于建立WebSocket连接并发送和接收WebSocket消息。点击“Connect”按钮将建立WebSocket连接，然后可以发送消息并接收来自主题“/topic/greetings”的响应。

这只是一个基本的示例，您可以根据需要修改代码和逻辑。