Homework/js/13_async-await-1/chat_socket/app.js

const socket = io('http://192.168.1.20:5000/')
// debugger

btn.addEventListener('click', function () {
   socket.emit('msg', {nick: user.value, message: text.value})
})

socket.on('msg', msg => {
   let messageP = document.createElement('p')

    let message = `${msg.message}`

    const linkRegEx = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/
    const youtubeRegEx = /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?/

    let matchLink = message.match(linkRegEx)
    let matchYoutube = message.match(youtubeRegEx)
    // console.log(matchLink)
    if (matchLink) {
        let [link] = matchLink
        if (link) {
            let newLink = `<a href="${link}" style="color:blue">${link}</a>`
            let newMessage = null
            newMessage = message.replace(link, newLink)
            if (matchYoutube) {
                let [, youtubeKey] = matchYoutube
    
                if (youtubeKey) {
                    messageP.innerHTML = `<b>${msg.nick}</b> <br/>  ${newMessage} <br/> <iframe width="560" height="315" 
                    src="https://www.youtube.com/embed/${youtubeKey}" title="YouTube video player" 
                    frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; 
                    picture-in-picture" allowfullscreen></iframe>`
                } 
            } else {
                messageP.innerHTML = `<b>${msg.nick}</b> <br/>  ${newMessage}`
            }
        }

    } else {
        messageP.innerHTML = `<b>${msg.nick}</b> <br/> ${message}`
    }
   area.append(messageP)
})