Added chatting functionality
Luna
parent
b5e9238659
commit
a7ab390b32
|
|
@ -1,7 +1,5 @@
|
||||||
streamchat.code-workspace
|
streamchat.code-workspace
|
||||||
chat.html
|
|
||||||
chat.js
|
|
||||||
index.html
|
index.html
|
||||||
chat.css
|
|
||||||
stream.css
|
stream.css
|
||||||
assets/
|
assets/
|
||||||
|
todo.txt
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
html {
|
||||||
|
background: #F7A8B8;
|
||||||
|
text-align: center;
|
||||||
|
font-family: "Lucida Console", "Courier New", monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
padding: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatbox {
|
||||||
|
background-color: white;
|
||||||
|
padding: 1rem;
|
||||||
|
box-shadow: 10px 10px 10px black;
|
||||||
|
width: 40rem;
|
||||||
|
height: 40rem;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#innerchatbox {
|
||||||
|
background-color: rgba(60, 60, 60, .75);
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loggeduser {
|
||||||
|
padding-top: 1%
|
||||||
|
}
|
||||||
|
|
||||||
|
#error {
|
||||||
|
padding-top: 2.5%;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Chat Room</title>
|
||||||
|
<meta name="author" content="Luna">
|
||||||
|
<meta name="description" content="Maya's Stream Chat">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="stylesheet" href="chat.css">
|
||||||
|
<link rel="icon" href="">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>Welcome to the chat!</h1>
|
||||||
|
|
||||||
|
<div id="chatbox">
|
||||||
|
|
||||||
|
<div id="innerchatbox">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<input type="text" id="message" name="message" required>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="loggeduser"></div>
|
||||||
|
|
||||||
|
<script src="chat.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
// VARIABLES
|
||||||
|
let date = '2021-07-22'
|
||||||
|
let messageCount = 0;
|
||||||
|
let username = localStorage.getItem('username');
|
||||||
|
const form = document.querySelector('form');
|
||||||
|
document.querySelector("#loggeduser").innerHTML = `You are logged in as ${username}`
|
||||||
|
|
||||||
|
// SEND A MESSAGE
|
||||||
|
|
||||||
|
// GRABS MESSAGE FROM FORM & SENDS
|
||||||
|
form.addEventListener("submit", async function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
const formData = new FormData(form);
|
||||||
|
|
||||||
|
formMessage = formData.get('message');
|
||||||
|
|
||||||
|
sendMessage()
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
//SEND MESSAGE FETCH FUNCTION
|
||||||
|
|
||||||
|
async function sendMessage() {
|
||||||
|
sendMessageInfo = { "name": username, "body": formMessage, "date": date }
|
||||||
|
fetch('/api/message/send', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(sendMessageInfo),
|
||||||
|
})
|
||||||
|
form.reset()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// RECIEVE MESSAGES
|
||||||
|
|
||||||
|
let messageUpdate = window.setInterval(fetchMessages, 500);
|
||||||
|
|
||||||
|
async function fetchMessages() {
|
||||||
|
const response = await fetch('/api/message/messages.json');
|
||||||
|
const recievedMessages = await response.json();
|
||||||
|
document.getElementById("innerchatbox").innerHTML = ""
|
||||||
|
|
||||||
|
for (const message of recievedMessages) {
|
||||||
|
printText(message.user.bold() + ": " + message.body);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (recievedMessages.length != messageCount) {
|
||||||
|
let scroll = document.getElementById("innerchatbox");
|
||||||
|
scroll.scrollTop = scroll.scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
messageCount = recievedMessages.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// FUNCTION TO PRINT MESSAGES IN THE CHAT BOX
|
||||||
|
|
||||||
|
function printText(text) {
|
||||||
|
let p = document.createElement("p");
|
||||||
|
const div = document.getElementById("innerchatbox");
|
||||||
|
div.appendChild(p)
|
||||||
|
p.innerHTML = text
|
||||||
|
}
|
||||||
5
login.js
5
login.js
|
|
@ -5,8 +5,6 @@ let uname = document.querySelector('#uname').value;
|
||||||
let pin = document.querySelector('#pin').value;
|
let pin = document.querySelector('#pin').value;
|
||||||
const form = document.querySelector('form');
|
const form = document.querySelector('form');
|
||||||
|
|
||||||
const cookies = document.cookie //TEMP
|
|
||||||
|
|
||||||
// SUBMIT FORM FUNCTION. AND FETCH USERNAME AND PIN FROM API.
|
// SUBMIT FORM FUNCTION. AND FETCH USERNAME AND PIN FROM API.
|
||||||
|
|
||||||
form.addEventListener("submit", async function (event) {
|
form.addEventListener("submit", async function (event) {
|
||||||
|
|
@ -33,11 +31,10 @@ function login() {
|
||||||
console.log('You have logged in!')
|
console.log('You have logged in!')
|
||||||
document.querySelector("#username").innerHTML = `${uname}`
|
document.querySelector("#username").innerHTML = `${uname}`
|
||||||
document.querySelector("#errormessage").innerHTML = ''
|
document.querySelector("#errormessage").innerHTML = ''
|
||||||
|
localStorage.setItem("username", `${uname}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
function incorrectLogin() {
|
function incorrectLogin() {
|
||||||
console.log('Incorrect Login!')
|
console.log('Incorrect Login!')
|
||||||
document.querySelector("#errormessage").innerHTML = 'Incorrect Login.'
|
document.querySelector("#errormessage").innerHTML = 'Incorrect Login.'
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(cookies) //TEMP
|
|
||||||
Loading…
Reference in New Issue