Something...The HTML (named ajax_example.html):
<html>
<head>
<title>AJAX Example</title>
<!-- Load up the AJAX External JavaScript file -->
<script type="text/javascript" src="ajax.js"></script>
<!-- Local Javascript Functions and so on -->
<script type="text/javascript">
// A variable to hold the interval id
var interval = null;
// A function to call our AJAX PHP script
function call_ajax()
{
makeHttpRequest('ajax_example.txt',ajax_return);
}
// A function that gets called when ajax returns
function ajax_return(response)
{
document.getElementById("messages").innerHTML = response;
}
// Setup AJAX function, creates a timeout so that we run something periodically
function setup_ajax()
{
// Set interval of 5000 milliseconds
// Keeps going...
interval = setInterval(call_ajax,5000);
// Only happens once..
//interval = setTimeout(call_ajax,5000);
}
// Register setup_ajax with the onload event of the window (when it is done loading)..
window.addEventListener('load', setup_ajax);
</script>
</head>
<body>
<b>Looky here!</b>
<div id="messages" style="overflow: auto; width: 500px; height: 400px;">
Something should pop up here..
</div>
</body>
</html>
Try It
<html>
<head>
<script type="text/javascript">
var websocket;
var init = function() {
websocket = new WebSocket("ws://echo.websocket.org");
// Callbacks
websocket.onopen = function(evt) { alert("onopen " + evt) };
websocket.onclose = function(evt) { alert("onclose " + evt) };
websocket.onmessage = function(evt) { alert("onmessage " + evt.data) };
websocket.onerror = function(evt) { alert("onerror " + evt) };
};
var send = function(message) {
websocket.send(message);
};
window.addEventListener("load", init, false);
</script>
</head>
<body>
<input type="text" value="Hi" />
<input type="button" value="send" onclick="send(this.value);" />
</body>
</html>
Try it
JavaScript (ECMAScript) engine for building server side apps
http://nodejs.org/
Uses V8
Event/Callback driven - A callback function is registered for a specific event. When that event occurs the callback method is run.
In order to run node servers that are accessible to others via the internet, we'll need somewhere to host it. At the moment, the easiest way to run a Node.js server is to use a company such as Digital Ocean which provides Virtual Private Servers. Digital Ocean has a few things going for them, first is the cost, second is the fact that you can get one running with Node.js already installed very quickly.
In order to get started, you'll need to create an account with Digital Ocean.
After that, you can go ahead and create a "droplet". A "droplet" is Digital Ocean's term for a VPS. After coming up with a hostname, I would choose the smallest size, an appropriate region (one close to you, perhaps), and then in "Select image" go to the second tab, "Applications" and choose "node-v0.10.30 on Ubuntu 14.04" (the version numbers may change) and click "Create Droplet".
Digital Ocean will email you a password to use with the default "root" account. In order to do anything, you first have to login to the newly created server via the command line to change your password. To do so, open up Terminal on your Mac (or use PuTTY if you are on a PC). To connect on from the Terminal app on the Mac, you type the following:
ssh root@ip_address(The "ip_address" is in the email you get from Digital Ocean.) You will be prompted to enter the password (which is also from the email) and then prompted to enter it again to change it. Go ahead and change it to something you will remember but sufficiently complex that it will be difficult for hackers.
Once you have done that, we can move on although it is probably a good idea to keep the terminal open as we'll be using it again shortly.
In order to upload to your server, we need to use a tool that will allow us to connect via SSH to transfer the files. I have found that Cyberduck is a good tool.
To connect, choose "SFTP (SSH File Transfer Protocol)", under "Server" use the IP address emailed to you by Digital Ocean. The "username" is "root" and the "password" is what you just created in Terminal.
// HTTP Portion
var http = require('http');
var fs = require('fs'); // Using the filesystem module
var httpServer = http.createServer(requestHandler);
httpServer.listen(8080);
function requestHandler(req, res) {
// Read index.html
fs.readFile(__dirname + '/index.html',
// Callback function for reading
function (err, data) {
// if there is an error
if (err) {
res.writeHead(500);
return res.end('Error loading canvas_socket.html');
}
// Otherwise, send the data, the contents of the file
res.writeHead(200);
res.end(data);
}
);
}
// WebSocket Portion
// WebSockets work with the HTTP server
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('chatmessage', function(data) {
// Data comes in as whatever was sent, including objects
console.log("Received: 'chatmessage' " + data);
// Send it to all of the clients
socket.broadcast.emit('chatmessage', data);
});
socket.on('disconnect', function() {
console.log("Client has disconnected " + socket.id);
});
}
);
<html>
<head>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect('http://YOUR_IP_ADDRESS:8080/');
socket.on('connect', function() {
console.log("Connected");
});
// Receive from any event
socket.on('chatmessage', function (data) {
console.log(data);
document.getElementById('messages').innerHTML = "" + data +
+ "" + document.getElementById('messages').innerHTML;
});
var sendmessage = function(message) {
console.log("chatmessage: " + message);
socket.emit('chatmessage', message);
};
</script>
</head>
<body>
<div id="messages">
No Messages Yet
</div>
<input type="text" id="message" name="message">
<input type="submit" value="submit" onclick="sendmessage(document.getElementById('message').value);">
</body>
</html>
To run, upload these files to a new folder on your your server (using Cyberduck)
Next, you'll have to install the socket.io module via terminal
Finally you can run the server via node.
ssh root@YOUR_IP cd directory_you_just_created npm install socket.io node server.jsAssuming you don't get any errors, you should be able to connect via your browser: http://YOUR_IP:8080/index.html