原生WebSocket: new WebSocket
export default {
data() {
return {
socket: null
};
},
created() {
// 1. 创建 WebSocket 实例
this.socket = new WebSocket('ws://localhost:3000');
// 2. 监听 WebSocket 连接打开事件
this.socket.onopen = () => {
console.log('当前客户端已连接');
};
// 3. 监听 WebSocket 消息事件
this.socket.onmessage = (event) => {
console.log('客户端接收的数据:', JSON.parse(event.data));
// 4. 发送消息给服务端
let post_data = {name: 'test'}
this.socket.send(JSON.stringify(post_data))
};
// 5. 监听 WebSocket 关闭事件
this.socket.onclose = () => {
console.log('WebSocket closed');
};
// 6. 监听 WebSocket 错误事件
this.socket.onerror = (error) => {
console.log('WebSocket error:', error);
};
},
methods: {
// 发送消息按钮
sendMessage(message) {
// 4. 发送消息到 WebSocket 服务器
this.socket.send(JSON.stringify(message))
}
},
beforeDestroy() {
// 关闭 WebSocket 连接
if (this.socket) {
this.socket.close();
}
}
};