Can you please take a look at following code and let me know what I am doing wrong on that? Running Node.js + Express + Socket.io on Ubuntu 12.4 I am trying to create a simple Push function. The server is working perfectly but I cant see the div id "status" content on the page and apparently the function is not running!
Thanks for your help and comment in advance and sorry for long post!
Here is the app.js file /** * Module dependencies. */
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.get('/', routes.index);
app.get('/users', user.list);
var status = "I am not changed yet!.";
io.sockets.on('connection', function (socket) {
io.sockets.emit('status', { status: status });
socket.on('reset', function (data) {
status = "You Change the text!";
io.sockets.emit('status', { status: status });
});
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
I modified the "package.json" as below, adding the sockt.io to dependencies
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "3.2.3",
"jade": "*",
"socket.io:0.9.14"
}
}
in the view folder and in index.jade I have
<div id="status"></div>
<button id="reset">Reset!</button>
and in layout.jade What I have is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- styles -->
<link href="/css/main.css" rel="stylesheet">
</head>
<body>
<%- body %>
<script src="node_modules/socket.io/socket.io.js"></script>
<script src="public/js/libs/jquery.js"></script>
<script src="public/js/main.js"></script>
</body>
and Finally this the function which I have in main.js:
var socket = io.connect(window.location.hostname);
socket.on('status', function (data) {
$('#status').html(data.status);
});
$('#reset').click(function() {
socket.emit('reset');
});
error Message after editing by robert Hint
SyntaxError: Unexpected end of input
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:901:3
You're missing a few basics: you're not loading the socket.io module (I'm assuming you did install it, otherwise use npm install socket.io first), you're not connecting it to the HTTP server, and you're not including the client in your template properly (as @ltebean already pointed out).
Server side first:
// app.js
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path');
var app = express()
, server = http.createServer(app) // create HTTP server
, io = require('socket.io').listen(server); // load socket.io and connect
// it to the HTTP server
...
// start listening
server.listen(app.get('port'));
Client side next:
// layout.jade
...
<script src="/socket.io/socket.io.js"></script>
...
In your main.js, I would suggest using io.connect auto-discovery:
var socket = io.connect(); // no argument means auto-discovery
Also, you package.json is invalid:
"socket.io:0.9.14" // not a valid object property!
"socket.io" : "0.9.14" // should be this