Natarov
/
HomeWork


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <input type="text" id="nick">
    <input type="text" id="mess">
    <button id="btn">submit</button>
    <div id="chat-history">

    </div>
    <script>
        function jsonPost(url, data) {
        return new Promise((resolve, reject) => {
        var x = new XMLHttpRequest();   
        x.onerror = () => reject(new Error('jsonPost failed'))
        //x.setRequestHeader('Content-Type', 'application/json');
        x.open("POST", url, true);
        x.send(JSON.stringify(data))

        x.onreadystatechange = () => {
            if (x.readyState == XMLHttpRequest.DONE && x.status == 200){
                resolve(JSON.parse(x.responseText))
            }
            else if (x.status != 200){
                reject(new Error('status is not 200'))
            }
        }
    })
}
let btn = document.querySelector('button')
let myNick = document.querySelector('#nick')
let myMess = document.querySelector('#mess')
let chatHistory = document.querySelector('#chat-history')
btn.onclick = () => {
    let nickValue = myNick.value;
    let myMessValue = myMess.value;
    
    jsonPost("http://students.a-level.com.ua:10012", {
        func: 'addMessage', 
        nick: `${nickValue}`, 
        message: `${myMessValue}`
    })
    myMessValue = '';
}
    jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: 2900}).then(r => {
        for (let i in r.data) {
            chatHistory.innerHTML += `${r.data[i].nick}: ${r.data[i].message} </br>` 
        }
    })
    </script>
    
</body>
</html>