client+server

2016-11-16 10:55:44 +01:00
parent 95e96e1230
commit b5481d1506
4 changed files with 122 additions and 0 deletions
@@ -0,0 +1,54 @@
+<html>
+	<head>	
+		<title>TALK TO ME LOCALHOST</title>	
+		<style>
+			/* CSS Styling */
+			#frame {
+				width: 30em;
+			}
+			textarea {
+				width: 100%;
+				border: 1px solid #888;
+				padding: 3px;
+			}
+			#inputs, #text_field {
+				width: 100%;
+			}
+		</style>
+	</head>
+	<body>		
+		<!-- HTML -->
+		<label>Talk to me Localhost</label>
+		<div id="frame">
+
+			<!-- text area where the conversation is displayed -->
+			<textarea id="conversation" rows="10" cols="65">...</textarea>
+
+			<!-- inputs from human to send to server -->
+			<div id="inputs">
+				<label>To Localhost: </label>
+				<input id="text_field" type="text" value="..." onkeydown="enter_message();"/>
+				<input type="button" value="Send" onclick="send_message();"/>
+			</div>
+
+		</div>		
+
+		<!-- SCRIPTS -->
+		<!-- import socket.io -->
+		<script src="/socket.io/socket.io.js"></script>
+		<script>
+			// connect to localhost on its port (see server.js -- 8088)
+		  var socket = io().connect('http://localhost:8088');
+
+		  // when connecting 
+		  socket.on('connect', function (data) {
+		  	console.log('human connected');
+		  });
+
+		  // when receiving a custom message form the server ('message from robot')
+		  socket.on('message from robot', function(msg) {
+		  	console.log('robot message: ' + msg);
+		  });
+		</script>		
+	</body>
+</html>