|
@@ -0,0 +1,58 @@
|
|
|
+<!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>
|