social-networking-app/index.html at master · rajatg64/social-networking-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
125
126
<!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; }*/
      #chat{
        height: 500px;
      }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
      #messages { margin-bottom: 40px }
      #userCount {background-color: red; position: relative;}
      #chatWrap{
        float: left;
        border-style: solid;
      }
      #contentWrap{
        display: none;
      }
      #messageForm{
        bottom: 0;

      }
    </style>
    <script src="/socket.io/socket.io.js"></script>
    <!-- <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> -->
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
      $(function (){
        var socket = io();
        var $nickForm = $('#nickForm')
        var $nickError =$('#nickError')
        var $nickname = $('#nickname')
        var $contentWrap = $('#contentWrap')
        var $users = $('#users')
        var $nickWrap = $('#nickWrap')
        var $messageForm = $('#messageForm')

        $nickForm.submit(function (e) {
          e.preventDefault();
          if($nickname.val() != '')
          {
            socket.emit('new user', $nickname.val(), function(data){
              if(data){
                $nickWrap.hide();
                $contentWrap.show();
              }
              else{
                $nickError.html('That username is already taken! Try again')
              }
            })
          }
          else{
            $nickError.html('username invalid !! Try again')
          }

          $nickname.val('');
        })

        socket.on('username', function (data) {
          var html = '';
          for(i=0; i<data.length ; i++)
          {
            html += data[i] + '<br/>'
          }
          $users.html(html);
        })
        socket.emit('connected-users');

        socket.on('connected-users', function (connectedUsers) {
          $('#userCount').text('Online Users : '+connectedUsers);
        })

        $messageForm.submit(function (e){
          e.preventDefault()
          socket.emit('chat message', $('#m').val());
          $('#m').val('');
          return false;
        });

        socket.on('chat message', function(msg){
          if(msg.isReturn){
            $('#messages').append($('<li>').html('<b>' + msg.nick +' '+ msg.data + '</b>'));
          }
          else{
            $('#messages').append($('<li>').html('<b>' + msg.nick +' : ' + '</b>' + msg.data));
          }

          window.scrollTo(0, document.body.scrollHeight);
        });
      });
    </script>
  </head>
  <body>
    <div id="nickWrap">
      <p id="nickError"></p>
      <p>Enter a username : </p>
      <form id="nickForm">
        <input type="text" id ="nickname"/>
        <input type="submit" />
      </form>
    </div>

    <div id="contentWrap">
      <div id="chatWrap">
        <div id="chat">
          <ul id="messages"></ul>
          <div id="userCount"></div>
          <form id="messageForm" action="">
            <fieldset>
              <input id="m" autocomplete="off" />
              <button id="btnSend">Send</button>
          </fieldset>
          </form>
        </div>
      </div>
      <div id="users"></div>
    </div>
</body>
</html>