supermar1010/index.html

## index.html
<!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>
<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>
    class Message {
        constructor(timestamp) {
            this.timestamp = timestamp;
        }
    }
    class TextMessage extends Message {
        constructor(timestamp, text) {
            super(timestamp);
            this.text = text;
        }
    }

    $(function () {
        let socket = io();
        $('form').submit(function () {
            let message = new TextMessage(-1, $('#m').val());
            socket.emit('chat message', message);
            $('#m').val('');
            return false;
        });
        socket.on('chat message', function (msg) {
            $('#messages').append($('<li>').text(msg.timestamp + ": " + msg.text));
            window.scrollTo(0, document.body.scrollHeight);
        });
        $.getJSON("api/messages", function (data) {
            data = JSON.parse(data);
            data.forEach((msg) => {
                $('#messages').append($('<li>').text(msg.timestamp + ": " + msg.text));
            })
        });
    });
</script>
</body>
</html>

## message.js
class Message {
    constructor(timestamp){
        this.timestamp = timestamp;

    }
}

module.exports = Message;

## server.js
let app = require('express')();
let http = require('http').createServer(app);
let io = require('socket.io')(http);
let TextMessage = require('./textMessage');
let messages = [];

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

app.get('/api/messages', function (req, res) {
    res.json(JSON.stringify(messages));
});

io.on('connection', function (socket) {
    console.log('a user connected');
    socket.on('chat message', function (msg) {
        console.log('message: ' + msg.text);
        msg.timestamp = Date.now();
        messages.push(msg);
        io.emit('chat message', msg);
    });
});

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

## textMessage.js
let Message = require('./message');

class TextMessage extends Message {
    constructor(timestamp, text) {
        super(timestamp);
        this.text = text;
    }
}

module.exports = TextMessage;
	<!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>
	<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>
	class Message {
	constructor(timestamp) {
	this.timestamp = timestamp;
	}
	}
	class TextMessage extends Message {
	constructor(timestamp, text) {
	super(timestamp);
	this.text = text;
	}
	}

	$(function () {
	let socket = io();
	$('form').submit(function () {
	let message = new TextMessage(-1, $('#m').val());
	socket.emit('chat message', message);
	$('#m').val('');
	return false;
	});
	socket.on('chat message', function (msg) {
	$('#messages').append($('<li>').text(msg.timestamp + ": " + msg.text));
	window.scrollTo(0, document.body.scrollHeight);
	});
	$.getJSON("api/messages", function (data) {
	data = JSON.parse(data);
	data.forEach((msg) => {
	$('#messages').append($('<li>').text(msg.timestamp + ": " + msg.text));
	})
	});
	});
	</script>
	</body>
	</html>
	class Message {
	constructor(timestamp){
	this.timestamp = timestamp;

	}
	}

	module.exports = Message;
	let app = require('express')();
	let http = require('http').createServer(app);
	let io = require('socket.io')(http);
	let TextMessage = require('./textMessage');
	let messages = [];

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

	app.get('/api/messages', function (req, res) {
	res.json(JSON.stringify(messages));
	});

	io.on('connection', function (socket) {
	console.log('a user connected');
	socket.on('chat message', function (msg) {
	console.log('message: ' + msg.text);
	msg.timestamp = Date.now();
	messages.push(msg);
	io.emit('chat message', msg);
	});
	});

	http.listen(3000, function () {
	console.log('listening on *:3000');
	});
	let Message = require('./message');

	class TextMessage extends Message {
	constructor(timestamp, text) {
	super(timestamp);
	this.text = text;
	}
	}

	module.exports = TextMessage;