theCaptain420/html shit

## html shit
<!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>
  <body>
      <select id="friendslist" onchange="vaeglVen()">

        </select>
    <ul id="messages"></ul>

    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>


    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>


      function vaeglVen(){
         hvemSkriverJegTil =  document.getElementById("friendslist").value;
         console.log(document.getElementById("friendslist").value)
      }

      //Henter friendslist
      var venneliste=[];
      var xmlhttp = new XMLHttpRequest();

      xmlhttp.onreadystatechange = function() {
        if(this.readyState == 4 && this.status == 200) {
          console.log("inde i onreadystatechange")
        var myObj = JSON.parse(this.responseText);
         venneliste = myObj;

         var x = document.getElementById("friendslist");

        for (let index = 0; index < 3; index++) {
          let option = document.createElement("option");
          option.text = myObj.arr[index].name;
          x.add(option);
        }


         console.log("her"+myObj.arr[1].name);

        }
      };

      xmlhttp.open("GET", "http://localhost:3000/getChats", true);
      xmlhttp.send();
      console.log("venne "+venneliste);


        //Friendslist
        /*
        var x = document.getElementById("friendslist");

        for (let index = 0; index < 3; index++) {
          let option = document.createElement("option");
          option.text = venneliste[index].name;
          x.add(option);
        }


*/


        //Til at printe of sende beskeder.
        $(function () {
          var socket = io();


          var username = prompt('What\'s your username?');
          //var hvemSkriverJegTil = prompt("Hvem vil du skrive til?");


            socket.emit('new_client', username);
            document.title = username + ' - ' + document.title;

          $('form').submit(function(){
            //socket.emit('chat message',username+' : '+ $('#m').val());


            socket.emit('chat message',hvemSkriverJegTil+' : '+ $('#m').val());
            $('#messages').append($('<li>').text(username+" : "+$('#m').val()));


            $('#m').val('');
            return false;
          });

          socket.on('chat message', function(msg){
            console.log("Her : "+msg.search(hvemSkriverJegTil))

            if(msg.search(username)>(-1)){
              console.log(msg)

              if(msg.search(hvemSkriverJegTil)==0){
                var res = msg.replace(hvemSkriverJegTil, " ");
                $('#messages').append($('<li>').text(username+" "+res));

              }else{
                var res2 = msg.replace(username, " ");
                $('#messages').append($('<li>').text(hvemSkriverJegTil+" "+res2));
              }
            }else{

            }
          });
        });
      </script>
  </body>
</html>

## js thingy
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendFile(__dirname + '/chatSide.html');
});


//fixer Cross-Origin Resource Sharing (CORS)
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});


//get alle brugerens chats
app.get('/getChats',function(req,res){
  //Her skal vi have lavet noget, så den sender en list over id'er på hvem man chatter med.
  //Det er en json, der skal hentes fra DB
  var sendListe = {arr :[{"id":"ajjskkksk123ws","name":"Hans"}, {"id":"ajjskodaoksdko2","name":"Johan"},{"id":"woolololololol","name":"Frank"}]};
  res.send(sendListe);

});


http.listen(3000, function(){
  console.log('listening on *:3000');
});

io.on('connection', function(socket){
    socket.on('new_client',function(username){
    socket.broadcast.emit('new_client', socket.username);
    socket.username = username;
    socket.id = username;
    console.log(socket.id)
  console.log(username +' connected');


});


//
socket.on('disconnect',function(username){
  console.log( socket.username+' disconnected');
});

//En listener der venter på at 'chat message' eventet forekommer
  socket.on('chat message', function(msg){
  io.emit('chat message', msg);
  console.log(socket.username +' siger: ' + msg);
});

});
	<!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>
	<body>
	<select id="friendslist" onchange="vaeglVen()">

	</select>
	<ul id="messages"></ul>

	<form action="">
	<input id="m" autocomplete="off" /><button>Send</button>
	</form>



	<script src="/socket.io/socket.io.js"></script>
	<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
	<script>


	function vaeglVen(){
	hvemSkriverJegTil = document.getElementById("friendslist").value;
	console.log(document.getElementById("friendslist").value)
	}

	//Henter friendslist
	var venneliste=[];
	var xmlhttp = new XMLHttpRequest();

	xmlhttp.onreadystatechange = function() {
	if(this.readyState == 4 && this.status == 200) {
	console.log("inde i onreadystatechange")
	var myObj = JSON.parse(this.responseText);
	venneliste = myObj;

	var x = document.getElementById("friendslist");

	for (let index = 0; index < 3; index++) {
	let option = document.createElement("option");
	option.text = myObj.arr[index].name;
	x.add(option);
	}


	console.log("her"+myObj.arr[1].name);

	}
	};

	xmlhttp.open("GET", "http://localhost:3000/getChats", true);
	xmlhttp.send();
	console.log("venne "+venneliste);



	//Friendslist
	/*
	var x = document.getElementById("friendslist");

	for (let index = 0; index < 3; index++) {
	let option = document.createElement("option");
	option.text = venneliste[index].name;
	x.add(option);
	}


	*/


	//Til at printe of sende beskeder.
	$(function () {
	var socket = io();





	var username = prompt('What\'s your username?');
	//var hvemSkriverJegTil = prompt("Hvem vil du skrive til?");



	socket.emit('new_client', username);
	document.title = username + ' - ' + document.title;

	$('form').submit(function(){
	//socket.emit('chat message',username+' : '+ $('#m').val());


	socket.emit('chat message',hvemSkriverJegTil+' : '+ $('#m').val());
	$('#messages').append($('<li>').text(username+" : "+$('#m').val()));


	$('#m').val('');
	return false;
	});

	socket.on('chat message', function(msg){
	console.log("Her : "+msg.search(hvemSkriverJegTil))

	if(msg.search(username)>(-1)){
	console.log(msg)

	if(msg.search(hvemSkriverJegTil)==0){
	var res = msg.replace(hvemSkriverJegTil, " ");
	$('#messages').append($('<li>').text(username+" "+res));

	}else{
	var res2 = msg.replace(username, " ");
	$('#messages').append($('<li>').text(hvemSkriverJegTil+" "+res2));
	}
	}else{

	}
	});
	});
	</script>
	</body>
	</html>
	var app = require('express')();
	var http = require('http').Server(app);
	var io = require('socket.io')(http);

	app.get('/', function(req, res){
	res.sendFile(__dirname + '/chatSide.html');
	});


	//fixer Cross-Origin Resource Sharing (CORS)
	app.use(function(req, res, next) {
	res.header("Access-Control-Allow-Origin", "*");
	res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
	next();
	});


	//get alle brugerens chats
	app.get('/getChats',function(req,res){
	//Her skal vi have lavet noget, så den sender en list over id'er på hvem man chatter med.
	//Det er en json, der skal hentes fra DB
	var sendListe = {arr :[{"id":"ajjskkksk123ws","name":"Hans"}, {"id":"ajjskodaoksdko2","name":"Johan"},{"id":"woolololololol","name":"Frank"}]};
	res.send(sendListe);

	});




	http.listen(3000, function(){
	console.log('listening on *:3000');
	});

	io.on('connection', function(socket){
	socket.on('new_client',function(username){
	socket.broadcast.emit('new_client', socket.username);
	socket.username = username;
	socket.id = username;
	console.log(socket.id)
	console.log(username +' connected');


	});



	//
	socket.on('disconnect',function(username){
	console.log( socket.username+' disconnected');
	});

	//En listener der venter på at 'chat message' eventet forekommer
	socket.on('chat message', function(msg){
	io.emit('chat message', msg);
	console.log(socket.username +' siger: ' + msg);
	});

	});