|
|
@@ -0,0 +1,45 @@
|
|
|
+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)
|
|
|
+})
|
|
|
+
|
|
|
+
|
ivar_n