webChatApp/index.html at master · maddocash/webChatApp · 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
<!doctype html>
<html>

<head>
  <title>Socket.IO chat</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font: 13px Helvetica, Arial;
    }

    form {
      background: #000;
      padding: 3px;
      position: fixed;
      bottom: 0;
      width: 100%;
    }

    form input {
      border: 0;
      padding: 10px;
      width: 90%;
      margin-right: .5%;
    }

    form button {
      width: 9%;
      background: rgb(130, 224, 255);
      border: none;
      padding: 10px;
    }

    #messages {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    #messages li {
      padding: 5px 10px;
    }

    #messages li:nth-child(odd) {
      background: #eee;
    }
  </style>
</head>
<script src="/socket.io/socket.io.js"></script>

<body>
  <input id="name" placeholder="Enter nickname here" type="text" />
  <p>
    Online Users
  </p>
  <ul id="connectedUsers"></ul>
  <div id="justConnected"></div>
  <ul id="messages"></ul>
  <div id="whoIsTyping"></div>
  <form id="form1">
    <input id="m" type="text" autocomplete="off" />
    <input type="submit" />
  </form>

  <!-- - Broadcast a message to connected users when someone connects or disconnects
- Add private messaging
- Share your improvements! -->


  <script>
    let socket = io();
    let name = ''
    document.getElementById('name').addEventListener('change', (evt)=>{
      name = evt.target.value;
    })
    document.getElementById('m').addEventListener('keyup', ()=>{
      socket.emit('whoIsTyping', name)
    })
    document.getElementById('form1').addEventListener('submit', function(evt) {
      evt.preventDefault();
      let newMessage = document.getElementById('m').value;
      socket.emit('chat message', newMessage)
      document.getElementById('messages').appendChild(document.createElement('li')).appendChild(document.createTextNode(newMessage))
    })
    socket.on('chat message', (msg) => {
      document.getElementById('messages').appendChild(document.createElement('li')).appendChild(document.createTextNode(msg))
    })
    socket.on('whoIsTyping', (id) => {
      document.getElementById('whoIsTyping').innerText = `${id || 'other user'} is typing`
      setTimeout(() => document.getElementById('whoIsTyping').innerText = '',1000)
    })
    socket.on('justConnected', (id) => {
      document.getElementById('justConnected').innerText = `${id} has been connected`
      setTimeout(() => document.getElementById('justConnected').innerText = '',2000)
    })
    socket.on('connectedUsers', (users) => {
      users.map(i => document.getElementById('connectedUsers').appendChild(document.createElement('li')).appendChild(document.createTextNode(i)))
    })
  </script>
</body>

</html>