I've been staring at node.js and socket.io examples all afternoon and i'm trying to piece together a simple page that will tell me how many users I have connected to the server.
I have read the documentation at http://socket.io/ as well as a few tutorials / questions here that outline exactly what i'm trying to do. I have also found create simple node js server and client which does not help me.
Version Information:
node.js - 0.6.15
express - 3.0.0alpha1
socket.io - 0.9.5 (socket.io-client is the same version, however does not find the resource... see comments)
ejs - 0.7.1
Here is my server code:
var express = require('express'),
config = {
port: 4000,
hostname: 'localhost'
};
var server = module.exports = express.createServer();
/* server configuration */
server.use(express.cookieParser('keyboard unicorn'));
server.use(express.bodyParser());
server.use(express.methodOverride());
server.use(express.session({ secret: 'keyboard unicorn' }));
server.engine('.html', require('ejs').__express);
server.set('views', __dirname + '/lib/views');
server.set('view options', { layout: false });
server.set('view engine', 'html');
server.use(server.router);
server.use('/', express.static(__dirname + '/lib/assets'));
var io = require('socket.io').listen(server);
var connections = { 'length': 0 };
io.sockets.on('connection', function(socket) {
socket.__fd = socket.fd;
connections[socket.__fd]=socket.remoteAddress;
++connections.length;
console.log('user connected! There are a total of ' + connections.length + ' users online.');
return socket.on('disconnect',function(){
delete conns[socket.__fd];
--connections.length;
console.log('user disconnected! There are a total of ' + connections.length + ' users remaining online.');
});
});
server.get('/', function( req, res ) {
res.render('index', {
'page_title': 'sample application',
'number_of_connections': connections.length
});
});
server.listen(config.port, config.hostname);
Here is my client code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><%= page_title %></title>
</head>
<body>
<div>There is a total of <%= number_of_connections %> user(s) connected.</div>
<script src="http://cdn.socket.io/stable/socket.io.js"></script>
<script type="text/javascript">
var socket = new io.Socket('localhost',{'port':4000});
socket.connect();
socket.on('connect', function() {
console.log('connected');
});
</script>
</body>
</html>
Here is what is happening when I run the server, and connect with the client.
$ node server.js
info - socket.io started
then when I navigate to localhost:4000 on my web browser I get the page with '0' (number_of_connections). Also, I see nothing in the terminal for the server (the on.('connection' is never hit).
On the client, after a second or two, I start to get a massive number of errors (if I leave the console open for a few seconds it crashes the page) see image below:
Please, any help with where to start for debugging this would be appreciated! I just want to get this basic example up and running so I can start playing with / understanding nodejs and socket.io!
I can provide a solution :)
The problem is because of Express now being a function.
You need to do the following:
var express = require('express');
var app = express();
var server = app.listen(3000);
var io = require('socket.io').listen(server);
Express 3.0.0alpha and socket.io are not (directly) compatible, due to changes in Express between 2.* and 3.* (or rather, changes in Connect between 1.* and 2.*). I would recommend you to downgrade to Express 2.5.9 for the time being, or you can follow this advice from Express' author, TJ Holowaychuk.
I set up a test environment, installed express 3.0 and socket.io 0.9.5, and reproduced your error.
Then I ran npm install express@2.5.1 made a couple backwards tweaks based on the migration guide, and it ran great.
So I'm going to go ahead and suggest that socket.io is probably not compatible with express 3 yet, which still looks pretty unstable.
My app.js tweaked for express 2:
var express = require('express'),
config = {
port: 8080,
hostname: 'localhost'
};
var server = module.exports = express.createServer();
/* server configuration */
server.set('views', __dirname + '/lib/views');
server.set('view options', { layout: false });
server.set('view engine', 'ejs');
//server.register('.html', 'ejs');require('ejs').__express);
server.use(express.cookieParser('keyboard unicorn'));
server.use(express.bodyParser());
server.use(express.methodOverride());
server.use(express.session({ secret: 'keyboard unicorn' }));
server.use('/', express.static(__dirname + '/lib/assets'));
server.use(server.router);
var io = require('socket.io').listen(server);
io.set('log level', 2);
var connections = { 'length': 0 };
server.get('/', function( req, res ) {
res.render('index', {
'page_title': 'sample application',
'number_of_connections': connections.length
});
});
io.sockets.on('connection', function(socket) {
socket.__fd = socket.fd;
connections[socket.__fd]=socket.remoteAddress;
++connections.length;
console.log('user connected! There are a total of ' + connections.length + ' users online.');
return socket.on('disconnect',function(){
delete conns[socket.__fd];
--connections.length;
console.log('user disconnected! There are a total of ' + connections.length + ' users remaining online.');
});
});
server.listen(config.port);
My index.ejs file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><%= page_title %></title>
</head>
<body>
<div>There is a total of <%= number_of_connections %> user(s) connected.</div>
<!--<script src="http://cdn.socket.io/stable/socket.io.js"></script>-->
<script src='/socket.io/socket.io.js'></script>
<script type="text/javascript">
var socket = io.connect('http://hostname.com:8080');
socket.on('connect', function() {
console.log('connected');
});
</script>
</body>
</html>
I hope something here helps.
replace app.use(express.bodyParser());, with
app.use(express.json());
app.use(express.urlencoded());
...save file, restart node server.