index.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>
  5. Static File Index.HTML
  6. </title>
  7. <script src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js'></script>
  8. </head>
  9. <body>
  10. <div id='formContainer'>
  11. <input id="nick" placeholder="nick" value="nick">
  12. <input id="message" placeholder="text" value="msg">
  13. <button id="btn">Send</button>
  14. </div>
  15. <script>
  16. const socket = io()
  17. socket.on('msg', msg => {
  18. let p = document.createElement('p');
  19. p.innerHTML = `${msg.nick} : ${msg.message}`;
  20. document.body.appendChild(p);
  21. console.log(p);
  22. getyoutubeRegex(msg.message);
  23. });
  24. function getyoutubeRegex(adressVideo){
  25. const youtubeRegex = /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?/;
  26. const matchStr = adressVideo.match(youtubeRegex);
  27. if(matchStr){
  28. const iframeNew = document.createElement("iframe");
  29. iframeNew.setAttribute("src", `https://www.youtube.com/embed/${matchStr[1]}`);
  30. iframeNew.style.width = "300px";
  31. iframeNew.style.height = "250px";
  32. document.body.appendChild(iframeNew);
  33. }
  34. }
  35. btn.onclick = () => {
  36. socket.emit('msg', {nick: nick.value, message: message.value});
  37. } ;
  38. </script>
  39. </body>
  40. </html>