用Vue写websocket封装
时间: 2023-09-10 11:10:42 浏览: 66
以下是使用Vue.js封装WebSocket的示例代码:
```
// WebSocket封装
export default {
connect() {
this.socket = new WebSocket('wss://example.com/ws') // 替换为你的WebSocket地址
this.socket.onopen = () => {
console.log('WebSocket connected')
}
this.socket.onclose = () => {
console.log('WebSocket disconnected')
this.reconnect()
}
this.socket.onerror = error => {
console.error('WebSocket error:', error)
}
this.socket.onmessage = event => {
console.log('WebSocket message received:', event.data)
}
},
reconnect() {
if (this.reconnectInterval) return
this.reconnectInterval = setInterval(() => {
console.log('WebSocket reconnecting...')
this.connect()
}, 3000) // 3秒后重连
},
send(message) {
if (this.socket.readyState === WebSocket.OPEN) {
console.log('WebSocket message sent:', message)
this.socket.send(JSON.stringify(message))
} else {
console.error('WebSocket not connected:', message)
}
}
}
```
在Vue组件中使用WebSocket:
```
<template>
<div>
<button @click="sendMessage">Send Message</button>
</div>
</template>
<script>
import WebSocket from '@/utils/websocket' // 引入WebSocket封装
export default {
mounted() {
WebSocket.connect() // 连接WebSocket
},
methods: {
sendMessage() {
WebSocket.send({ message: 'Hello, WebSocket!' }) // 发送消息
}
}
}
</script>
```
请注意,此示例仅用于演示目的。在实际使用中,您需要根据您的需求进行适当的修改和扩展。