Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
serg1557733
/
Simple-Chat-on-SOCKET-IO
Obserwuj 1
Polub 0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

first step chat working

serg155alternate 2 lat temu
commit
5c9f151644
4 zmienionych plików z 141 dodań i 0 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 33 0
      index.html
  2. 42 0
      script.js
  3. 9 0
      socket/socket.io.js
  4. 57 0
      style.css

+ 33 - 0
index.html
Wyświetl plik 

@@ -0,0 +1,33 @@
 
+<!DOCTYPE html>
 
+<html>
 
+
 
+<head>
 
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
+    <title>Simple Chat on SOCKET IO</title>
 
+    <link rel="stylesheet" href="style.css">
 
+    <script src="./socket/socket.io.js"></script>
 
+</head>
 
+
 
+<body>
 
+    <div class="container">
 
+        <h2>Simple Chat on SOCKET IO</h2>
 
+        <div class="wrapper">
 
+            <input type="text" id='nickname'>
 
+            <label for="nickname">Enter NickName</label>
 
+            <div>
 
+                <input type="text" id='message'>
 
+                <label for="nickname">Enter your message</label>
 
+                <button class='btn'>Send message</button>
 
+            </div>
 
+        </div>
 
+        <div id="answer"></div>
 
+
 
+
 
+
 
+
 
+    </div>
 
+    <script src="script.js"></script>
 
+
 
+</body>
 
+
 
+</html>

+ 42 - 0
script.js
Wyświetl plik 

@@ -0,0 +1,42 @@
 
+const socket = io('http://192.168.1.20:5000/');
 
+
 
+let msgObj = {
 
+    nick: '',
 
+    message: ''
 
+}
 
+
 
+
 
+let btn = document.querySelector('.btn');
 
+btn.addEventListener('click', () => {
 
+    msgObj.nick = nickname.value;
 
+    msgObj.message = message.value;
 
+    sendMessage(msgObj)
 
+});
 
+
 
+socket.on('msg', msg => readMessage(msg));
 
+
 
+function sendMessage(obj) {
 
+    socket.emit('msg', obj);
 
+    message.value = '';
 
+}
 
+
 
+
 
+let regYoutube = /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?/; //regExp for YouTube video
 
+
 
+function readMessage(msg) {
 
+    let spanUserName = document.createElement('div');
 
+    let spanMessages = document.createElement('div');
 
+
 
+    spanUserName.style.backgroundColor = 'yellow';
 
+    spanMessages.innerHTML += `${msg.nick} `;
 
+
 
+    if (msg.message.match(regYoutube)) {
 
+        console.log(`https://www.youtube.com/embed/${msg.message.match(regYoutube)[1]}`) // get youtube key
 
+        spanMessages.innerHTML += `<iframe width="560" height="315" src="https://www.youtube.com/embed/${msg.message.match(regYoutube)[1]}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
 
+    } else {
 
+        spanMessages.innerHTML += `  Send message : ${msg.message}`;
 
+    }
 
+
 
+    answer.prepend(spanMessages);
 
+    answer.prepend(spanUserName);
 
+}

Plik diff jest za duży
+ 9 - 0
socket/socket.io.js


+ 57 - 0
style.css
Wyświetl plik 

@@ -0,0 +1,57 @@
 
+*, html {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+.container {
 
+    position: relative;
 
+    max-width: 1140px;
 
+    min-height: 100vh;
 
+    margin: 0 auto;
 
+    padding: 50px;
 
+    background-color:azure;
 
+}
 
+h2 {
 
+    text-align: center;
 
+    margin-bottom: 10px;
 
+}
 
+.wrapper{
 
+    padding: 15px;
 
+    margin: 0 auto;
 
+    border: 1px solid rgb(144, 148, 90);
 
+    border-radius: 10px;
 
+    margin-bottom: 10px;
 
+    width: 550px;
 
+}
 
+input {
 
+    margin-bottom: 10px;
 
+    border-radius: 5px;
 
+    padding: 2px;
 
+}
 
+#formContainer {
 
+    display: flex;
 
+    margin: 0 auto;
 
+}
 
+#answer {
 
+    margin: 0 auto;
 
+    background-color: antiquewhite;
 
+    border: 2px solid black;
 
+    border-radius: 10px;
 
+    width: 560px;
 
+}
 
+#message {
 
+    
+    background-color:rgb(252, 250, 248);
 
+}
 
+.btn {
 
+    height: 20px;
 
+    padding:0 8px;
 
+    margin-bottom: 10px;
 
+    margin-left: 10px;
 
+    background-color: rgb(243, 219, 167);
 
+    border-radius: 10px;
 
+}
 
+span {
 
+    width: 500px;
 
+    padding: 5px;
 
+    border-radius:10px;
 
+}