<template>
<div>
<input v-model="message" placeholder="Type your message...">
<button @click="sendMessage">Send</button>
<ul>
<li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
message: '',
ws: null,
messages: []
};
},
mounted() {
this.connect();
},
beforeDestroy() {
this.ws.close();
},
methods: {
/**
* 初始化WebSocket连接
*/
connect() {
// 服务器地址
this.ws = new WebSocket('ws://your-websocket-server-url');
// 添加WebSocket连接打开事件监听器
this.ws.addEventListener('open', () => {
console.log('WebSocket connected');
});
// 添加WebSocket接收到消息事件监听器
this.ws.addEventListener('message', (event) => {
// 将服务器发送的消息添加到本地消息数组中
this.messages.push(`From Server: ${event.data}`);
});
// 添加WebSocket错误事件监听器
this.ws.addEventListener('error', (error) => {
console.error('WebSocket error:', error);
});
// 添加WebSocket连接关闭事件监听器
this.ws.addEventListener('close', () => {
console.log('WebSocket disconnected');
});
},
/**
* 发送消息到WebSocket服务器的方法
*/
sendMessage() {
// 如果有消息且WebSocket连接处于OPEN状态,则发送消息
if (this.message && this.ws.readyState === WebSocket.OPEN) {
// 将消息内容发送给服务器
this.ws.send(this.message);
// 将发送的消息添加到本地消息数组中(此处假设也作为客户端发送的消息记录)
this.messages.push(`From Client: ${this.message}`);
// 清空消息输入框
this.message = '';
}
}
}
};
</script>
前端简单得WebSocket实现
最新推荐文章于 2024-06-08 08:23:43 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)