mentos1386/index.html

## index.html
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
    <script>
        $(function(){
            var iosocket = io.connect('http://localhost:4010');
            var room = 'message';
            var log = $('#log');

            var TYPES = {
              PRIMARY: 'primary',
              SECONDARY: 'secondary',
              SUCCESS: 'success',
              DANGER: 'danger',
              WARNING: 'warning',
              INFO: 'info',
            };

            var DEFAULT_ROOMS = [{
              room: 'messages',
            },{
              room: 'exception',
              type: TYPES.DANGER,
            }];

            function appendToLog(message, type) {
              var classes = 'list-group-item';

              if (type) {
                classes += ` list-group-item-${type}`
              }

              log.append(`<li class="${classes}">${message}</li>`)
            }

            function processMessage(room, data, type) {
              try {
                data = JSON.stringify(data);
              } catch(e) {}
              appendToLog(`<b>${room}</b>: ${data}`, type);
            }


            iosocket.on('connect', function () {
              appendToLog('Connected', TYPES.SUCCESS);

              iosocket.on('message', function(message) {
                processMessage('message', message)
              });

              // Join default rooms
              DEFAULT_ROOMS.forEach(function(r) {
                iosocket.on(r.room, function(message) {
                  processMessage(r.room, message, r.type)
                })
              })

              iosocket.on('disconnect', function() {
                appendToLog('Disconnected', TYPES.DANGER);
              });
            });

            $('#outgoingChatMessage').keypress(function(event) {
                if(event.which == 13) {
                    event.preventDefault();

                    var message = $('#outgoingChatMessage').val();

                    try {
                      var messageJSON = JSON.parse(message);
                    } catch(e) {}

                    iosocket.emit(room, messageJSON || message);

                    appendToLog(`<b>${room}</b>: ${message}`);

                    $('#outgoingChatMessage').val('');
                }
            });

            $('#outgoingRoom').keypress(function(event) {
                if(event.which == 13) {
                    event.preventDefault();

                    var newRoom = $('#outgoingRoom').val();

                    if (room !== newRoom) {
                      room = newRoom;

                      appendToLog(`Changed room to <b>${room}</b>`, TYPES.WARNING);

                      iosocket.on(room, function(message) {
                       processMessage(room, message, TYPES.SECONDARY);
                      })
                    }
                }
            });
        });
    </script>
    <style type="text/css">
      #log {
        overflow-y: scroll;
        height: 80%;
      }
    </style>
</head>
<body class="">

<div class="container">
  <h1> Socket.IO Debuger </h1>

  <div class="row">

    <div class="col-4">
      <form>
        <div class="form-group">
          <label for="outgoingRoom">Room</label>
          <input type="text" class="form-control" id="outgoingRoom">
        </div>

        <div class="form-group">
          <label for="outgoingChatMessage">Message</label>
          <textarea class="form-control" id="outgoingChatMessage"></textarea>
        </div>
      </form>
    </div>

    <div class="col-8">
      <p>Log</p>
      <ul class="list-group full-height" id="log">
        <!-- Messages -->
      </ul>
    </div>

  </div>
</div>


</body>
</html>
	<html>
	<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
	<script>
	$(function(){
	var iosocket = io.connect('http://localhost:4010');
	var room = 'message';
	var log = $('#log');

	var TYPES = {
	PRIMARY: 'primary',
	SECONDARY: 'secondary',
	SUCCESS: 'success',
	DANGER: 'danger',
	WARNING: 'warning',
	INFO: 'info',
	};

	var DEFAULT_ROOMS = [{
	room: 'messages',
	},{
	room: 'exception',
	type: TYPES.DANGER,
	}];

	function appendToLog(message, type) {
	var classes = 'list-group-item';

	if (type) {
	classes += ` list-group-item-${type}`
	}

	log.append(`<li class="${classes}">${message}</li>`)
	}

	function processMessage(room, data, type) {
	try {
	data = JSON.stringify(data);
	} catch(e) {}
	appendToLog(`<b>${room}</b>: ${data}`, type);
	}


	iosocket.on('connect', function () {
	appendToLog('Connected', TYPES.SUCCESS);

	iosocket.on('message', function(message) {
	processMessage('message', message)
	});

	// Join default rooms
	DEFAULT_ROOMS.forEach(function(r) {
	iosocket.on(r.room, function(message) {
	processMessage(r.room, message, r.type)
	})
	})

	iosocket.on('disconnect', function() {
	appendToLog('Disconnected', TYPES.DANGER);
	});
	});

	$('#outgoingChatMessage').keypress(function(event) {
	if(event.which == 13) {
	event.preventDefault();

	var message = $('#outgoingChatMessage').val();

	try {
	var messageJSON = JSON.parse(message);
	} catch(e) {}

	iosocket.emit(room, messageJSON \|\| message);

	appendToLog(`<b>${room}</b>: ${message}`);

	$('#outgoingChatMessage').val('');
	}
	});

	$('#outgoingRoom').keypress(function(event) {
	if(event.which == 13) {
	event.preventDefault();

	var newRoom = $('#outgoingRoom').val();

	if (room !== newRoom) {
	room = newRoom;

	appendToLog(`Changed room to <b>${room}</b>`, TYPES.WARNING);

	iosocket.on(room, function(message) {
	processMessage(room, message, TYPES.SECONDARY);
	})
	}
	}
	});
	});
	</script>
	<style type="text/css">
	#log {
	overflow-y: scroll;
	height: 80%;
	}
	</style>
	</head>
	<body class="">

	<div class="container">
	<h1> Socket.IO Debuger </h1>

	<div class="row">

	<div class="col-4">
	<form>
	<div class="form-group">
	<label for="outgoingRoom">Room</label>
	<input type="text" class="form-control" id="outgoingRoom">
	</div>

	<div class="form-group">
	<label for="outgoingChatMessage">Message</label>
	<textarea class="form-control" id="outgoingChatMessage"></textarea>
	</div>
	</form>
	</div>

	<div class="col-8">
	<p>Log</p>
	<ul class="list-group full-height" id="log">
	<!-- Messages -->
	</ul>
	</div>

	</div>
	</div>


	</body>
	</html>