A "route" defines how a webserver responds to a specific request based on the request's "path"
Here is a basic Express server which responds with "Hello World" when the client requests the path "/":
var express = require('express')
var app = express()
app.get('/', function (req, res) {
res.send('Hello World!')
})
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})
To run, save this as "httpserver.js", upload it to your server and run it with:
node httpserver.js
A basic webserver is great but it would be nice to serve other files such as images, javascript files, css, and the like from the filesystem. Express can be configured to serve static files as well as dynamic routes. In this example any file in the "public" directory will be served if it's name is requested: Here is an example:
var express = require('express')
var app = express()
app.use(express.static('public'));
app.get('/', function (req, res) {
res.send('Hello World!')
})
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})
A great write-up/explanation/tutorial for getting started with Node: http://www.nodebeginner.org/
Unfortunately, in the above example, the server will shutdown and stop running once you log out or stop it with cntrl-c. Forever is a node module that allows us to run a node server in the background.
Install the module:
npm -g install forver
Then run the server with it:
forever start httpserver.js
List running servers (running using forever)
forever listwhich should output a list of running forever scripts
info: Forever processes running data: uid command script forever pid logfile uptime data: [0] GpWl /usr/local/bin/node server.js 16677 16679 /root/.forever/GpWl.log 0:0:0:14.683This shows one process running with the ID of GpWl (which is important if you want to shut it down). It's log file is here: /root/.forever/GpWl.log which is where any output that it generates will be written.
Stop it
forever stop uid(see above for the "uid")
Socket.io is a node module that makes working with WebSockets easier. It also transparently supports older methods such as AJAX in the event that the browser doesn't support Web Sockets.
Before we do any programming, we should install the module in the directory we are going to use
npm install socket.io
Here is a basic example that we can go through:
// Express is a node module for building HTTP servers
var express = require('express');
var app = express();
// Tell Express to look in the "public" folder for any files first
app.use(express.static('public'));
// If the user just goes to the "route" / then run this function
app.get('/', function (req, res) {
res.send('Hello World!')
});
// Here is the actual HTTP server
var http = require('http');
// We pass in the Express object
var httpServer = http.createServer(app);
// Listen on port 80
httpServer.listen(80);
// WebSocket Portion
// WebSockets work with the HTTP server
const { Server } = require('socket.io');
const io = new Server(httpServer, {});
//var io = require('socket.io').listen(httpServer);
// Register a callback function to run when we have an individual connection
// This is run for each individual user that connects
io.sockets.on('connection',
// We are given a websocket object in our function
function (socket) {
console.log("We have a new client: " + socket.id);
// When this user "send" from clientside javascript, we get a "message"
// client side: socket.send("the message"); or socket.emit('message', "the message");
socket.on('message',
// Run this function when a message is sent
function (data) {
console.log("message: " + data);
// To all clients
io.sockets.emit('message', data);
}
);
// When this user emits, client side: socket.emit('otherevent',some data);
socket.on('otherevent', function(data) {
// Data comes in as whatever was sent, including objects
console.log("Received: 'otherevent' " + data);
});
socket.on('disconnect', function() {
console.log("Client has disconnected");
});
}
);
Save this file as whatever.js and upload it to a new directory on your server.
Here is the corresponding index.html file that should be uploaded to the same directory. (Don't forget to replace the SERVER_NAME with your server's name or address.):
<html>
<head>
<script src="/socket.io/socket.io.js"></script>
<script>
// If a different server or port
//var socket = io.connect('http://SERVER_NAME:8080/');
var socket = io.connect();
socket.on('connect', function() {
console.log("Connected");
});
// Receive a message
socket.on('message', function(data) {
console.log("Got: " + data);
document.getElementById('messages').innerHTML += data;
});
// Receive from any event
socket.on('news', function (data) {
console.log(data);
});
var sendmessage = function() {
var message = document.getElementById('message').value;
console.log("Sending: " + message);
// Send a messaage
socket.send(message);
};
var sendother = function() {
var othermessage = document.getElementById('message').value;
console.log("sending: " + othermessage);
// Send any kind of data with a custom event
//socket.emit('otherevent',{ othermessage: othermessage });
socket.emit('otherevent', othermessage);
};
</script>
</head>
<body>
<div id="messages">
No Messages Yet
</div>
<div>
<input type="text" id="message" name="message">
<input type="button" value="message" onclick="sendmessage();">
<input type="button" value="other" onclick="sendother();">
</div>
</body>
</html>
More documentation and examples: http://socket.io/ and https://github.com/Automattic/socket.io
How about using this with the JavaScript Canvas.
Starting with the HTML. (Don't forget to replace the SERVER_NAME with your server's name or address.) Let's call it canvas_socket.html:
<html>
<head>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect();
socket.on('connect', function() {
console.log("Connected");
});
// Receive from any event
socket.on('othermouse', function (data) {
console.log(data.x + " " + data.y);
odraw(data.x,data.y);
});
var sendmouse = function(xval, yval) {
console.log("sendmouse: " + xval + " " + yval);
socket.emit('othermouse',{ x: xval, y: yval });
};
///////////////
var canvas;
var context;
var initcanvas = function() {
canvas = document.getElementById('mycanvas');
context = canvas.getContext('2d');
context.fillStyle="#FF0000";
context.fillRect(0,0,canvas.width,canvas.height);
canvas.addEventListener('mousemove', function(evt) {
console.log("mousemove " + evt.clientX + " " + evt.clientY);
//evt.clientX is x but in the entire window, not the canvas
//evt.clientY is y
// Get the canvas bounding rect
var canvasRect = canvas.getBoundingClientRect();
// Now calculate the mouse position values
y = evt.clientY - canvasRect.top; // minus the starting point of the canvas rect
x = evt.clientX - canvasRect.left; // minus the starting point of the canvas rect on the x axis
console.log("mousemove x:" + x + " y:" + y);
sendmouse(x,y);
draw(x,y);
}, false);
};
var px = 0;
var py = 0;
var draw = function(xval,yval) {
console.log("draw " + xval + " " + yval);
context.beginPath();
// This is silly but it's what we have to do to get a random hex string
context.strokeStyle='#000000';
context.moveTo(px,py);
context.lineTo(xval,yval);
context.stroke();
px = xval;
py = yval;
};
var opx = 0;
var opy = 0;
var odraw = function(xval,yval) {
console.log("draw " + xval + " " + yval);
context.beginPath();
context.strokeStyle='#000000';
context.moveTo(opx,opy);
context.lineTo(xval,yval);
context.stroke();
opx = xval;
opy = yval;
};
</script>
</head>
<body onload="initcanvas();">
<canvas width="600" height="600" id="mycanvas" />
</body>
</html>
Now the javascript server portion:
// Express is a node module for building HTTP servers
var express = require('express');
var app = express();
// Tell Express to look in the "public" folder for any files first
app.use(express.static('public'));
// If the user just goes to the "route" / then run this function
app.get('/', function (req, res) {
res.send('Hello World!')
});
// Here is the actual HTTP server
var http = require('http');
// We pass in the Express object
var httpServer = http.createServer(app);
// Listen on port 80
httpServer.listen(80);
// WebSocket Portion
// WebSockets work with the HTTP server
const { Server } = require('socket.io');
const io = new Server(httpServer, {});
//var io = require('socket.io').listen(httpServer);
// Register a callback function to run when we have an individual connection
// This is run for each individual user that connects
io.sockets.on('connection',
// We are given a websocket object in our function
function (socket) {
console.log("We have a new client: " + socket.id);
// When this user emits, client side: socket.emit('otherevent',some data);
socket.on('othermouse', function(data) {
// Data comes in as whatever was sent, including objects
console.log("Received: 'othermouse' " + data.x + " " + data.y);
// Send it to all of the clients
io.sockets.emit('othermouse', data);
});
socket.on('disconnect', function() {
console.log("Client has disconnected " + socket.id);
});
}
);