在Vue中创建WebSocket连接和发送接收消息需要完成以下几个步骤：
- 创建WebSocket实例
在Vue组件的created()或mounted()生命周期方法中创建WebSocket实例并打开连接。例如：
export default {
name: 'MyComponent',
data() {
return {
socket: null,
message: ''
}
},
created() {
this.socket = new WebSocket('ws://localhost:8080/ws')
this.socket.onopen = () => {
console.log('Connected to WebSocket server.')
}
this.socket.onmessage = (event) => {
console.log('Received message: ' + event.data)
}
}
}
- 发送消息
使用WebSocket实例的send()方法发送消息。例如：
methods: {
sendMessage() {
this.socket.send(this.message)
this.message = ''
}
}
- 关闭连接
在Vue组件的beforeDestroy()生命周期方法中关闭WebSocket连接。例如：
beforeDestroy() {
if (this.socket !== null && this.socket.readyState === WebSocket.OPEN) {
this.socket.close()
}
}
这样，在Vue中就可以使用WebSocket实现实时通信了。需要注意的是，由于WebSocket在跨域访问时需要服务器端设置CORS（Cross-Origin Resource Sharing），因此建议将WebSocket连接地址设置为相对路径或与前端页面同域名的绝对路径。
