feat: ✨ websocket 测试用例临时提交
Former-commit-id: 044069225c3888a7ac93f5d6f10ed832fbf25b4f
This commit is contained in:
郝先瑞
@@ -8,41 +8,92 @@ import { useUserStoreHook } from "@/store/modules/user";
|
|||||||
|
|
||||||
const userStore = useUserStoreHook();
|
const userStore = useUserStoreHook();
|
||||||
|
|
||||||
const inputVal = ref("初始内容");
|
const isConnected = ref(false);
|
||||||
|
const socketEndpoint = ref("http://localhost:8989/ws");
|
||||||
|
|
||||||
const topicMsgs = ref<string[]>(["接收到一条主题消息"]); // 主题消息列表
|
const receiverUsername = ref("root");
|
||||||
const p2pMsgs = ref<string[]>(["接收到一条点对线消息"]);
|
|
||||||
|
|
||||||
function handleSendToAll() {
|
const topicMessages = ref<string[]>([]); // 广播消息集合
|
||||||
stompClient.send("/app/sendToAll", {}, inputVal.value);
|
const queneMessages = ref<string[]>([]); // 点对点消息集合
|
||||||
|
|
||||||
|
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() {
|
function sendToUser() {
|
||||||
stompClient.send("/app/sendToUser/root", {}, inputVal.value);
|
stompClient.send(
|
||||||
|
"/app/sendToUser/" + receiverUsername.value,
|
||||||
|
{},
|
||||||
|
queneMessage.value
|
||||||
|
);
|
||||||
|
topicMessages.value.push(queneMessage.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
let stompClient: Stomp.Client;
|
let stompClient: Stomp.Client;
|
||||||
|
|
||||||
function initWebSocket() {
|
function connectWebSocket() {
|
||||||
let socket = new SockJS("http://localhost:8989/ws");
|
let socket = new SockJS(socketEndpoint.value);
|
||||||
|
|
||||||
stompClient = Stomp.over(socket);
|
stompClient = Stomp.over(socket);
|
||||||
|
|
||||||
stompClient.connect({ Authorization: userStore.token }, () => {
|
stompClient.connect(
|
||||||
console.log("连接就绪，订阅主题：", "/topic/all");
|
{ Authorization: userStore.token },
|
||||||
|
() => {
|
||||||
|
isConnected.value = true;
|
||||||
|
stompClient.subscribe("/topic/notice", (res) => {
|
||||||
|
console.log("广播消息接收", res);
|
||||||
|
});
|
||||||
|
|
||||||
stompClient.subscribe("/topic/notice", (res) => {
|
stompClient.subscribe("/user/queue/greeting", (res) => {
|
||||||
console.log("广播消息接收", res);
|
console.log("点对点消息接收", res);
|
||||||
});
|
});
|
||||||
|
},
|
||||||
stompClient.subscribe("/user/queue/greeting", (res) => {
|
(error) => {
|
||||||
console.log("点对点消息接收", res);
|
// 连接断开时触发此回调函数
|
||||||
});
|
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(() => {
|
onMounted(() => {
|
||||||
initWebSocket();
|
connectWebSocket();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -56,35 +107,140 @@ onMounted(() => {
|
|||||||
>示例源码 请点击>>>></el-link
|
>示例源码 请点击>>>></el-link
|
||||||
>
|
>
|
||||||
|
|
||||||
<div>
|
<el-row :gutter="10">
|
||||||
<div class="search-container">
|
<el-col :span="12">
|
||||||
<el-form :inline="true">
|
<el-card>
|
||||||
<el-form-item> <el-input v-model="inputVal" /></el-form-item>
|
<el-row>
|
||||||
<el-form-item
|
<el-col :span="16">
|
||||||
><el-button @click="handleSendToUser">发送点对点消息</el-button>
|
<el-input v-model="socketEndpoint" class="w-200px" />
|
||||||
<el-button @click="handleSendToAll">发送广播消息</el-button>
|
<el-button type="primary" class="ml-5" @click="connectWebSocket"
|
||||||
</el-form-item>
|
>连接</el-button
|
||||||
</el-form>
|
>
|
||||||
</div>
|
<el-button type="danger" @click="disconnectWebSocket"
|
||||||
|
>断开</el-button
|
||||||
|
>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
<el-row :gutter="20">
|
<el-col :span="8" class="text-right">
|
||||||
<el-col :span="12">
|
连接状态：
|
||||||
<el-card>
|
<el-tag class="ml-2" type="success" v-if="isConnected"
|
||||||
<template #header>点对点消息接收 </template>
|
>已连接</el-tag
|
||||||
<div v-for="(msg, index) in p2pMsgs" :key="index">
|
>
|
||||||
{{ msg }}
|
<el-tag class="ml-2" type="info" v-else>已断开</el-tag>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-card class="mt-5">
|
||||||
|
<el-form label-width="90px">
|
||||||
|
<el-form-item label="消息内容">
|
||||||
|
<el-input type="textarea" v-model="topicMessage" />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item>
|
||||||
|
<el-button @click="sendNotice" type="primary">发送广播</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-card class="mt-5">
|
||||||
|
<el-form label-width="90px">
|
||||||
|
<el-form-item label="消息内容">
|
||||||
|
<el-input type="textarea" v-model="queneMessage" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="消息接收人">
|
||||||
|
<el-input v-model="receiverUsername" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button @click="sendToUser" type="primary"
|
||||||
|
>发送点对点消息</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card>
|
||||||
|
<div class="message-container">
|
||||||
|
<div class="system-notification">dafsdfads</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-for="message in messages"
|
||||||
|
:key="message.id"
|
||||||
|
class="message-item"
|
||||||
|
:class="{
|
||||||
|
'message-item--sent': message.sender === 'me',
|
||||||
|
'message-item--received': message.sender !== 'me',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="message-content">
|
||||||
|
<div
|
||||||
|
:class="{
|
||||||
|
'message-sender': message.sender === 'me',
|
||||||
|
'message-receiver': message.sender !== 'me',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ message.sender }}
|
||||||
|
</div>
|
||||||
|
<div class="message-text">{{ message.text }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</div>
|
||||||
</el-col>
|
</el-card>
|
||||||
<el-col :span="12">
|
</el-col>
|
||||||
<el-card>
|
</el-row>
|
||||||
<template #header> 广播消息接收 </template>
|
|
||||||
<div v-for="(msg, index) in topicMsgs" :key="index">
|
|
||||||
{{ msg }}
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.message-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-item {
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-item--sent {
|
||||||
|
align-self: flex-end;
|
||||||
|
background-color: #dcf8c6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-item--received {
|
||||||
|
align-self: flex-start;
|
||||||
|
background-color: #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-sender {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-receiver {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-text {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.system-notification {
|
||||||
|
padding: 5px;
|
||||||
|
font-style: italic;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user