Chatroom.html

gistfile1.txt

<div class="container" id="to-close" style="display:block">
        <div class="container" id = "chat-out-box" style="height:300px;width:95%;background-color:#ffffff;overflow: scroll">
          <ul class="list-group" id="all-messages" >
          </ul>
        </div>
        <form class="form row" id = "chat-form" style="margin-top:30px;margin-left:15px;margin-bottom:10px;" id = "chat_message" method="POST" action="http://tripubproject.web.engr.illinois.edu/411SP17/frontend/trip/createTrip.php?<?php echo "planid=$the_plan_id"?>">
          <input type="text" class="form-control col-10" id="messege_box" placeholder="Instant messeges?" name = "place">

          <button type="submit" id="searchBtn" class="btn btn-primary">Send</button>
        </form>
        <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
        <script>
          $(function () {
            var username =
'<?php echo $_SESSION['user_name'];?>'
            if (username == ''){
              username = 'Anonymous User'
            }
            var roomname = '<?php echo $the_plan_id;?>'
            var socket = io('http://tripubproject.web.engr.illinois.edu:3000/')
            $('#chat-form').submit(function(){
              if($('#messege_box').val() != ''){
                socket.emit('chat message', {'msg': username+': '+$('#messege_box').val(), 'room': roomname})
                $('#messege_box').val('')
              }
              return false
            })
            socket.on('connect', function() {
               socket.emit('room', roomname);
            });
            socket.on('chat message', function(msg){
              $('#all-messages').append($('<li>').attr('class', 'list-group-item').text(msg))
              var outbox = document.getElementById("chat-out-box");
              outbox.scrollTop = outbox.scrollHeight;
              // nmsg.text(msg)
              // nmsg.className += "list-group-item"
            })
          })
        </script>
    </div>
  </div>