slawk0/web-chat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

i have no idea what i'v done, some code get reverted because of not working implementation of private mssaging

Browse Source
This commit is contained in:
slawk0
2024-08-24 01:10:22 +02:00
parent 0207751b5a
commit bb626f4deb
9 changed files with 121 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
backend/socket.js
View File

@@ -1,79 +0,0 @@
const { Server } = require("socket.io");
const { createServer } = require('node:http');
const { join } = require('node:path');
const express = require('express');
const jwt = require("jsonwebtoken");
const app = express();
const server = createServer(app);
const io = new Server(server, {
cookie: {
httpOnly: true,
sameSite: "strict",
maxAge: 30 * 24 * 60 * 60 * 1000
},
cors: {
origin: process.env.ORIGIN
},
connectionStateRecovery: {}
});
const jwtSecret = process.env.JWT_SECRET;
function socket() {
const users = new Map();
io.use((socket, next) => {
const token = socket.handshake.auth.token;
if(token) {
jwt.verify(token, jwtSecret, (err, user) => {
if(err) {
console.log(err);
}
socket.user = user;
next();
});
} else {
next(new Error('Not logged in'));
}
});
// socket io connection
io.on('connection', (socket) => {
const username = socket.user.username;
console.log(username + ' connected');
users.set(username, socket.id);
// chat message event
socket.on('chat message', (msg, callback) => {
const message = username + ': ' + msg;
console.log(message);
callback();
io.emit('chat message', message);
});
// private message event
socket.on('private message', ({ to, message }, callback) => {
const recipientSocketId = users.get(to);
if (recipientSocketId) {
io.to(recipientSocketId).emit('private message', {
from: username,
message: message
});
callback(true);
} else {
callback(false);
}
});
// disconnect event
socket.on('disconnect', () => {
console.log(username + ' has disconnected');
users.delete(username);
});
});
}
module.exports = {
socket
};

83
frontend/js/chat.js
View File

@@ -2,50 +2,51 @@ const form = document.getElementById('form');
const input = document.getElementById('input');
const messages = document.getElementById('messages');
form.addEventListener('submit', (e) => {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
document.getElementById('recipmentForm').addEventListener('submit', (e) => {
e.preventDefault();
const recipmentInput = document.getElementById('recipmentInput');
const username = recipmentInput.value.trim();
if(username) {
socket.emit()
}
socket.emit()
});
fetch('/auth/token')
.then(response => {
// Function to get the token
async function getToken() {
try {
const response = await fetch('/auth/token');
if (!response.ok) {
throw new Error('Network response was not ok');
console.log('Network response was not ok');
}
return await response.text();
} catch (error) {
console.error('There was a problem with token fetching', error);
return null;
}
}
// Initialize socket connection
async function initializeSocket() {
const token = await getToken();
if (!token) {
console.error('Not logged in');
return;
}
const socket = io({
auth: {
token: token
}
return response.text();
})
.then(token => {
localStorage.setItem('token', token); // Save to localStorage
})
.catch(err => {
console.error('There was a problem with token fetching', err);
});
const token = localStorage.getItem('token');
const socket = io({
auth: {
token: token
}
});
socket.on('connect', () => {
console.log('Connected to server');
});
socket.on('chat message', (msg) => {
const item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
socket.on('chat message', (msg) => {
const item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
form.addEventListener('submit', (e) => {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
}
initializeSocket();

8
frontend/js/signup.js
View File

@@ -10,16 +10,16 @@ function showPasswd() {
}
}
document.getElementById('signupForm').addEventListener('submit',async function (event) {
event.preventDefault();
document.getElementById('signupForm').addEventListener('submit', function (event) {
const password = document.getElementById("password").value;
const sPassword = document.getElementById("sPassword").value;
console.log(password, sPassword);
//TODO it doesnt work lmao
if(password !== sPassword){
alert("Passwords don't match!");
event.preventDefault();
} else {
this.submit();
}
})
});

13
frontend/routes/chat.html
View File

@@ -18,20 +18,21 @@
</head>
<body>
<h1>Web chat</h1>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" />
<input id="input" autocomplete="off" placeholder="Enter message" />
<button>Send</button>
</form>
<form id="recipmentForm" action="">
<input id="recipient" autocomplete="off" placeholder="Recipient (optional)"/>
<input id="recipmentInput" autocomplete="off" /><button>Send</button>
</form>
<!--<form id="recipmentForm" action="">-->
<!-- <input id="recipmentInput" autocomplete="off" />-->
<!-- <button>Send</button>-->
<!--</form>-->
<script src="/socket.io/socket.io.js"></script>
<script src="/static/js/chat.js"></script>
<script src="/static/js/signup.js"></script>
</body>
</html>

5
frontend/routes/login.html
View File

@@ -6,6 +6,7 @@
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="/static/js/login.js" defer></script>
<link rel="stylesheet" href="/static/stylesheet/login.css">
<title>Login</title>
</head>
<body>
@@ -17,12 +18,12 @@
<label for="username"></label>
<input type="text" name="username" placeholder="Username" id="username" required>
<label for="password"></label>
<label for="password"></label><br>
<input type="password" name="password" placeholder="Password" id="password" required>
<input type="checkbox" onclick="showPasswd()">Show Password
<input type="submit" value="Login">
<button type="submit">Login</button>
</form>
</div>
<a href="/signup">Sign up</a>

7
frontend/routes/signup.html
View File

@@ -5,7 +5,8 @@
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../js/signup.js" defer></script>
<script src="/static/js/signup.js" defer></script>
<link rel="stylesheet" href="/static/stylesheet/signup.css">
<title>Sign up</title>
</head>
<body>
@@ -23,9 +24,9 @@
<label for="sPassword"></label>
<input type="password" name="sPassword" placeholder="Confirm password" id="sPassword" required>
<input type="checkbox" onclick="showPasswd()">Show Passwords
<input type="checkbox" id="checkbox" onclick="showPasswd()">Show Passwords
<input type="submit" value="Sign up">
<button type="submit">Sign up</button>
</form>
</div>

18
frontend/stylesheet/login.css Normal file
View File

@@ -0,0 +1,18 @@
body {
font-size: 20px;
height: 100%;
font-family: "Lucida Console";
}
button {
font-family: "Lucida Console" ;
background-color: #349237;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin: 0 10px; /* Add margin to separate buttons */
}

18
frontend/stylesheet/signup.css Normal file
View File

@@ -0,0 +1,18 @@
body {
font-size: 20px;
height: 100%;
font-family: "Lucida Console";
}
button {
font-family: "Lucida Console" ;
background-color: #349237;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin: 0 10px; /* Add margin to separate buttons */
}

53
index.js
View File

@@ -68,7 +68,7 @@ app.get('/signup', (req, res) => {
if(token){
res.json({Error: 'Already logged in'});
} else
res.sendFile(path.join(__dirname, '/frontend/routes/signup.html'));
res.sendFile(path.join(__dirname, '/frontend/routes/signup.html'));
});
app.get('/auth/token', (req, res) => {
@@ -111,37 +111,34 @@ app.get('/', (req, res) => {
});
io.use((socket, next) => {
const token = socket.handshake.auth.token;
if(token) {
jwt.verify(token, jwtSecret, (err, user) => {
if(err) {
console.log(err);
}
socket.user = user;
next();
});
} else {
next(new Error('Not logged in'));
}
const username = socket.handshake.username;
const token = socket.handshake.auth.token;
if(token) {
jwt.verify(token, jwtSecret, (err, user) => {
if(err) {
console.log(err);
}
socket.user = user;
next();
});
} else {
next(new Error('Not logged in'));
}
})
// socket io connection
io.on('connection', (socket) => {
const username = socket.user.username;
console.log(username + ' connected');
console.log("sessionID: " + socket.handshake.auth.sessionID);
// disconnect event
socket.on('disconnect', () => {
console.log(username + ' have disconnected');
});
// chat message event
socket.on('chat message', (msg) => {
const message = username + ': ' + msg;
console.log(message);
io.emit('chat message', message);
});
const username = socket.user.username;
console.log(username + ' connected');
// disconnect event
socket.on('disconnect', () => {
console.log(username + ' have disconnected');
});
// chat message event
socket.on('chat message', (msg) => {
const message = username + ': ' + msg;
console.log(message);
io.emit('chat message', message);
});
})
// run server
server.listen(port, () => {