lucien/tanuki-s-forum
1
0
Fork 0
generated from lucien/api-template
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: improved websocket usage

Browse source
This commit is contained in:
Lukian 2025-04-08 22:19:06 +02:00
parent fbf7821320
commit 132b1f3c06
7 changed files with 135 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

17
front/src/pages/ChannelPage.tsx
View file

@ -71,17 +71,28 @@ export default function ChannelPage() {
}, [name]);
useEffect(() => {
const socket = new WebSocket(`/api/channels/${name}`);
const socket = new WebSocket(`/api/ws`);
const id = setInterval(() => {
socket.send(JSON.stringify("ping"));
}, 10000);
socket.addEventListener('message', function (event) {
if (event.data === "new_message" || event.data === "delete_message") {
const data = JSON.parse(event.data);
console.log(data);
if ((data.type === "new_message" || data.type === "delete_message") && data.channel_id === channel?.id) {
axios
.get(`/api/channels/${name}/messages`).then((res) => {
setMessages(res.data)
})
}
});
}, [name])
return () => {
clearInterval(id);
socket.close();
}
}, [channel])
useEffect(() => {
const words = message.toString().split(" ");

14
front/src/pages/ChannelsPage.tsx
View file

@ -34,10 +34,15 @@ export default function ChannelsPage() {
}, [])
useEffect(() => {
const socket = new WebSocket("/api/channels");
const socket = new WebSocket("/api/ws");
const id = setInterval(() => {
socket.send(JSON.stringify("ping"));
}, 10000);
socket.addEventListener('message', function (event) {
if (event.data === "new_channel") {
const data = JSON.parse(event.data);
if (data.type === "new_channel") {
axios
.get("/api/channels")
.then((res) => {
@ -48,6 +53,11 @@ export default function ChannelsPage() {
})
}
});
return () => {
clearInterval(id);
socket.close();
}
}, [])
if (!channels) {

19
front/src/pages/Home.tsx
View file

@ -59,10 +59,16 @@ export default function Home() {
}, [])
useEffect(() => {
const socket = new WebSocket("/api/channels");
const socket = new WebSocket("/api/ws");
socket.addEventListener('message', function (event) {
if (event.data === "new_message" || event.data === "delete_message") {
const id = setInterval(() => {
socket.send(JSON.stringify("ping"));
}, 10000);
socket.addEventListener('message', function (event)
{
const data = JSON.parse(event.data);
if (data.type === "new_message" || data.type === "delete_message") {
axios
.get("/api/lastmessages")
.then((res) => {
@ -80,7 +86,7 @@ export default function Home() {
.catch((err) => {
console.error(err.response)
})
} else if (event.data === "new_channel") {
} else if (data.type === "new_channel") {
axios
.get("/api/activechannels")
.then((res) => {
@ -100,6 +106,11 @@ export default function Home() {
})
}
});
return () => {
clearInterval(id);
socket.close();
}
}, [])
useEffect(() => {

59
front/src/pages/UserPage.tsx
View file

@ -25,17 +25,62 @@ export default function UserPage() {
}, []);
useEffect(() => {
axios.get(`/api/users/${username}`).then((res) => {
setPageUser(res.data);
});
axios
.get(`/api/users/${username}`)
.then((res) => {
setPageUser(res.data);
})
.catch((err) => {
console.error(err.response);
});
axios.get(`/api/users/${username}/lastmessages`).then((res) => {
setMessages(res.data);
});
axios
.get(`/api/users/${username}/lastmessages`)
.then((res) => {
setMessages(res.data);
})
.catch((err) => {
console.error(err.response);
});
}, [username]);
useEffect(() => {
const socket = new WebSocket("/api/ws");
const id = setInterval(() => {
socket.send(JSON.stringify("ping"));
}, 10000);
socket.addEventListener('message', function (event) {
const data = JSON.parse(event.data);
if ((data.type === "new_message" || data.type === "delete_message") && data.user_id === pageUser?.id) {
console.log("new message");
axios
.get(`/api/users/${username}/lastmessages`)
.then((res) => {
setMessages(res.data);
})
.catch((err) => {
console.error(err.response);
});
}
});
return () => {
clearInterval(id);
socket.close();
};
}, [pageUser]);
if (!pageUser) {
return <div>Loading...</div>;
return (
<div className="user-page">
<TopBar user={user} />
<div className="user">
<h2>Loading...</h2>
</div>
</div>
)
}
return (