vue2如何使用websocket连接通信 完整代码
时间: 2024-01-22 15:01:56 浏览: 35
以下是在Vue2中使用WebSocket连接通信的完整代码示例:
```html
<template>
<div>
<h1>WebSocket示例</h1>
<div>
<p>连接状态:{{ connectionStatus }}</p>
<p>收到的消息:</p>
<ul>
<li v-for="(message, index) in receivedMessages" :key="index">{{ message }}</li>
</ul>
</div>
<div>
<p>发送消息:</p>
<input type="text" v-model="inputMessage" />
<button @click="sendMessage">发送</button>
</div>
</div>
</template>
<script>
import WebSocket from 'websocket'
export default {
data() {
return {
socket: null,
connectionStatus: '未连接',
receivedMessages: [],
inputMessage: '',
}
},
mounted() {
this.connectWebSocket()
},
methods: {
connectWebSocket() {
// 建立WebSocket连接
this.socket = new WebSocket('ws://localhost:8080') // 根据实际情况修改服务器地址和端口号
// 监听WebSocket连接打开事件
this.socket.onopen = () => {
console.log('WebSocket连接已打开')
this.connectionStatus = '已连接'
}
// 监听WebSocket消息事件
this.socket.onmessage = (event) => {
console.log(`收到消息:${event.data}`)
this.receivedMessages.push(event.data)
}
// 监听WebSocket连接关闭事件
this.socket.onclose = () => {
console.log('WebSocket连接已关闭')
this.connectionStatus = '未连接'
}
},
sendMessage() {
const message = this.inputMessage.trim()
if (message) {
this.socket.send(message) // 发送消息
console.log(`已发送消息:${message}`)
this.inputMessage = ''
}
},
},
}
</script>
<style>
ul {
padding-left: 0;
list-style: none;
}
</style>
```
在这个示例中,我们在Vue组件的`mounted`方法中建立WebSocket连接,并且在Vue组件的`methods`中定义了一个发送WebSocket消息的方法。在模板中,我们可以看到一个输入框和一个发送按钮,用于发送WebSocket消息。同时,我们还添加了一些状态变量,用于显示WebSocket连接状态和收到的消息。
需要注意的是,在实际使用中,需要根据实际情况修改WebSocket服务器地址和端口号。