Skip to content
Snippets Groups Projects
Commit 8f61cfce authored by Alexander Tim Hobelsberger's avatar Alexander Tim Hobelsberger
Browse files

Cookie Key Value Format

parent 2a38a064
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
index.js
+ 9
− 7
View file @ 8f61cfce
...@@ -11,6 +11,7 @@ const registerRoute = require('./routes/register'); ...@@ -11,6 +11,7 @@ const registerRoute = require('./routes/register');
const loginRoute = require('./routes/login'); const loginRoute = require('./routes/login');
const fs = require('fs'); const fs = require('fs');
const activeUsers = new Map(); const activeUsers = new Map();
const authenticationRoute = require('./routes/auth');
//DB Connection //DB Connection
...@@ -50,24 +51,26 @@ io.on('connection', (socket) => { ...@@ -50,24 +51,26 @@ io.on('connection', (socket) => {
// Triggered by emit() from client, when entering the chatroom // Triggered by emit() from client, when entering the chatroom
// SocketID => name // SocketID => name
socket.on('userLogin', function(response) { socket.on('userLogin', function(response) {
console.log("Response: " + response);
activeUsers.set(socketId, response.name); activeUsers.set(socketId, response.name);
console.log("activeUsers: ", activeUsers);
var userArr = Array.from(activeUsers.values()); var userArr = Array.from(activeUsers.values());
console.log(userArr); console.log("UserArr: " +userArr);
socket.emit('updateUserlist', { socket.broadcast.emit('updateUserlist', {
userList : userArr userList : userArr
}); });
}); });
// when disconnecting from chatroom // when disconnecting from chatroom
socket.on('disconnect', (socket) => { socket.on('disconnect', (response) => {
console.log("Respone: " +response.name);
console.log("activeUsers: ", activeUsers);
activeUsers.delete(socketId); activeUsers.delete(socketId);
var userArr = Array.from(activeUsers.values());
console.log("activeUsers: ", activeUsers); console.log("activeUsers: ", activeUsers);
socket.emit('updateUserlist', { socket.broadcast.emit('updateUserlist', {
userList : userArr userList : userArr
}); });
...@@ -96,7 +99,6 @@ io.on('connection', (socket) => { ...@@ -96,7 +99,6 @@ io.on('connection', (socket) => {
}) })
}); });
//Logs message from Socket to Console //Logs message from Socket to Console
......
views/index.html
+ 20
− 13
View file @ 8f61cfce
...@@ -13,6 +13,10 @@ ...@@ -13,6 +13,10 @@
#messages { list-style-type: none; margin: 0; padding: 0; } #messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; } #messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; } #messages > li:nth-child(odd) { background: #efefef; }
#activeUsers { list-style-type: none; margin: 0; padding: 0; }
#activeUsers > li { padding: 0.5rem 1rem; }
#activeUsers > li:nth-child(odd) { background: #efefef; }
</style> </style>
</head> </head>
<body> <body>
...@@ -34,7 +38,7 @@ ...@@ -34,7 +38,7 @@
var input = document.getElementById('input'); var input = document.getElementById('input');
var fileUpload = document.getElementById("file"); var fileUpload = document.getElementById("file");
var username = getUsernameFromCookie(); var username = getCookie("username");
socket.emit('userLogin', { socket.emit('userLogin', {
name : username name : username
...@@ -77,22 +81,18 @@ ...@@ -77,22 +81,18 @@
}); });
socket.on('updateUserlist', function(req) { socket.on('updateUserlist', function(req) {
console.log("Update");
var userList = req.userList; var userList = req.userList;
console.log("req", req.userList[0]); console.log("req", req.userList[0]);
for (var i = 0; i< Object.keys(userList).length; i++) { for (var i = 0; i< Object.keys(userList).length; i++) {
var userItem = document.createElement('li');
var item = document.createElement('li'); userItem.textContent = userList[i];
activeUsers.appendChild(userItem);
item.textContent = userList[i];
activeUsers.appendChild(item);
} }
}); });
function upload(files) { function upload(files) {
var fileObject = files[0]; var fileObject = files[0];
var url = URL.createObjectURL(fileObject); var url = URL.createObjectURL(fileObject);
...@@ -137,12 +137,19 @@ ...@@ -137,12 +137,19 @@
messages.appendChild(audioHTML); messages.appendChild(audioHTML);
}); });
function getUsernameFromCookie() { /* function getUsernameFromCookie() {
var decodedCookie = decodeURIComponent(document.cookie); var decodedCookie = decodeURIComponent(document.cookie);
console.log(decodedCookie); console.log("CookieArr", decodedCookie);
var cArr = decodedCookie.split(":"); var cArr = decodedCookie.split(":");
console.log(cArr);
return cArr[1]; return cArr[1];
} */
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
} }
</script> </script>
......
views/login.html
+ 35
− 7
View file @ 8f61cfce
...@@ -47,10 +47,10 @@ ...@@ -47,10 +47,10 @@
fetch("http://localhost:3000/login", requestOptions) fetch("http://localhost:3000/login", requestOptions)
.then(response => response.json()) .then(response => response.json())
.then((result) => { .then((result) => {
console.log("Login Call")
var token = result.accessToken; var token = result.accessToken;
var status = result.statusCode; var status = result.statusCode;
console.log(result);
document.cookie = `token=${token}`; document.cookie = `token=${token}`;
if (status == 200){ if (status == 200){
authToken(); authToken();
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
function getCookie(name) { function getCookie(name) {
const value = `; ${document.cookie}`; const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`); const parts = value.split(`; ${name}=`);
console.log(parts);
if (parts.length === 2) return parts.pop().split(';').shift(); if (parts.length === 2) return parts.pop().split(';').shift();
} }
...@@ -79,11 +79,39 @@ ...@@ -79,11 +79,39 @@
}; };
fetch("http://localhost:3000/authenticate", requestOptions) fetch("http://localhost:3000/authenticate", requestOptions)
.then(response => response.text()) .then((response) => {
.then(result => console.log(result)) // Weiterleitung an Chatroom, bei erfolreicher Anmeldung (StatusCode == 200)
if (response.status === 200) {
// Rückmeldung an Client
var divErfolgreich = document.createElement('div');
divErfolgreich.textContent = "Erfolgreich eingeloggt! Sie werden in den Chatroom weitergeleitet";
document.body.appendChild(divErfolgreich);
// Speichern des Username in Cookie
setCookie(username.value.trim());
/* socket.emit('userLogin', {
name : username.value.trim()
}); */
// Kurzer Timeout, dass der Client die Nachricht lesen kann
setTimeout(function() {
window.location.href = "/chatroom";
}, 2000);
}
// Bei nicht erfolgreichem Login (StatusCode != 200) werden die Eingabefelder geleert und dem Client eine Rückmeldung gegeben
else {
username.value = "";
password.value = "";
var loginFailed = document.createElement('div');
loginFailed.setAttribute("id", "loginFailed");
loginFailed.textContent = "Login fehlgeschlagen, bitte versuche es erneut";
document.body.appendChild(loginFailed);
}
})
.catch(error => console.log('error', error)); .catch(error => console.log('error', error));
} }
function setCookie(name) {
document.cookie = "username=" + name;
}
</script> </script>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment