websocket连接样例
This commit is contained in:
parent
424606b95c
commit
5edd47c1c9
|
|
@ -0,0 +1,210 @@
|
||||||
|
<template>
|
||||||
|
<div class="websocket-test">
|
||||||
|
<h2>WebSocket 测试工具</h2>
|
||||||
|
|
||||||
|
<div class="connection-panel">
|
||||||
|
<el-input v-model="userId" placeholder="输入用户ID" style="width: 200px"></el-input>
|
||||||
|
<el-button type="primary" @click="connect" :disabled="isConnected">连接</el-button>
|
||||||
|
<el-button type="danger" @click="disconnect" :disabled="!isConnected">断开</el-button>
|
||||||
|
<el-button @click="sendPing" :disabled="!isConnected">发送心跳</el-button>
|
||||||
|
<span class="status" :class="{ connected: isConnected }">
|
||||||
|
{{ isConnected ? '已连接' : '未连接' }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="message-panel">
|
||||||
|
<el-input v-model="messageToSend" placeholder="输入要发送的消息"
|
||||||
|
style="width: 300px; margin-right: 10px"></el-input>
|
||||||
|
<el-button type="primary" @click="sendMessage" :disabled="!isConnected">发送</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="log-panel">
|
||||||
|
<h3>消息日志：</h3>
|
||||||
|
<div class="log-content">
|
||||||
|
<div v-for="(log, index) in logs" :key="index" class="log-item">
|
||||||
|
<span class="log-time">[{{ log.time }}]</span>
|
||||||
|
<span class="log-message">{{ log.message }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'WebSocketTest',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3NjI3MTg2MTUsInVzZXJuYW1lIjoiYWRtaW4ifQ.qSwjclSvEHOefAjm9Oqay9dmhLUZy1cgIBeE1u1Twg8',
|
||||||
|
userId: 'test_user_' + Math.floor(Math.random() * 1000), // 随机用户ID
|
||||||
|
ws: null,
|
||||||
|
isConnected: false,
|
||||||
|
messageToSend: '',
|
||||||
|
logs: [],
|
||||||
|
reconnectAttempts: 0,
|
||||||
|
maxReconnectAttempts: 5,
|
||||||
|
reconnectDelay: 5000 // 5秒重连间隔
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
connect() {
|
||||||
|
if (this.isConnected) return
|
||||||
|
|
||||||
|
// WebSocket 连接地址
|
||||||
|
const wsUrl = `ws://localhost:8091/nursing-unit_101/directive/websocket/${this.userId}?token=${this.token}`
|
||||||
|
|
||||||
|
this.ws = new WebSocket(wsUrl)
|
||||||
|
|
||||||
|
this.ws.onopen = () => {
|
||||||
|
this.isConnected = true
|
||||||
|
this.reconnectAttempts = 0
|
||||||
|
this.addLog('连接成功')
|
||||||
|
|
||||||
|
// 启动心跳
|
||||||
|
this.startHeartbeat()
|
||||||
|
}
|
||||||
|
|
||||||
|
this.ws.onmessage = (event) => {
|
||||||
|
const message = event.data
|
||||||
|
this.addLog(`收到消息: ${message}`)
|
||||||
|
|
||||||
|
// 处理心跳响应
|
||||||
|
if (message === 'pong') {
|
||||||
|
this.addLog('收到心跳响应')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.ws.onclose = () => {
|
||||||
|
this.isConnected = false
|
||||||
|
this.addLog('连接已关闭')
|
||||||
|
|
||||||
|
// 停止心跳
|
||||||
|
this.stopHeartbeat()
|
||||||
|
|
||||||
|
// 自动重连
|
||||||
|
if (this.reconnectAttempts < this.maxReconnectAttempts) {
|
||||||
|
this.reconnectAttempts++
|
||||||
|
this.addLog(`将在 ${this.reconnectDelay / 1000} 秒后尝试重连 (${this.reconnectAttempts}/${this.maxReconnectAttempts})`)
|
||||||
|
setTimeout(() => {
|
||||||
|
this.connect()
|
||||||
|
}, this.reconnectDelay)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.ws.onerror = (error) => {
|
||||||
|
this.addLog(`连接错误: ${error.message || '未知错误'}`)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
disconnect() {
|
||||||
|
if (this.ws) {
|
||||||
|
this.ws.close()
|
||||||
|
this.ws = null
|
||||||
|
}
|
||||||
|
this.isConnected = false
|
||||||
|
this.stopHeartbeat()
|
||||||
|
},
|
||||||
|
|
||||||
|
sendMessage() {
|
||||||
|
if (this.ws && this.isConnected) {
|
||||||
|
this.ws.send(this.messageToSend)
|
||||||
|
this.addLog(`发送消息: ${this.messageToSend}`)
|
||||||
|
this.messageToSend = ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
sendPing() {
|
||||||
|
if (this.ws && this.isConnected) {
|
||||||
|
this.ws.send('ping')
|
||||||
|
this.addLog('发送心跳: ping')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
startHeartbeat() {
|
||||||
|
// 每30秒发送一次心跳
|
||||||
|
this.heartbeatInterval = setInterval(() => {
|
||||||
|
if (this.isConnected) {
|
||||||
|
this.sendPing()
|
||||||
|
}
|
||||||
|
}, 30000)
|
||||||
|
},
|
||||||
|
|
||||||
|
stopHeartbeat() {
|
||||||
|
if (this.heartbeatInterval) {
|
||||||
|
clearInterval(this.heartbeatInterval)
|
||||||
|
this.heartbeatInterval = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
addLog(message) {
|
||||||
|
const time = new Date().toLocaleTimeString()
|
||||||
|
this.logs.unshift({ time, message })
|
||||||
|
if (this.logs.length > 100) {
|
||||||
|
this.logs.pop()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeDestroy() {
|
||||||
|
this.disconnect()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.websocket-test {
|
||||||
|
padding: 20px;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-panel {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
margin-left: 10px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #f56c6c;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.connected {
|
||||||
|
background-color: #67c23a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-panel {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-panel {
|
||||||
|
border: 1px solid #ebeef5;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-content {
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-item {
|
||||||
|
padding: 5px 0;
|
||||||
|
border-bottom: 1px dashed #ebeef5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-time {
|
||||||
|
color: #909399;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-message {
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue