anton123
/
Anton.Homework


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
	<input id="nick" type="text"><br>
	<input id="message" type="text"><br>
	<button id="button" type="button" onclick=sendAndCheck()>Отправить</button>
	<main id="main"></main>
<script >

	const jsonPost = (url, data) => {
		return fetch(url, {method: 'POST',body: JSON.stringify(data)})
		.then(result => {
			if (result.status === 200) {
				return result.json()
			} else {
				throw new Error('Error')
			}
		}).catch(error => {console.log(error)})
	}
	async function sendMessage(nick, message){
		jsonPost("http://students.a-level.com.ua:10012", {func: 'addMessage', nick: nick, message: message})
		.then(data => data)
	}
	

	async function getMessages(){
		jsonPost("http://students.a-level.com.ua:10012",{func: "getMessages", messageId: 0})
		.then(data => {
		let dataRevers = data.data.reverse()
		document.getElementById("main").replaceChildren()
			for(let el of dataRevers){
				let div = document.createElement('div')
				div.innerText= `${el.nick}: ${el.message}`
				document.getElementById('main').append(div)
			}	
		})
	}
	getMessages()

	async function sendAndCheck(){
		sendMessage(document.getElementById("nick").value, document.getElementById("message").value)
		await getMessages()
	}

	
	function checkLoop(){
		setInterval(()=>getMessages(),2000)
	}
	checkLoop()
</script>
</body>
</html>