|
|
@@ -0,0 +1,114 @@
|
|
|
+// Chat Homework
|
|
|
+
|
|
|
+const nick = document.getElementById('nick');
|
|
|
+const message = document.getElementById('message');
|
|
|
+const form = document.getElementById('chatForm');
|
|
|
+const chat = document.getElementById('chat');
|
|
|
+let id = 0;
|
|
|
+
|
|
|
+async function jsonPost(body) {
|
|
|
+ try {
|
|
|
+ const settings = {
|
|
|
+ method: 'POST',
|
|
|
+ body: JSON.stringify(body),
|
|
|
+ };
|
|
|
+ const data = await fetch('http://students.a-level.com.ua:10012', settings);
|
|
|
+ return data.json();
|
|
|
+ } catch (e) {
|
|
|
+ console.error(e);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+async function sendMessage(nick, message) {
|
|
|
+ try {
|
|
|
+ const body = {
|
|
|
+ func: 'addMessage',
|
|
|
+ nick,
|
|
|
+ message,
|
|
|
+ };
|
|
|
+ return await jsonPost(body);
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+async function getMessage() {
|
|
|
+ try {
|
|
|
+ const body = {
|
|
|
+ func: 'getMessages',
|
|
|
+ nextMessageId: id,
|
|
|
+ };
|
|
|
+ const { data, nextMessageId } = await jsonPost(body);
|
|
|
+
|
|
|
+ data.slice(id).forEach(obj => {
|
|
|
+ const containerMsg = document.createElement('div');
|
|
|
+ containerMsg.classList.add('containerMsg');
|
|
|
+
|
|
|
+ const containerNick = document.createElement('div');
|
|
|
+ containerNick.textContent = obj.nick;
|
|
|
+ containerNick.classList.add('containerNick');
|
|
|
+
|
|
|
+ const containerMessage = document.createElement('div');
|
|
|
+ containerMessage.textContent = obj.message;
|
|
|
+ containerMessage.classList.add('containerMessage');
|
|
|
+
|
|
|
+ const containerTimestamp = document.createElement('div');
|
|
|
+ const date = new Date(obj.timestamp);
|
|
|
+ const years = date.getFullYear();
|
|
|
+ const mouths = date.getMonth();
|
|
|
+ const hours = date.getHours();
|
|
|
+ const minutes = date.getMinutes();
|
|
|
+ const seconds = date.getSeconds();
|
|
|
+ containerTimestamp.textContent = `${years}:${mouths}:${hours}:${minutes}:${seconds}`;
|
|
|
+ containerTimestamp.classList.add('containerTimestamp');
|
|
|
+
|
|
|
+ containerMsg.append(containerNick, containerMessage, containerTimestamp);
|
|
|
+ chat.append(containerMsg);
|
|
|
+ id = nextMessageId;
|
|
|
+ });
|
|
|
+ } catch (e) {
|
|
|
+ console.error(e);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+async function sendAndCheck(e) {
|
|
|
+ try {
|
|
|
+ e.preventDefault();
|
|
|
+ if (!nick.value || !message.value) return;
|
|
|
+ await sendMessage(nick.value, message.value);
|
|
|
+ await getMessage();
|
|
|
+ scrollTo(0, document.body.scrollHeight);
|
|
|
+ } catch (e) {
|
|
|
+ console.error(e);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+form.addEventListener('submit', sendAndCheck);
|
|
|
+
|
|
|
+(async function checkLoop(delay) {
|
|
|
+ setInterval(getMessage, delay);
|
|
|
+})(3000);
|
|
|
+
|
|
|
+function jsonMessageXMLHttpRequest(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'));
|
|
|
+ }
|
|
|
+ };
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// jsonMessageXMLHttpRequest('http://students.a-level.com.ua:10012', {
|
|
|
+// func: 'addMessage',
|
|
|
+// nick: 'Ado',
|
|
|
+// message: 'XMLHttpRequest',
|
|
|
+// }).then(data => console.log(data)).catch(e => console.log(e));
|
