63 lines
1.3 KiB
JavaScript
63 lines
1.3 KiB
JavaScript
import { ref, onMounted, onUnmounted } from "vue";
|
|
|
|
export function useWebSocket(url) {
|
|
const socket = ref(null);
|
|
const messages = ref([]);
|
|
const isConnected = ref(false);
|
|
const error = ref(null);
|
|
|
|
function connect() {
|
|
socket.value = new WebSocket(url);
|
|
|
|
socket.value.onopen = () => {
|
|
isConnected.value = true;
|
|
console.log("WebSocket connected");
|
|
};
|
|
|
|
socket.value.onmessage = (event) => {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
messages.value.push(data);
|
|
} catch (e) {
|
|
console.error("Failed to parse message", e);
|
|
}
|
|
};
|
|
|
|
socket.value.onerror = (event) => {
|
|
error.value = "WebSocket error";
|
|
console.error("WebSocket error", event);
|
|
};
|
|
|
|
socket.value.onclose = () => {
|
|
isConnected.value = false;
|
|
console.log("WebSocket disconnected");
|
|
};
|
|
}
|
|
|
|
function sendMessage(message) {
|
|
if (socket.value && isConnected.value) {
|
|
socket.value.send(JSON.stringify(message));
|
|
} else {
|
|
console.warn("WebSocket is not connected");
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
connect();
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (socket.value) {
|
|
socket.value.close();
|
|
}
|
|
});
|
|
|
|
return {
|
|
socket,
|
|
messages,
|
|
isConnected,
|
|
error,
|
|
sendMessage,
|
|
};
|
|
}
|