title: how to use express and socket.io
body: <p>I am using express V 3.4.8 and socket.io V 0.9.16 to create a simple app wich render a map with markers placed where people is connecting to the site, all this in order to learn node.js and to use maps. My problem is that I can not get socket.io to work because is never delivered, more ahdead:</p>
  
  <p>This is my server javascript:</p>
  
  <pre><code>var express = require('express');
  var http = require('http');
  var app = express();
  var server = http.createServer(app);
  var io = require('socket.io').listen(server);
  
  
  app.configure(function(){
      app.use('/', express.static(__dirname + '/public'));
      app.use(express.bodyParser());
      app.use(express.methodOverride());
      app.use(app.router);
  });
  
  app.configure('development', function(){
    app.use(express.errorHandler());
  });
  
  
  io.sockets.on('connection', function(socket){
      socket.emit('news', {hello: 'world'});
      socket.on('my other event', function(data){
          console.log(data);
      });
  });
  
  server.listen(3000, 'localhost');
  
  
  // console.log('Listening on port %d', server.address().port);
  </code></pre>
  
  <p>The logs im getting from my console are:</p>
  
  <pre><code>info: socket.io started
  info: unhandled socket.io url
  </code></pre>
  
  <p>And this is my google's chrome log:</p>
  
  <pre><code>Uncaught ReferenceError: io is not defined (index):21
  Resource interpreted as Script but transferred with MIME type text/plain:"http://localhost:3000/socket.io.js". (index):36
  io is not defined
  </code></pre>
  
  <p>So I think the problem is the way express manage to deliver the files but as I am learning I dont understand really well what is happening backdooors. I wich someone could help me understanding why socket.io.js is not being delivered and how can i solve the problem. i appreciate your help guys!.</p>
  
  <p>** Edit **
  Also my file structure inside the project is somethins like:</p>
  
  <pre><code>mapApp
   -node_modules
   -public
     -css
     -img
     -js
     index.html
   app.js (which is the server)
  </code></pre>
  
  <p>This is also my client side js:</p>
  
  <pre><code>$(function(){
  
      // create a map in the "map" div, set the view to a given place and zoom
      var map = L.map('map',{
          center:[0,0],
          zoom:2,
          minzoom:2,
          maxZoom:18
      });
  
      // add an OpenStreetMap tile layer
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
      }).addTo(map);
  
      /* find user */
      map.locate({setView:true, maxZoom:16});
  
  });
  
  /* client socket*/
  /* socket */
  var socket = io.connect('http://localhost:3000');
      socket.on('news', function (data) {
      console.log(data);
      socket.emit('my other event', { my: 'data' });
  }); 
  </code></pre>
  
  <p>my index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!--[if lt IE 7]&gt;      &lt;html class="no-js lt-ie9 lt-ie8 lt-ie7"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7]&gt;         &lt;html class="no-js lt-ie9 lt-ie8"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 8]&gt;         &lt;html class="no-js lt-ie9"&gt; &lt;![endif]--&gt;
  &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;html class="no-js"&gt; &lt;!--&lt;![endif]--&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
          &lt;title&gt;mapApp&lt;/title&gt;
          &lt;meta name="description" content=""&gt;
          &lt;meta name="viewport" content="width=device-width"&gt;
  
          &lt;link rel="stylesheet" href="css/normalize.min.css"&gt;
          &lt;link rel="stylesheet" href="css/leaflet.css"&gt;
          &lt;link rel="stylesheet" href="css/basic.css"&gt;
          &lt;link rel="stylesheet" href="css/main.css"&gt;
  
          &lt;script src="js/vendor/modernizr-2.6.2.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;h1&gt;The map&lt;/h1&gt;
          &lt;div id="map"&gt;&lt;/div&gt;
  
          &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;window.jQuery || document.write('&lt;script src="js/vendor/jquery-1.10.1.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
  
          &lt;script src="/socket.io.js"&gt;&lt;/script&gt;
          &lt;script src="js/vendor/leaflet.js"&gt;&lt;/script&gt;
          &lt;script src="js/main.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>