diff --git a/src/views/demo/websocket.vue b/src/views/demo/websocket.vue index 0d1ba270..62347062 100644 --- a/src/views/demo/websocket.vue +++ b/src/views/demo/websocket.vue @@ -8,41 +8,92 @@ import { useUserStoreHook } from "@/store/modules/user"; const userStore = useUserStoreHook(); -const inputVal = ref("初始内容"); +const isConnected = ref(false); +const socketEndpoint = ref("http://localhost:8989/ws"); -const topicMsgs = ref(["接收到一条主题消息"]); // 主题消息列表 -const p2pMsgs = ref(["接收到一条点对线消息"]); +const receiverUsername = ref("root"); -function handleSendToAll() { - stompClient.send("/app/sendToAll", {}, inputVal.value); +const topicMessages = ref([]); // 广播消息集合 +const queneMessages = ref([]); // 点对点消息集合 + +const topicMessage = ref( + "亲爱的大冤种们，由于一只史诗级的BUG，系统版本已经被迫回退到了0.0.1。" +); // 广播消息 +const queneMessage = computed(() => { + return ( + "hi , " + + receiverUsername.value + + " , 我是" + + userStore.user.username + + " , 想和你交个朋友 ! " + ); +}); + +function sendNotice() { + stompClient.send("/app/sendToAll", {}, topicMessage.value); } -function handleSendToUser() { - stompClient.send("/app/sendToUser/root", {}, inputVal.value); +function sendToUser() { + stompClient.send( + "/app/sendToUser/" + receiverUsername.value, + {}, + queneMessage.value + ); + topicMessages.value.push(queneMessage.value); } let stompClient: Stomp.Client; -function initWebSocket() { - let socket = new SockJS("http://localhost:8989/ws"); +function connectWebSocket() { + let socket = new SockJS(socketEndpoint.value); stompClient = Stomp.over(socket); - stompClient.connect({ Authorization: userStore.token }, () => { - console.log("连接就绪，订阅主题：", "/topic/all"); + stompClient.connect( + { Authorization: userStore.token }, + () => { + isConnected.value = true; + stompClient.subscribe("/topic/notice", (res) => { + console.log("广播消息接收", res); + }); - stompClient.subscribe("/topic/notice", (res) => { - console.log("广播消息接收", res); - }); - - stompClient.subscribe("/user/queue/greeting", (res) => { - console.log("点对点消息接收", res); - }); - }); + stompClient.subscribe("/user/queue/greeting", (res) => { + console.log("点对点消息接收", res); + }); + }, + (error) => { + // 连接断开时触发此回调函数 + console.error("WebSocket 连接断开", error); + // 在此可以执行一些处理断开连接的逻辑 + isConnected.value = false; // 更新连接状态 + } + ); } +function disconnectWebSocket() { + if (stompClient && stompClient.connected) { + stompClient.disconnect(() => { + // 在这里执行断开连接后的操作 + isConnected.value = false; // 更新连接状态 + }); + } +} + +const messages = ref([ + { id: 1, sender: "me", text: "你好，这是我发送的消息。" }, + { id: 2, sender: "Server", text: "嗨，我收到了你的消息。" }, + { id: 3, sender: "me", text: "很高兴和你聊天！" }, + { id: 4, sender: "Server", text: "我也很高兴和你聊天！" }, + { id: 5, sender: "me", text: "😅💤" }, + { + id: 6, + sender: "Server", + text: "亲爱的大冤种们，由于一只史诗级的BUG，系统版本已经被迫回退到了0.0.1。", + }, +]); + onMounted(() => { - initWebSocket(); + connectWebSocket(); }); @@ -56,35 +107,140 @@ onMounted(() => { >示例源码 请点击>>>> -
-
- - - 发送点对点消息 - 发送广播消息 - - -
+ + + + + + + 连接 + 断开 + - - - - -
- {{ msg }} + + 连接状态： + 已连接 + 已断开 + + + + + + + + + + + + 发送广播 + + + + + + + + + + + + + + 发送点对点消息 + + + + + + + +
+
dafsdfads
+ +
+
+
+ {{ message.sender }} +
+
{{ message.text }}
+
- - - - - -
- {{ msg }} -
- - - -
+
+ + +
+ +