Node.js - socket.io web app

Question

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);

marcoseu · Accepted Answer · 2013-05-11 10:02:22Z

1

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 })

edited May 11, 2013 at 10:02

answered May 11, 2013 at 9:31

marcoseu

3,9622 gold badges21 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kirbs Over a year ago

Thanks marcoseu very helpful, I wasn't sure how to 'emit' several strings in one command. If the emitted data was an array of floating point numbers what method would you recommend?

marcoseu Over a year ago

Try to wrap array in a dictionary: { nums: [1.2, 1.3, 1.4]}.

luksch · Accepted Answer · 2013-05-11 08:34:50Z

0

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.

edited May 11, 2013 at 8:34

answered May 11, 2013 at 8:25

luksch

11.7k6 gold badges41 silver badges54 bronze badges

1 Comment

Kirbs Over a year ago

Thanks for the reply, I should have thought about downloading it and serving it locally! cheers. I have read quite a bit about middleware, but am not convinced I understand what the term means. It seems to be mostly associated to tasks which are done 'quietly' by the server. Is there more to it than that?

Collectives™ on Stack Overflow

Node.js - socket.io web app

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related