chat-web-app/index.html at main · developer-ramesh/chat-web-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<html>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/style.css" />

<body>

  <div id="room_wrapper" style="text-align: center;border: 2px solid #0b0b0b;border-radius: 3px;width: 400px;padding: 20px;margin-left:
    34%;">
    <input type="text" id="uname" placeholder="Your Name" autocomplete="Off" style="height: 30px;padding: 5px;"><br>
    <input type="text" id="uroom" placeholder="Room Name" autocomplete="Off" style="height: 30px;padding: 5px;margin-top: 10px;"><br><br>
    <input type="submit" value="Create Room" id="submitmsg" class="room">
  </div>

  <div id="wrapper" style="display: none;">
    <div id="menu">
      <p class="welcome">Welcome, <b id="userName"></b></p>
    </div>

    <div id="chatbox">
      <ul id="messages"></ul>
    </div>

    <form>
      <input name="usermsg" type="text" id="usermsg" autocomplete="Off" required />
      <input name="submitmsg" type="submit" id="submitmsg" value="Send" />
    </form>
  </div>

</body>

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script>

  $('.room').click(function () {
    if (($('#uname').val() != '') && ($('#uroom').val() != '')) {
      $('#wrapper').show();
      $('#room_wrapper').hide('slow');
      userName = $('#uname').val();
      room = $('#uroom').val();


      //let userName = prompt("What's your name");
      //let room = prompt("Room name");

      $('#userName').text(userName);

      let ID = "";
      var socket = io();
      //send event that user has joined room
      socket.emit("join room", { username: userName, roomName: room });

      //receive data from server.
      socket.on('send data', (data) => {
        ID = data.id; //ID will be used later
        console.log(" my ID:" + ID);
      })


      $("#usermsg").focus();
      //when form is submitted, capture the input value and then send it to server
      document
        .getElementsByTagName("form")[0]
        .addEventListener("submit", function (event) {
          event.preventDefault();
          socket.emit("chat message", {
            value: document.getElementById("usermsg").value,
            user: userName,
          });
          document.getElementById("usermsg").value = "";
        });


      // Picks up the data emitted by the server and displays the message to the webpage
      socket.on("chat message", (data) => {
        console.log(data.data.user + ": " + data.id);
        displayMessage(data);
      });


      function displayMessage(data) {
        let authorClass = "";
        let divClass = ""
        //verify that the user ID and the message sent ID is similar
        if (data.id === ID) {
          console.log("This person has sent a message")
          authorClass = "me";
          divClass = "myDiv";
        } else {
          authorClass = "you";
          divClass = "yourDiv";
        }
        const div = document.createElement("div");
        div.className = divClass;
        const li = document.createElement("li");
        const p = document.createElement("p");
        div.innerHTML =
          '<p class="' +
          authorClass +
          '">' +
          data.data.user + ', ' + moment().format("hh:mm A") +

          "</p>" +
          '<p class="message"> ' +
          data.data.value +
          "</p>";
        div.appendChild(p);
        li.appendChild(div);

        document.getElementById("messages").appendChild(li);

        window.scrollTo(0, document.body.scrollHeight); //scroll to the bottom
      }


    }
  });

</script>

</html>