|
|
@@ -0,0 +1,102 @@
|
|
|
+//////////////////////////////////Chat Homework
|
|
|
+let nextMessageId = 0;
|
|
|
+let arrMonthName=['Января','Февраля','Марта','Апреля','Мая','Июня','Июля','Августа','Сентября','Октября','Ноября','Декабря'];
|
|
|
+let currentDate;
|
|
|
+
|
|
|
+let wrapperMessages = document.querySelector(".wrapper-messages");
|
|
|
+let inputNick = document.querySelector(".nick-inp");
|
|
|
+let inputMes = document.querySelector(".message-inp");
|
|
|
+let btnImg = document.querySelector("img");
|
|
|
+let url = "http://students.a-level.com.ua:10012";
|
|
|
+
|
|
|
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms));
|
|
|
+
|
|
|
+function createMessage (parent,{nick, message, timestamp}){
|
|
|
+ let hours = new Date(timestamp).getHours();
|
|
|
+ let minutes = new Date(timestamp).getMinutes();
|
|
|
+ let date = new Date(timestamp).getDate();
|
|
|
+ let month = new Date(timestamp).getMonth();
|
|
|
+ let year = new Date(timestamp).getFullYear();
|
|
|
+ let fullDate = `${date} ${arrMonthName[month]} ${year}`
|
|
|
+
|
|
|
+ if(currentDate !== fullDate){
|
|
|
+ let divDate = document.createElement('div');
|
|
|
+ divDate.classList.add("mes-date");
|
|
|
+ parent.prepend(divDate);
|
|
|
+ divDate.innerHTML = fullDate;
|
|
|
+ currentDate = fullDate;
|
|
|
+ }
|
|
|
+
|
|
|
+ let divWrap = document.createElement('div');
|
|
|
+ divWrap.classList.add("wrap-message");
|
|
|
+ parent.prepend(divWrap);
|
|
|
+
|
|
|
+ let divNick = document.createElement('div');
|
|
|
+ divNick.classList.add("nick");
|
|
|
+ divWrap.append(divNick);
|
|
|
+ divNick.innerHTML = nick;
|
|
|
+
|
|
|
+ let divMes = document.createElement('div');
|
|
|
+ divMes.classList.add("message");
|
|
|
+ divWrap.append(divMes);
|
|
|
+ divMes.innerHTML = message;
|
|
|
+
|
|
|
+ let divTime = document.createElement('div');
|
|
|
+ divTime.classList.add("mes-time");
|
|
|
+ divMes.append(divTime);
|
|
|
+ divTime.innerHTML = `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}`;
|
|
|
+}
|
|
|
+
|
|
|
+async function jsonPost(url,data){
|
|
|
+ let response = await fetch(url, {
|
|
|
+ method : 'POST',
|
|
|
+ body : JSON.stringify(data),
|
|
|
+ headers : {
|
|
|
+ // 'Content-Type' : 'application/json',
|
|
|
+ // 'Accept' : 'application/json',
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(response.status === 200){
|
|
|
+ let json = await response.json();
|
|
|
+ return json
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+async function sendMessage(nick, message){
|
|
|
+ if (nick.length >= 3 && message.length >= 3){
|
|
|
+ await jsonPost(url, {func: "addMessage", nick: nick, message: message});
|
|
|
+ }
|
|
|
+}
|
|
|
+async function getMessages(){
|
|
|
+ let data = await jsonPost(url, {func: "getMessages", messageId: nextMessageId});
|
|
|
+ nextMessageId = data.nextMessageId;
|
|
|
+ data.data.forEach(elem=> {
|
|
|
+ createMessage(wrapperMessages, elem)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+async function sendAndCheck(){
|
|
|
+ await sendMessage(inputNick.value, inputMes.value);
|
|
|
+ inputMes.value = '' /// оставляем только ник
|
|
|
+ await getMessages();
|
|
|
+ btnImg.onclick = onClick; //// снова вешаем клик
|
|
|
+}
|
|
|
+
|
|
|
+getMessages();
|
|
|
+
|
|
|
+async function checkLoop(){
|
|
|
+ while(true){
|
|
|
+ await delay(3000);
|
|
|
+ await getMessages();
|
|
|
+ // console.log('3000')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+checkLoop()
|
|
|
+
|
|
|
+function onClick(){
|
|
|
+ btnImg.onclick = null //// для исключения повторного клика
|
|
|
+ sendAndCheck();
|
|
|
+}
|
|
|
+
|
|
|
+btnImg.onclick = onClick;
|
