mlconnor/app.coffee

## app.coffee
express = require('express')
app = express()
server = require('http').createServer(app)
io = require('socket.io')(server)

app.use express.static(__dirname + '/public')

server.listen 3000

io.on 'connection', (socket)->
  console.log('a user connected')

  socket.on 'chatMessage', (from, msg)->
    io.emit('chatMessage', from, msg)

  socket.on 'disconnect', ()->
    console.log('user disconnected')

  socket.on 'notifyUser', (user)->
    console.log('notifyUser()')
    io.emit('notifyUser', user)

app.get '/', (req, res, next) ->
  htmlPage = """
    <!doctype html>
      <html>
       <head>
        <title>Chat Application</title>
        <link rel='stylesheet' href='style.css' type='text/css'/>
        <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
        <script>
          var socket = io();
          function submitfunction(){
            var from = $('#user').val();
            var message = $('#m').val();
            if(message != '') {
            socket.emit('chatMessage', from, message);
          }
          $('#m').val('').focus();
            return false;
          }

          function notifyTyping() {
            var user = $('#user').val();
            socket.emit('notifyUser', user);
          }

          socket.on('chatMessage', function(from, msg){
            var me = $('#user').val();
            var color = (from == me) ? 'green' : '#009afd';
            var from = (from == me) ? 'Me' : from;
            $('#messages').append('<li><b style="color:' + color + '">' + from + '</b>: ' + msg + '</li>');
          });

          socket.on('notifyUser', function(user){
            console.log("received notifyUser()");
            var me = $('#user').val();
            if(user != me) {
              $('#notifyUser').text(user + ' is typing ...');
            }
            setTimeout(function(){ $('#notifyUser').text(''); }, 10000);;
          });

          $(document).ready(function(){
            var name = makeid();
            $('#user').val(name);
            socket.emit('chatMessage', 'System', '<b>' + name + '</b> has joined the discussion');
          });

          function makeid() {
            var text = "";
            var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

            for( var i=0; i < 5; i++ ) {
              text += possible.charAt(Math.floor(Math.random() * possible.length));
            }
            return text;
          }
        </script>
        <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 { color:#FFF; background: #2D9F0B; border: none; padding: 10px;  width: 9%; }
          #messages { list-style-type: none; margin: 0; padding: 0; }
          #messages li { padding: 5px 10px; }
          #messages li:nth-child(odd) { background: #eee; }
          #notifyUser { position: fixed; bottom: 42px; width: 100%; }
        </style>
      </head>
      <body>
        <ul id="messages"></ul>
        <span id="notifyUser"></span>
        <form id="form" action="" onsubmit="return submitfunction();" >
          <input type="hidden" id="user" value="" /><input id="m" autocomplete="off" onkeyup="notifyTyping();" placeholder="Type yor message here.." /><input type="submit" id="button" value="Send"/>
        </form>
      </body>
    </html>
  """
  res.send(htmlPage)
	express = require('express')
	app = express()
	server = require('http').createServer(app)
	io = require('socket.io')(server)

	app.use express.static(__dirname + '/public')

	server.listen 3000

	io.on 'connection', (socket)->
	console.log('a user connected')

	socket.on 'chatMessage', (from, msg)->
	io.emit('chatMessage', from, msg)

	socket.on 'disconnect', ()->
	console.log('user disconnected')

	socket.on 'notifyUser', (user)->
	console.log('notifyUser()')
	io.emit('notifyUser', user)

	app.get '/', (req, res, next) ->
	htmlPage = """
	<!doctype html>
	<html>
	<head>
	<title>Chat Application</title>
	<link rel='stylesheet' href='style.css' type='text/css'/>
	<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
	<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
	<script>
	var socket = io();
	function submitfunction(){
	var from = $('#user').val();
	var message = $('#m').val();
	if(message != '') {
	socket.emit('chatMessage', from, message);
	}
	$('#m').val('').focus();
	return false;
	}

	function notifyTyping() {
	var user = $('#user').val();
	socket.emit('notifyUser', user);
	}

	socket.on('chatMessage', function(from, msg){
	var me = $('#user').val();
	var color = (from == me) ? 'green' : '#009afd';
	var from = (from == me) ? 'Me' : from;
	$('#messages').append('<li><b style="color:' + color + '">' + from + '</b>: ' + msg + '</li>');
	});

	socket.on('notifyUser', function(user){
	console.log("received notifyUser()");
	var me = $('#user').val();
	if(user != me) {
	$('#notifyUser').text(user + ' is typing ...');
	}
	setTimeout(function(){ $('#notifyUser').text(''); }, 10000);;
	});

	$(document).ready(function(){
	var name = makeid();
	$('#user').val(name);
	socket.emit('chatMessage', 'System', '<b>' + name + '</b> has joined the discussion');
	});

	function makeid() {
	var text = "";
	var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

	for( var i=0; i < 5; i++ ) {
	text += possible.charAt(Math.floor(Math.random() * possible.length));
	}
	return text;
	}
	</script>
	<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 { color:#FFF; background: #2D9F0B; border: none; padding: 10px; width: 9%; }
	#messages { list-style-type: none; margin: 0; padding: 0; }
	#messages li { padding: 5px 10px; }
	#messages li:nth-child(odd) { background: #eee; }
	#notifyUser { position: fixed; bottom: 42px; width: 100%; }
	</style>
	</head>
	<body>
	<ul id="messages"></ul>
	<span id="notifyUser"></span>
	<form id="form" action="" onsubmit="return submitfunction();" >
	<input type="hidden" id="user" value="" /><input id="m" autocomplete="off" onkeyup="notifyTyping();" placeholder="Type yor message here.." /><input type="submit" id="button" value="Send"/>
	</form>
	</body>
	</html>
	"""
	res.send(htmlPage)