CODEWITHSUNDEEP
node.jsexpresssocket.io
Kirbs
Kirbs

Reputation: 43

Node.js - socket.io web app

I've created a basic node.js server program and used socket.io to pass some field data from a client (see below). Pretty chuffed as I'm new to this business. I liked this node-express-socket.io approach as its all Javascript and is apparently usable by most browsers (incl' mobile). The problem is I've kind of fumbled my way through and do not not fully understand what I have created! Two questions...

1) Do I need to use the "//ajax.googleapis.com...jquery..."? This is annoying as the browser will need to have an internet connection to work. Is there another way to access the html doc elements without needing an internet connection?

2) What does the "app.use(express.static...." line do? The "app.get..." function seems to require this to work.

If there are any other general comments about my code please let me have it!

Cheers,

Kirbs

Client side code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
    var socket = io.connect(document.location.protocol+'//'+document.location.host);
    function clicked(){
        $(function(){
            var makeInput=$('.app').find('#make').val();
            var modelInput=$('.app').find('#model').val();
            socket.emit('make', makeInput);
            socket.emit('model', modelInput);
        });     
    };
</script>

Server side code:

var express = require('express');
var http = require('http');
var socketio = require('socket.io');

var app = express();
var server = http.createServer(app);
var io = socketio.listen(server);

app.use(express.static(__dirname));

app.get('/', function (req, res) {
  res.render(__dirname + '/index.html');
});

io.sockets.on('connection', function (socket) {
  socket.on('make', function (make) {
    socket.on('model',function (model){
          console.log('recieved message:', make+','+model);  
      });
  });
});
server.listen(8000);

Upvotes: 0

Views: 1296

Answers (2)

marcoseu
marcoseu

Reputation: 3952

1) As you have setup a static web server (see answer 2), you could simply download the jquery source and serve the .js file from there.

2) "app.use(express.static...." configure a static webserver and setting up the http root directory to the directory that your node.js script lives, as indicated by the __dirname variable. For more detail, see app.use API reference.

As result, I would recommend you change you app.use to:

app.use(express.static(__dirname + '/public'));

and place all your static files, including your jquery file(s), under a public subdirectory.

Also, your server side code has a dependency on sequence of make and model which should be changed. For example, if you switch the emit order to model then make, you should see that your server's console.log will be picking up the make from the previous call.

Instead, try something like:

// On server:
socket.on('info', function (info) {
    console.log('recieved message:', info.make+','+info.model);  
});

// On client:
socket.emit('info', { make: makeInput, model: modelInput })

Upvotes: 1

luksch
luksch

Reputation: 11712

1) You can serve the jQuery library also from your server if you like that better. You should put it in the public/vendor or public/js folder in your project.

2) This is a middleware call from Express framework, which uses in turn the Connect middleware stack. Read up on this here.

Upvotes: 0

Related Questions