`; } var mockUpForMyMedia = (url) => { return `

`; } var mockUpForMsg = (msgText) => { return `

${msgText}

`; } var mockUpForMyMsg = (msgText) => { return `

${msgText}

`; } var mockUpForInfoLine = (lineText) => { return `

${lineText}

`; } var mockUpForName = (name) => { return `

${name}

`; } var mockUpForMyName = (name) => { return `

${name}

`; } //socket connection var connectionOptions = { "force new connection" : true, "reconnectionAttempts": "Infinity", "transports" : ["websocket"] }; var socket = io(socketUrl, connectionOptions); //send msg const sendMsg = () => { const input_field = document .getElementsByClassName("input-field")[0]; if(input_field.innerHTML .replace(/\s+/g, '') != ""){ var msgText = input_field.innerHTML .split("<").join("<"); socket.emit('chat message', {msgText, msgType}); } if(selectMediaEnabled == true){ document .getElementsByClassName("select-media")[0] .innerHTML = ""; input_field.placeholder = "Type simething..."; msgType = "msg"; selectMediaEnabled = false; } input_field.innerHTML = ""; } socket.on('chat message', function(data){ const chat_content = document .getElementsByClassName("chat-content")[0]; lastMsgId = msgIdNow; msgIdNow = data.sid; if(lastMsgId != msgIdNow){ if(sessionID == data.sid){ chat_content .innerHTML += mockUpForMyName(sessionID); }else { chat_content .innerHTML += mockUpForName(data.sid); } } if(data.sid == sessionID){ if(data.msg.msgType == "msg"){ chat_content .innerHTML += mockUpForMyMsg(data.msg.msgText .split("<").join("<")); }else if(data.msg.msgType == "media"){ chat_content .innerHTML += mockUpForMyMedia(data.msg.msgText .split("<").join("<")); } }else { if(data.msg.msgType == "msg"){ chat_content .innerHTML += mockUpForMsg(data.msg.msgText .split("<").join("<")); }else if(data.msg.msgType == "media"){ chat_content .innerHTML += mockUpForMedia(data.msg.msgText .split("<").join("<")); } } if(scrollEnabled == true){ chat_content .scrollTo(0, chat_content.scrollHeight); } }); socket.on('connect', function(){ if(document .getElementsByClassName("loader-layout")[0]){ document .getElementsByClassName("loader-layout")[0] .outerHTML = ""; } sessionID = socket.io.engine.id; const side_img = document .getElementsByClassName("side-img")[0]; side_img .src = `https://joeschmoe.io/api/v1/${sessionID}`; const side_name = document .getElementsByClassName("side-name")[0]; side_name .innerHTML = sessionID; }); socket.on('socket id', function(sid){ if(sid == sessionID){ var msg = sid + " [ME] has connected ✔️"; }else { var msg = sid + " has connected ✔️"; } const chat_content = document .getElementsByClassName("chat-content")[0]; chat_content.innerHTML += mockUpForInfoLine(msg); }); socket.on('disconnect', function(soid){ var msg = soid + " has disconnected ❌"; const chat_content = document .getElementsByClassName("chat-content")[0]; chat_content.innerHTML += mockUpForInfoLine(msg); }); const chatScroll = (el) => { var st = el.pageYOffset || el.scrollTop; if (st > lastScrollTop){ // downscroll code } else { // upscroll code scrollEnabled = false; } lastScrollTop = st <= 0 ? 0 : st; if(Math .ceil(el .scrollHeight - el .scrollTop) <= el .clientHeight){ scrollEnabled = true; } } var selectMedia = (el) => { const input_field = document .getElementsByClassName("input-field")[0]; if(selectMediaEnabled == false){ el .innerHTML = ""; input_field.placeholder = "Enter image URL..."; msgType = "media"; selectMediaEnabled = true; }else { el .innerHTML = ""; input_field.placeholder = "Type simething..."; msgType = "msg"; selectMediaEnabled = false; } } var imgError = (el) => { el.src = "https://cdn.pixabay.com/photo/2018/01/04/15/51/error-3060993_1280.png"; } var inputFocus = () => { //user is typing setTimeout(() => { const chat_content = document .getElementsByClassName("chat-content")[0]; chat_content .scrollTo(0, chat_content.scrollHeight); }, 500); } var inputBlur = () => { //user stoped typing }

WEB APP [Socket io Chat]💨💬