Menu
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!
518
Problem: the socket is not able to connectYou are trying to reach a plain WebSocket server. The server is not reachable. The client is not compatible with the version of the server. The server does not send the necessary CORS headers.
Although Socket.IO indeed uses WebSocket for transport when possible, it adds additional metadata to each packet. That is why a WebSocket client will not be able to successfully connect to a Socket.IO server, and a Socket.IO client will not be able to connect to a plain WebSocket server either.
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.
6
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 [email protected] 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.
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
