c3lf/c3lf-system-3
9
0
Fork 0
Code Issues 55 Pull requests Projects 2 Releases Wiki Activity Actions

add /ws/2/notify/ socket

Browse source
This commit is contained in:
j3d1 2023-11-27 01:38:43 +01:00
parent 97503e91e0
commit 101fa7b69d
10 changed files with 138 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

91
web/src/App.vue
View file

@ -24,7 +24,9 @@ export default {
components: {Toast, Navbar, AddItemModal},
computed: mapState(['loadedItems', 'layout', 'toasts']),
data: () => ({
addModalOpen: false
addModalOpen: false,
notify_socket: null,
socket_toast: null,
}),
methods: {
...mapMutations(['removeToast', 'createToast']),
@ -33,35 +35,68 @@ export default {
},
closeAddModal() {
this.addModalOpen = false;
}
},
tryConnect() {
if (!this.notify_socket || this.notify_socket.readyState !== WebSocket.OPEN) {
if (this.socket_toast) {
this.removeToast(this.socket_toast.key);
this.socket_toast = null;
}
this.socket_toast = this.createToast({
title: "Connecting...",
message: "Connecting to websocket...",
color: "warning"
});
this.notify_socket = new WebSocket('wss://' + window.location.host + '/ws/2/notify/');
this.notify_socket.onopen = (e) => {
if (this.socket_toast) {
this.removeToast(this.socket_toast.key);
this.socket_toast = null;
}
this.socket_toast = this.createToast({
title: "Connection established",
message: JSON.stringify(e),
color: "success"
});
};
this.notify_socket.onclose = (e) => {
if (this.socket_toast) {
this.removeToast(this.socket_toast.key);
this.socket_toast = null;
}
this.socket_toast = this.createToast({
title: "Connection closed",
message: JSON.stringify(e),
color: "danger"
});
setTimeout(() => {
this.tryConnect();
}, 1000);
};
this.notify_socket.onerror = (e) => {
if (this.socket_toast) {
this.removeToast(this.socket_toast.key);
this.socket_toast = null;
}
this.socket_toast = this.createToast({
title: "Connection error",
message: JSON.stringify(e),
color: "danger"
});
setTimeout(() => {
this.tryConnect();
}, 1000);
};
this.notify_socket.onmessage = (e) => {
let data = JSON.parse(e.data);
console.log(data);
}
}
},
},
created: function () {
this.notify_socket = new WebSocket('wss://' + window.location.host + '/ws/notify/');
this.notify_socket.onmessage = (e) => {
let data = JSON.parse(e.data);
console.log(data, e.data);
};
this.notify_socket.onopen = (e) => {
this.createToast({
title: "Connection established",
message: JSON.stringify(e),
color: "success"
});
};
this.notify_socket.onclose = (e) => {
this.createToast({
title: "Connection closed",
message: JSON.stringify(e),
color: "danger"
});
};
this.notify_socket.onerror = (e) => {
this.createToast({
title: "Connection error",
message: JSON.stringify(e),
color: "danger"
});
};
this.tryConnect();
}
};
</script>

4
web/src/store/index.js
View file

@ -84,8 +84,10 @@ const store = new Vuex.Store({
state.loadedItems.push(item);
},
createToast(state, {title, message, color}) {
state.toasts.push({title, message, color, key: state.keyIncrement});
var toast = {title, message, color, key: state.keyIncrement}
state.toasts.push(toast);
state.keyIncrement += 1;
return toast;
},
removeToast(state, key) {
state.toasts = state.toasts.filter(toast => toast.key !== key);