I'm creating a simple chat in go. But I'm struggling with the CSS.
It should show all the messages. But when it reaches the bottom of the message screen. It doesn't show all the messages
Like this
I put the html, css and javascript together because I just need a simple screen for testing. But it should bring all the messages.
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CodeChallenge</title>
<style>
.form {
position: fixed;
left: 0;
bottom: 0;
right: 0;
background-color: #f9f9f9;
border-top: 1px solid #78b8ef;
padding: 5px 10px;
}
.form .placeholder,
.form .input-message,
.form button {
display: block;
margin-bottom: 5px;
}
.form .input-message {
padding: 7px;
border: 1px solid #ecebeb;
border-radius: 4px;
width: -webkit-fill-available;
}
.form button {
width: 100%;
color: white;
padding: 7px 10px;
border-radius: 4px;
background-color: #78b8ef;
border: 1px solid #5a9ed8;
}
.container {
margin-bottom: 50px;
}
.container p {
display: block;
}
</style>
</head>
<body>
<div class="container"></div>
<div class="form">
<form onsubmit="app.doSendMessage(); return false;">
<div class="placeholder">
<label>Hello <b class="username"></b>. Say something:</label>
</div>
<input class="input-message" type="text" placeholder="Enter message">
<button type="submit">Send</button>
</form>
</div>
<script type="application/javascript">
var app = {}
app.ws = undefined
app.container = undefined
app.print = function (message) {
let el = document.createElement("p")
el.innerHTML = message
app.container.append(el)
}
app.doSendMessage = function () {
var messageRaw = document.querySelector('.input-message').value
app.ws.send(JSON.stringify({
Message: messageRaw
}));
var message = '<b>me</b>: ' + messageRaw
app.print(message)
}
// app.init = function () {
// if (!(window.WebSocket)) {
// alert('Your browser does not support WebSocket')
// return
// }
//
// const Http = new XMLHttpRequest();
// const url='http://localhost:8081/message?limit=50';
// Http.open("GET", url);
// Http.send(null);
//
// if (Http.status === 200) {
// allFifty = JSON.parse(Http.responseText)
// console.log(allFifty)
// allFifty.forEach(obj => {
// console.log(obj.From)
// console.log(obj.Message)
// let message = '<b>' + obj.From + '</b>: ' + obj.Message
// app.print(message)
// })
// }
//
// app.init2()
// }
app.init = function () {
if (!(window.WebSocket)) {
alert('Your browser does not support WebSocket')
return
}
var name = getCookie("username");
document.querySelector('.username').innerText = name
app.container = document.querySelector('.container')
// fetch('http://localhost:8081/message?limit=50')
// .then(response=>response.json())
// .then(data=>{
// console.log(data)
// data.forEach(obj => {
// console.log(obj.From)
// console.log(obj.Message)
// let message = '<b>' + obj.From + '</b>: ' + obj.Message
// app.print(message)
// })})
app.ws = new WebSocket("ws://localhost:8081/socket/ws?username=" + name)
app.ws.onopen = function () {
fetch('http://localhost:8081/message?limit=50')
.then(response=>response.json())
.then(data=>{
console.log(data)
data.sort(function(a,b){
// Turn your strings into dates, and then subtract them
// to get a value that is either negative, positive, or zero.
return new Date(a.RegisterDate) - new Date(b.RegisterDate);
});
console.log(data)
data.forEach(obj => {
// console.log(obj.From)
// console.log(obj.Message)
let message = '<b>' + obj.From + '</b>: ' + obj.Message + ' ' + obj.RegisterDate
app.print(message)
})})
.then(() => {
var message = '<b>me</b>: connected'
app.print(message)
}
)
}
app.ws.onmessage = function (event) {
var res = JSON.parse(event.data)
var message = ''
if (res.Type === 'New User') {
message = 'User <b>' + res.From + '</b>: connected'
} else if (res.Type === 'Leave') {
message = 'User <b>' + res.From + '</b>: disconnected'
} else {
message = '<b>' + res.From + '</b>: ' + res.Message
}
app.print(message)
}
}
window.onload = app.init
function getCookie(cName) {
const name = cName + "=";
const cDecoded = decodeURIComponent(document.cookie); //to be careful
console.log(cDecoded)
const cArr = cDecoded.split('; ');
console.log(cDecoded)
let res;
cArr.forEach(val => {
if (val.indexOf(name) === 0) res = val.substring(name.length);
})
return res
}
</script>
</body>
</html>