-
-
-
-
-
- 欢迎使用 Vue 3 + ElementPlus
-
-
-
-
-
-
-
-
-
-
- 了解更多
-
-
-
-
-
-
- 查看设计
-
-
-
-
-
-
- 性能测试
-
-
-
-
-
-
-
-
- ElementPlus 提供了丰富的组件库，满足各种业务需求
-
-
-
- 基于现代设计理念，提供美观的用户界面
-
-
-
- 基于Vue 3构建，享受最新的响应式系统带来的性能提升
-
-
- 组件演示
-
-
- 默认按钮
- 主要按钮
- 成功按钮
- 信息按钮
- 警告按钮
- 危险按钮
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/WebSocketDemo.vue b/src/components/WebSocketDemo.vue
new file mode 100644
index 0000000..31d7327
--- /dev/null
+++ b/src/components/WebSocketDemo.vue
@@ -0,0 +1,426 @@
+
+
+
+
+
+
+
+
+
+
+ WebSocket 实时聊天
+基于STOMP协议的实时通讯演示
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 连接
+
+
+ 断开连接
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/WebSocketUsage.vue b/src/components/WebSocketUsage.vue
new file mode 100644
index 0000000..2c4ebf8
--- /dev/null
+++ b/src/components/WebSocketUsage.vue
@@ -0,0 +1,223 @@
+
+
+ WebSocket 演示
+ {{ connectionStatus.text }}
+
+
+
+
+
+
+
+
+
+
+ 订阅
+
+
+
+
+
+
+ 订阅管理
+
+
+ {{ path }}
+
+
+
+
+
+
+
+
+
+
+ 发送
+
+
+
+
+
+ 发送消息
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 3e49915..0bd70e0 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -17,6 +17,16 @@ const router = createRouter({
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue'),
},
+ {
+ path: '/websocket',
+ name: 'websocket',
+ component: () => import('../views/WebSocketDemoView.vue'),
+ },
+ {
+ path: '/test',
+ name: 'test',
+ component: () => import('../views/TestView.vue'),
+ },
],
})
diff --git a/src/util/websocket.ts b/src/util/websocket.ts
new file mode 100644
index 0000000..d8be2f0
--- /dev/null
+++ b/src/util/websocket.ts
@@ -0,0 +1,109 @@
+import { Client } from '@stomp/stompjs';
+import type { IMessage, StompSubscription } from '@stomp/stompjs';
+import SockJS from 'sockjs-client';
+
+interface StompClientOptions {
+ endpoint: string; // WebSocket endpoint，例如：/ws
+ sendPath?: string; // 默认发送路径（可选）
+ host: string; // 服务器地址，例如：http://localhost:8080
+ useSockJS?: boolean; // 是否使用 SockJS（默认 false）
+
+ onConnect?: () => void; // 连接成功回调
+ onError?: (err: any) => void; // 错误回调
+ onMessage?: (msg: any, path: string) => void; // 全局消息处理回调（含路径）
+}
+
+export default class StompClient {
+ private options: StompClientOptions;
+ private stompClient: Client;
+ private subscriptions: MapWebSocket 使用说明
+ + +
+
+ 引入和创建实例：
+import StompClient from '@/util/websocket'
+
+// 创建 WebSocket 客户端实例
+const stompClient = new StompClient({
+ host: 'http://localhost:8080', // 服务器地址
+ endpoint: '/ws', // WebSocket 端点
+ useSockJS: true, // 是否使用 SockJS（默认 false）
+ onConnect: () => { // 连接成功回调
+ console.log('WebSocket 连接成功')
+ },
+ onError: (error) => { // 错误回调
+ console.error('WebSocket 错误:', error)
+ },
+ onMessage: (msg, path) => { // 全局消息处理
+ console.log('收到消息:', msg, '来自:', path)
+ }
+})
+
+ 建立连接：
+// 连接到 WebSocket 服务器
+stompClient.connect()断开连接：
+// 断开连接并清理所有订阅
+stompClient.disconnect()
+
+ 订阅特定路径的消息：
+// 订阅消息
+stompClient.subscribe('/topic/messages', (message) => {
+ console.log('收到消息:', message)
+ // 处理接收到的消息
+})取消订阅：
+// 取消订阅指定路径
+stompClient.unsubscribe('/topic/messages')
+
+ 发送消息到指定路径：
+// 发送消息
+const messageData = {
+ content: 'Hello WebSocket!',
+ timestamp: new Date().toISOString(),
+ sender: 'user123'
+}
+
+stompClient.send(messageData, '/app/send')使用默认发送路径：
+// 创建客户端时设置默认发送路径
+const stompClient = new StompClient({
+ host: 'http://localhost:8080',
+ endpoint: '/ws',
+ sendPath: '/app/send', // 默认发送路径
+ // ... 其他配置
+})
+
+// 发送消息（使用默认路径）
+stompClient.send(messageData)
+
+ 在 Vue 组件中使用：
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import StompClient from '@/util/websocket'
+
+const messages = ref<any[]>([])
+const isConnected = ref(false)
+let stompClient: StompClient | null = null
+
+onMounted(() => {
+ // 创建 WebSocket 连接
+ stompClient = new StompClient({
+ host: 'http://localhost:8080',
+ endpoint: '/ws',
+ useSockJS: true,
+ onConnect: () => {
+ isConnected.value = true
+ console.log('连接成功')
+
+ // 连接成功后订阅消息
+ stompClient?.subscribe('/topic/messages', (message) => {
+ messages.value.push(message)
+ })
+ },
+ onError: (error) => {
+ isConnected.value = false
+ console.error('连接错误:', error)
+ }
+ })
+
+ stompClient.connect()
+})
+
+onUnmounted(() => {
+ // 组件卸载时断开连接
+ stompClient?.disconnect()
+})
+
+// 发送消息
+const sendMessage = (content: string) => {
+ if (stompClient && isConnected.value) {
+ stompClient.send({
+ content,
+ timestamp: new Date().toISOString()
+ }, '/app/send')
+ }
+}
+</script>
+
+ Spring Boot WebSocket 配置：
+@Configuration
+@EnableWebSocketMessageBroker
+public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
+
+ @Override
+ public void configureMessageBroker(MessageBrokerRegistry config) {
+ // 启用简单的消息代理，消息的目的地前缀为 /topic 和 /queue
+ config.enableSimpleBroker("/topic", "/queue");
+ // 客户端发送消息的目的地前缀为 /app
+ config.setApplicationDestinationPrefixes("/app");
+ }
+
+ @Override
+ public void registerStompEndpoints(StompEndpointRegistry registry) {
+ // 注册 STOMP 端点
+ registry.addEndpoint("/ws")
+ .setAllowedOriginPatterns("*")
+ .withSockJS(); // 启用 SockJS 支持
+ }
+}消息处理控制器：
+@Controller
+public class MessageController {
+
+ @MessageMapping("/send")
+ @SendTo("/topic/messages")
+ public Message sendMessage(Message message) {
+ // 处理接收到的消息
+ message.setTimestamp(new Date());
+ return message;
+ }
+}
+
+
+
+
\ No newline at end of file
diff --git a/src/views/WebSocketDemoView.vue b/src/views/WebSocketDemoView.vue
new file mode 100644
index 0000000..680fa3b
--- /dev/null
+++ b/src/views/WebSocketDemoView.vue
@@ -0,0 +1,46 @@
+
+ WebSocket 测试页面
+ + +
+
+ {{ isConnected ? '已连接' : '未连接' }}
+
+
+
+
+
+
+ 发送测试消息
+
+
+
+ 清空消息
+
+
+
+ 重新连接
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 913b8f2..a2a31be 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -4,6 +4,7 @@
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "verbatimModuleSyntax": false,
"paths": {
"@/*": ["./src/*"]
diff --git a/vite.config.ts b/vite.config.ts
index d49d708..32bc912 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -17,4 +17,7 @@ export default defineConfig({
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
+ define: {
+ global: 'globalThis',
+ },
})
diff --git a/ws-begin/.gitignore b/ws-begin/.gitignore
new file mode 100644
index 0000000..5ff6309
--- /dev/null
+++ b/ws-begin/.gitignore
@@ -0,0 +1,38 @@
+target/
+!.mvn/wrapper/maven-wrapper.jar
+!**/src/main/**/target/
+!**/src/test/**/target/
+
+### IntelliJ IDEA ###
+.idea/modules.xml
+.idea/jarRepositories.xml
+.idea/compiler.xml
+.idea/libraries/
+*.iws
+*.iml
+*.ipr
+
+### Eclipse ###
+.apt_generated
+.classpath
+.factorypath
+.project
+.settings
+.springBeans
+.sts4-cache
+
+### NetBeans ###
+/nbproject/private/
+/nbbuild/
+/dist/
+/nbdist/
+/.nb-gradle/
+build/
+!**/src/main/**/build/
+!**/src/test/**/build/
+
+### VS Code ###
+.vscode/
+
+### Mac OS ###
+.DS_Store
\ No newline at end of file
diff --git a/ws-begin/pom.xml b/ws-begin/pom.xml
new file mode 100644
index 0000000..3095344
--- /dev/null
+++ b/ws-begin/pom.xml
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
WebSocket STOMP 消息应用
+ +
+
+
+
+
+
+
+
+
+
+
+
+