JanneSalokoski · December 10, 2016 15:22
diff --git a/engine.js b/engine.js
 var socket = io();

 socket.on("message", function (msg)
 {
    $("#messages").append($("<li>").text(msg));
 });
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Socket.IO chat</title>

        <link rel="stylesheet" type="text/css" href="/stylesheets/master.css" />
        <link rel="stylesheet" type="text/css" href="/stylesheets/mobile.css" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

        <script type="text/javascript" src="/../socket.io/socket.io.js"></script>
        <script type="text/javascript" src="/scripts/engine.js"></script>
    </head>
    <body>
        <ul id="messages"></ul>
        <form>
            <input id="text" autocomplete="off" placeholder=">"><input type="button" value="Send"></input>
        </form>

        <!-- Interface should be loaded only after DOM has loaded -->
        <script type="text/javascript" src="/scripts/interface.js"></script>
    </body>
 </html>
diff --git a/interface.js b/interface.js
 $("form").submit(function (event)
 {
    event.preventDefault();

    var input = $("#text");

    socket.emit("message", input.val());
    input.val("");
 });
diff --git a/master.css b/master.css
 *
 {
    margin: 0;
    padding: 0;
 }

 body
 {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 0.9em;
    line-height: 80%;

    width: 100vw;
    height: 100vh;
 }

 ul
 {
    height: calc(100% - 5em);

    padding: 1em;

     list-style-type: none;
 }

 li
 {
    margin-top: 1em;
 }

 li:first-child
 {
    margin-top: 0em;
 }

 form
 {
    height: 2em;
    width: 100%;
 }

 input
 {
    font: inherit;

    font-size: inherit;

    height: 2em;

    padding: 0.5em;
    border: none;
 }

 input[type="button"]
 {
    background-color: #4b99ad;
    color: #fff;

    font-size: inherit;

    height: 3em !important;
    width: 6em;
 }

 input[type="button"]:hover
 {
    background-color: #4691a4;
 }

 input[type="button"]:active
 {
    background-color: #3f8293;
 }

 textarea:focus, input:focus
 {
    outline: none;
 }

 #text
 {
    background-color: #ededed;
    width: calc(100% - 7em);
 }
diff --git a/server.js b/server.js
 // Include express
 let express = require("express");
 let server = express();

 // Create an http server
 let http = require("http").Server(server);

 // Include socket.io
 let socket_io = require("socket.io")
 let io = socket_io(http);

 // Include path
 let path = require("path");

 // Serve all static files from '/public/' under '/'
 server.use("/", express.static(path.join(__dirname, "/public/")));

 // Handle connections
 io.on("connection", function (socket)
 {
    // Notify when a user connects
    console.log("User has connected");

    // Handle incoming messages
    socket.on("message", function (msg)
    {
        console.log("message: " + msg);

        // Send message to all clients
        io.emit("message", msg);
    })

    // Notify when a user disconnects
    socket.on("disconnect", function ()
    {
        console.log("User has disconnected");
    })
 })

 // Listen to http://localhost:8080
 http.listen(8080, function ()
 {
    console.log("Server listening on http://localhost:8080");
 });
	var socket = io();

	socket.on("message", function (msg)
	{
	$("#messages").append($("<li>").text(msg));
	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Socket.IO chat</title>

	<link rel="stylesheet" type="text/css" href="/stylesheets/master.css" />
	<link rel="stylesheet" type="text/css" href="/stylesheets/mobile.css" />

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

	<script type="text/javascript" src="/../socket.io/socket.io.js"></script>
	<script type="text/javascript" src="/scripts/engine.js"></script>
	</head>
	<body>
	<ul id="messages"></ul>
	<form>
	<input id="text" autocomplete="off" placeholder=">"><input type="button" value="Send"></input>
	</form>

	<!-- Interface should be loaded only after DOM has loaded -->
	<script type="text/javascript" src="/scripts/interface.js"></script>
	</body>
	</html>
	$("form").submit(function (event)
	{
	event.preventDefault();

	var input = $("#text");

	socket.emit("message", input.val());
	input.val("");
	});
	*
	{
	margin: 0;
	padding: 0;
	}

	body
	{
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 0.9em;
	line-height: 80%;

	width: 100vw;
	height: 100vh;
	}

	ul
	{
	height: calc(100% - 5em);

	padding: 1em;

	list-style-type: none;
	}

	li
	{
	margin-top: 1em;
	}

	li:first-child
	{
	margin-top: 0em;
	}

	form
	{
	height: 2em;
	width: 100%;
	}

	input
	{
	font: inherit;

	font-size: inherit;

	height: 2em;

	padding: 0.5em;
	border: none;
	}

	input[type="button"]
	{
	background-color: #4b99ad;
	color: #fff;

	font-size: inherit;

	height: 3em !important;
	width: 6em;
	}

	input[type="button"]:hover
	{
	background-color: #4691a4;
	}

	input[type="button"]:active
	{
	background-color: #3f8293;
	}

	textarea:focus, input:focus
	{
	outline: none;
	}

	#text
	{
	background-color: #ededed;
	width: calc(100% - 7em);
	}
	// Include express
	let express = require("express");
	let server = express();

	// Create an http server
	let http = require("http").Server(server);

	// Include socket.io
	let socket_io = require("socket.io")
	let io = socket_io(http);

	// Include path
	let path = require("path");

	// Serve all static files from '/public/' under '/'
	server.use("/", express.static(path.join(__dirname, "/public/")));

	// Handle connections
	io.on("connection", function (socket)
	{
	// Notify when a user connects
	console.log("User has connected");

	// Handle incoming messages
	socket.on("message", function (msg)
	{
	console.log("message: " + msg);

	// Send message to all clients
	io.emit("message", msg);
	})

	// Notify when a user disconnects
	socket.on("disconnect", function ()
	{
	console.log("User has disconnected");
	})
	})

	// Listen to http://localhost:8080
	http.listen(8080, function ()
	{
	console.log("Server listening on http://localhost:8080");
	});