client+server
This commit is contained in:
parent
95e96e1230
commit
b5481d1506
54
week3/client+server/index.html
Normal file
54
week3/client+server/index.html
Normal file
@ -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>
|
||||
15
week3/client+server/package.json
Normal file
15
week3/client+server/package.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "server",
|
||||
"version": "1.0.0",
|
||||
"description": "simple http and websocket server",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "gauthier",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"express": "^4.14.0",
|
||||
"socket.io": "^1.5.1"
|
||||
}
|
||||
}
|
||||
53
week3/client+server/server.js
Normal file
53
week3/client+server/server.js
Normal file
@ -0,0 +1,53 @@
|
||||
// server.js
|
||||
|
||||
// import express ()
|
||||
var express = require('express'); // npm install --save express
|
||||
var app = express();
|
||||
|
||||
// import node.js http
|
||||
var server = require('http').Server(app);
|
||||
|
||||
// import socket.io
|
||||
var io = require('socket.io')(server); // npm install --save socket.io
|
||||
|
||||
/* ----------------------------------
|
||||
Server and Socket Configuration
|
||||
--------------------------------------*/
|
||||
|
||||
// tell express to server our index.html file
|
||||
app.get('/', function (req, res) {
|
||||
res.sendFile(__dirname + '/index.html');
|
||||
});
|
||||
|
||||
// configure socket.io
|
||||
// (1) when there is a connection
|
||||
io.on('connection', function(socket) {
|
||||
|
||||
console.log('got a connection');
|
||||
//io.emit('message from robot', 'Hi! my name is Reihtuag!'); // greetings
|
||||
|
||||
// (2) configure the connected socket to receive custom messages ('message from human')
|
||||
socket.on('message from human', function(msg) {
|
||||
|
||||
console.log('got a human message: ' + msg);
|
||||
//io.emit('message from robot', msg);
|
||||
|
||||
});
|
||||
|
||||
socket.on('disconnet', function() {
|
||||
|
||||
console.log('got a disconnection');
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
/* -------------------
|
||||
Start the server
|
||||
----------------------*/
|
||||
|
||||
// listen to connection on port 8088 --> http://localhost:8088
|
||||
server.listen(8088, function () {
|
||||
console.log('listening on port: ' + 8088);
|
||||
});
|
||||
|
||||
0
week3/notes.md
Normal file
0
week3/notes.md
Normal file
Loading…
x
Reference in New Issue
Block a user