I have the following node.js server-side code:
var app = require('http').createServer(handler)
, io = require('socket.io').listen(app)
, fs = require('fs')
app.listen(8888);
var fn='/home/eamorr/workspace/node_proxy_remote5/data';
function handler (req, res) {
fs.readFile(__dirname + '/index.html',
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.end(data);
});
}
io.sockets.on('connection', function (socket) {
fs.watchFile(fn,function(curr,prev){
//curr.time
fs.readFile(fn,function(err,data){
socket.emit('data',data.toString());
console.log(data);
});
});
});
As you can see, I’m watching a file and sending modifications to the browser.
On the client side, I have:
<html>
<head>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="./jqPlot/jquery.min.js"></script>
<script type="text/javascript" src="./jqPlot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="./jqPlot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="./jqPlot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="./jqPlot/jquery.jqplot.min.css" />
</head>
<body>
<script type="text/javascript">
var socket = io.connect('http://localhost:8888');
socket.on('data', function (data) {
console.log(data);
//socket.emit('my other event', { my: 'data' });
});
</script>
<div id="chart2" style="height:300px; width:500px;"></div>
<script type="text/javascript">
$(document).ready(function(){
var plot2 = $.jqplot ('chart2', [[3,7,9,1,5,3,8,2,5]], {
// Give the plot a title.
title: 'Bandwidth over port 10001',
// You can specify options for all axes on the plot at once with
// the axesDefaults object. Here, we're using a canvas renderer
// to draw the axis label which allows rotated text.
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
// Likewise, seriesDefaults specifies default options for all
// series in a plot. Options specified in seriesDefaults or
// axesDefaults can be overridden by individual series or
// axes options.
// Here we turn on smoothing for the line.
seriesDefaults: {
rendererOptions: {
smooth: true
}
},
// An axes object holds options for all axes.
// Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
// Up to 9 y axes are supported.
axes: {
// options for each axis are specified in seperate option objects.
xaxis: {
label: "X Axis",
// Turn off "padding". This will allow data point to lie on the
// edges of the grid. Default padding is 1.2 and will keep all
// points inside the bounds of the grid.
pad: 0
},
yaxis: {
label: "Y Axis"
}
}
});
});
</script>
</body>
</html>
As you can see, I’m trying to draw a graph using jqPlot with the data sent from the server.
The problem I have with this code is that if I navigate to http://localhost:80, the graph shows up fine, but no websockets are initiated. If I navigate to http://localhost:8888, the graph won’t show up, but the websocket work fine! How can I combine both node.js and jQuery?
Many thanks in advance,
Server binds Socket to specific Port and data that comes to the system is redirected based on addressed port.
Your Apache is working on specific Port as well. It has listening socket bound to specific Port. By default it is 80.
When you navigate to localhost:80, your browser creating connection to Apache and they exchange some data and htmls.
Then when you are creating WebSocket using JS, browser creates socket and trying to connect to provided address and port. If your websockets server bound to port 8888 then it will connect to it successfully.
Then if you are trying to navigate in browser top localhost:8888 what happens, is that Browser creates connection to your server, but on Port 8888 you’ve got WebSockets server, they will connect but they will fail in handshake and other things.
Hosting files in Apache is one port, and websockets server is another.
Check out some info about what is Ports and how they are working.