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

add: improved the frontend and the backend by adding websockets

Browse source
This commit is contained in:
Lukian 2025-04-07 22:46:04 +02:00
parent ecf7b61aca
commit fbf7821320
18 changed files with 255 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

69
back/api/channels.js
View file

@ -11,6 +11,16 @@ router.get('/', async (req, res) => {
res.send(channels);
});
const sockets = new Set();
router.ws('/', function(ws, req) {
sockets.add(ws);
ws.on('close', () => {
sockets.delete(ws);
});
});
router.get('/:name', async (req, res) => {
const name = req.params.name;
const connection = await getConnection();
@ -23,6 +33,22 @@ router.get('/:name', async (req, res) => {
}
});
const channelSockets = new Map();
router.ws('/:name', function(ws, req) {
const name = req.params.name;
if (!channelSockets.has(name)) {
channelSockets.set(name, new Set());
}
channelSockets.get(name).add(ws);
ws.on('close', () => {
channelSockets.get(name).delete(ws);
});
});
router.get('/:name/messages', async (req, res) => {
const name = req.params.name;
const connection = await getConnection();
@ -78,6 +104,23 @@ router.post('/:name/messages/send', async (req, res) => {
}
connection.end();
if (sockets.size > 0) {
for (const client of sockets) {
if (client.readyState === 1) {
client.send('new_message');
}
}
}
if (channelSockets.has(name)) {
for (const client of channelSockets.get(name)) {
if (client.readyState === 1) {
client.send('new_message');
}
}
}
res.send({ message: 'Message sent' });
});
@ -113,6 +156,23 @@ router.post('/:name/messages/delete', async (req, res) => {
await deleteMessage(connection, message_id);
await deleMentions(connection, message_id);
connection.end();
if (sockets.size > 0) {
for (const client of sockets) {
if (client.readyState === 1) {
client.send('delete_message');
}
}
}
if (channelSockets.has(name)) {
for (const client of channelSockets.get(name)) {
if (client.readyState === 1) {
client.send('delete_message');
}
}
}
res.send({ message: 'Message deleted' });
});
@ -140,6 +200,15 @@ router.post('/add', async (req, res) => {
await addChannel(connection, name, description, user.id);
connection.end();
if (sockets.size > 0) {
for (const client of sockets) {
if (client.readyState === 1) {
client.send('new_channel');
}
}
}
res.send({ message: 'Channel added' });
});

1
back/api/lastmessages.js
View file

@ -1,5 +1,4 @@
const express = require('express');
const jwt = require('jsonwebtoken');
const { getConnection, getLastMessages, getMentions } = require('../libs/mysql');
const router = express.Router();

13
back/api/newchannels.js Normal file
View file

@ -0,0 +1,13 @@
const express = require('express');
const { getConnection, getNewChannels } = require('../libs/mysql');
const router = express.Router();
router.get('/', async (req, res) => {
const connection = await getConnection();
const channels = await getNewChannels(connection);
connection.end();
res.send(channels);
});
module.exports = router;

1
back/index.js
View file

@ -7,6 +7,7 @@ const cors = require("cors");
require("dotenv").config();
const app = express();
var expressWs = require('express-ws')(app);
const port = config.port || 3000;
app.use(express.json());

20
back/libs/mysql.js
View file

@ -110,7 +110,7 @@ function getActiveChannels(connection) {
FROM messages
JOIN channels ON messages.channel_id = channels.id
JOIN users ON messages.user_id = users.id
WHERE date > (SELECT max(date) FROM messages) - 7 * 24 * 60 * 60
WHERE date > (SELECT max(date) FROM messages) - 3 * 24 * 60 * 60
GROUP BY channel_id
ORDER BY count(*) DESC
LIMIT 5;`,
@ -124,6 +124,23 @@ function getActiveChannels(connection) {
});
}
function getNewChannels(connection) {
return new Promise((resolve, reject) => {
connection.query(
`SELECT channels.id, name, description, owner_id, username AS owner_username
FROM channels
JOIN users ON channels.owner_id = users.id
ORDER BY channels.id DESC LIMIT 5`,
(error, result) => {
if (error) {
reject(new Error(error));
}
resolve(result);
}
);
});
}
function searchChannels(connection, search) {
return new Promise((resolve, reject) => {
connection.query(
@ -319,6 +336,7 @@ module.exports = {
getUserLastMessages,
getChannels,
getActiveChannels,
getNewChannels,
searchChannels,
getChannel,
addChannel,

1
back/package.json
View file

@ -16,6 +16,7 @@
"cors": "^2.8.5",
"dotenv": "^16.3.1",
"express": "^4.18.2",
"express-ws": "^5.0.2",
"fs": "^0.0.1-security",
"https": "^1.0.0",
"jsonwebtoken": "^9.0.2",

21
front/package-lock.json generated
View file

@ -1387,6 +1387,18 @@
"dev": true,
"license": "MIT"
},
"node_modules/@types/node": {
"version": "22.14.0",
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.0.tgz",
"integrity": "sha512-Kmpl+z84ILoG+3T/zQFyAJsU6EPTmOCj8/2+83fSN6djd6I4o7uOuGIH6vq3PrjY5BGitSbFuMN18j3iknubbA==",
"dev": true,
"license": "MIT",
"optional": true,
"peer": true,
"dependencies": {
"undici-types": "~6.21.0"
}
},
"node_modules/@types/react": {
"version": "19.0.12",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.12.tgz",
@ -3400,6 +3412,15 @@
"typescript": ">=4.8.4 <5.9.0"
}
},
"node_modules/undici-types": {
"version": "6.21.0",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
"integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
"dev": true,
"license": "MIT",
"optional": true,
"peer": true
},
"node_modules/update-browserslist-db": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",

2
front/src/components/MessageComponent.tsx
View file

@ -19,6 +19,8 @@ export default function MessageComponent({ message, user, channel, deleteMessage
if (mention) {
return <span><Link key={index} to={`/u/${mention.username}`}>{word}</Link> </span>;
}
} else if (word.startsWith("https://") || word.startsWith("http://")) {
return <span><Link to={word}>{word}</Link> </span>
}
return <span key={index}>{word} </span>;
})}

1
front/src/index.css
View file

@ -1,5 +1,6 @@
html {
background: linear-gradient(#FFE0E3, #f59ebb);
min-height: 100vh;
}
.cat {

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

@ -71,15 +71,17 @@ export default function ChannelPage() {
}, [name]);
useEffect(() => {
const id = setInterval(() => {
axios
.get(`/api/channels/${name}/messages`).then((res) => {
setMessages(res.data)
})
}, 2000)
return () => { clearInterval(id) }
}, [])
const socket = new WebSocket(`/api/channels/${name}`);
socket.addEventListener('message', function (event) {
if (event.data === "new_message" || event.data === "delete_message") {
axios
.get(`/api/channels/${name}/messages`).then((res) => {
setMessages(res.data)
})
}
});
}, [name])
useEffect(() => {
const words = message.toString().split(" ");
@ -102,7 +104,14 @@ export default function ChannelPage() {
if (!channel || !messages) {
return <div>Loading...</div>;
return (
<div className="channel-page">
<TopBar user={user} />
<div className="channel">
<p>Loading...</p>
</div>
</div>
)
}
return (

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

@ -34,22 +34,40 @@ export default function ChannelsPage() {
}, [])
useEffect(() => {
const id = setInterval(() => {
axios
.get("/api/channels").then((res) => {
setChannels(res.data)
}
)
}, 2000)
const socket = new WebSocket("/api/channels");
return () => { clearInterval(id) }
socket.addEventListener('message', function (event) {
if (event.data === "new_channel") {
axios
.get("/api/channels")
.then((res) => {
setChannels(res.data)
})
.catch((err) => {
console.error(err.response)
})
}
});
}, [])
if (!channels) {
return (
<div className="channels-page">
<TopBar user={user} />
<div className="channels-page-channels">
<h2>Channels</h2>
<p>Loading...</p>
</div>
</div>
)
}
return (
<div className="channels-page">
<TopBar user={user} />
<div className="channels-page-channels">
<h2>Channels</h2>
<Link to="/create-channel">Create channel</Link>
<input
type="text"
placeholder="Search channels"
@ -57,7 +75,7 @@ export default function ChannelsPage() {
onChange={(e) => setSearch(e.target.value)}
/>
<ul>
{channels?.filter((channel) => channel.name.toLowerCase().includes(search.toLowerCase())).map((channel) => (
{channels?.sort().filter((channel) => channel.name.toLowerCase().includes(search.toLowerCase())).map((channel) => (
<li key={channel.id}>
<Link to={`/c/${channel.name}`}>{channel.name}</Link>
</li>

2
front/src/pages/CreateChannel.tsx
View file

@ -31,7 +31,7 @@ export default function CreateChannel() {
axios
.post("/api/channels/add", { name, description, token })
.then(() => {
navigate("/");
navigate(`/c/${name}`);
})
.catch((err) => {
console.error(err.response.data.message);

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

@ -12,6 +12,7 @@ export default function Home() {
const [channels, setChannels] = useState<RecentChannels>();
const [messages , setMessages] = useState<Messages>();
const [searchedChannels, setSearchedChannels] = useState<Channels>([]);
const [newChannels, setNewChannels] = useState<Channels>([]);
const [search, setSearch] = useState<string>("");
useEffect(() => {
@ -45,27 +46,60 @@ export default function Home() {
})
.catch((err) => {
console.error(err.response)
}
)
})
axios
.get("/api/newchannels")
.then((res) => {
setNewChannels(res.data)
})
.catch((err) => {
console.error(err.response)
})
}, [])
useEffect(() => {
const id = setInterval(() => {
axios
.get("/api/activechannels").then((res) => {
setChannels(res.data)
}
)
const socket = new WebSocket("/api/channels");
axios
.get("/api/lastmessages").then((res) => {
setMessages(res.data)
}
)
socket.addEventListener('message', function (event) {
if (event.data === "new_message" || event.data === "delete_message") {
axios
.get("/api/lastmessages")
.then((res) => {
setMessages(res.data)
})
.catch((err) => {
console.error(err.response)
})
}, 2000)
axios
.get("/api/activechannels")
.then((res) => {
setChannels(res.data)
})
.catch((err) => {
console.error(err.response)
})
} else if (event.data === "new_channel") {
axios
.get("/api/activechannels")
.then((res) => {
setChannels(res.data)
})
.catch((err) => {
console.error(err.response)
})
return () => { clearInterval(id) }
axios
.get("/api/newchannels")
.then((res) => {
setNewChannels(res.data)
})
.catch((err) => {
console.error(err.response)
})
}
});
}, [])
useEffect(() => {
@ -125,6 +159,16 @@ export default function Home() {
))}
</ul>
</div>
<div className="channels-new">
<h3>Last created channels</h3>
<ul>
{newChannels?.map((channel) => (
<li key={channel.id}>
<Link to={`/c/${channel.name}`}>{channel.name}</Link>
</li>
))}
</ul>
</div>
<div className="channels-search">
<h3>Search channels</h3>
<input

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

@ -34,17 +34,6 @@ export default function UserPage() {
});
}, [username]);
useEffect(() => {
const id = setInterval(() => {
axios
.get(`/api/users/${username}/lastmessages`).then((res) => {
setMessages(res.data)
})
}, 2000)
return () => { clearInterval(id) }
}, [username])
if (!pageUser) {
return <div>Loading...</div>;
}
@ -55,19 +44,19 @@ export default function UserPage() {
<div className="user">
<h2>{pageUser.username}</h2>
{pageUser.admin ? <p>Admin</p> : <p>User</p>}
<div className="user-messages">
<h2>Last messages</h2>
<div className="messages-list">
{messages?.map((message) => (
<MessageComponent
key={message.id}
message={message}
user={pageUser}
channel={undefined}
deleteMessage={undefined}
/>
))}
</div>
</div>
<div className="user-messages">
<h2>Last messages</h2>
<div className="messages-list">
{messages?.map((message) => (
<MessageComponent
key={message.id}
message={message}
user={pageUser}
channel={undefined}
deleteMessage={undefined}
/>
))}
</div>
</div>
</div>

1
front/src/styles/ChannelPage.css
View file

@ -4,7 +4,6 @@
justify-content: start;
align-items: center;
width: 100%;
min-height: 100vh;
gap: 20px;
}

5
front/src/styles/ChannelsPage.css
View file

@ -4,7 +4,6 @@
justify-content: start;
align-items: center;
width: 100%;
min-height: 100vh;
gap: 20px;
}
@ -13,4 +12,8 @@
border: 1px solid #270722;
padding: 10px;
background-color: #fff6fd;
display: flex;
flex-direction: column;
align-items: start;
gap: 10px;
}

2
front/src/styles/MessageComponent.css
View file

@ -2,4 +2,4 @@
width: 95%;
border: 1px solid #270722;
padding: 10px;
}
}

5
front/src/styles/UserPage.css
View file

@ -4,7 +4,6 @@
justify-content: start;
align-items: center;
width: 100%;
min-height: 100vh;
gap: 20px;
}
@ -18,8 +17,12 @@
}
.user-messages {
width: 97%;
border: 1px solid #270722;
padding: 10px;
display: flex;
flex-direction: column;
background-color: #fff6fd;
}
.messages-list {