springboot+vue3+websocket 简单案例

以下是一个简单的Spring Boot + Vue3 + WebSocket的案例：

创建一个Spring Boot项目，添加以下依赖：

<dependencies>
    <!-- Spring WebSocket -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>
</dependencies>

创建一个WebSocket配置类，用于配置WebSocket相关的Bean：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

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

创建一个WebSocket处理器，处理WebSocket连接和消息的逻辑：

public class WebSocketHandler extends TextWebSocketHandler {

    private static final List<WebSocketSession> sessions = new CopyOnWriteArrayList<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        sessions.add(session);
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        for (WebSocketSession s : sessions) {
            s.sendMessage(message);
        }
    }
}

创建一个Vue3项目，使用Vue CLI创建，并安装vue-native-websocket库：

vue create vue3-websocket-demo
cd vue3-websocket-demo
npm install vue-native-websocket

在Vue3项目的main.js中添加WebSocket连接逻辑：

import { createApp } from 'vue'
import App from './App.vue'
import VueNativeSock from 'vue-native-websocket'

const app = createApp(App)

app.use(VueNativeSock, 'ws://localhost:8080/ws', {
  format: 'json',
  reconnection: true,
  reconnectionAttempts: 5,
  reconnectionDelay: 3000,
})

app.mount('#app')

创建一个Vue3组件，用于发送和接收WebSocket消息：

<template>
  <div>
    <input v-model="message" type="text" placeholder="Message">
    <button @click="send">Send</button>
    <ul>
      <li v-for="message in messages" :key="message">{{ message }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      messages: [],
    }
  },
  methods: {
    send() {
      this.$socket.send(this.message)
      this.message = ''
    },
  },
  mounted() {
    this.$options.sockets.message = (data) => {
      this.messages.push(data)
    }
  },
}
</script>

在Vue3项目的App.vue中使用WebSocket组件：

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

<script>
import WebSocketComponent from './components/WebSocketComponent.vue'

export default {
  components: {
    WebSocketComponent,
  },
}
</script>

运行Spring Boot项目和Vue3项目，打开浏览器访问Vue3项目即可使用WebSocket发送和接收消息。

这个案例实现了一个简单的WebSocket聊天室，可以在浏览器中发送消息并实时接收其他用户发送的消息