title: Nodejs - Simple socket.io example doesn't push data to all browers
body: <p>It must have been some of my mistakes that I couldn't figure out how:</p>
  
  <p>[client]</p>
  
  <pre><code>$(document).ready(function() {
      var socket = io.connect("http://localhost:8080");
      socket.on("message", function(data) {
          $("#theInput").val(data.data);
      });
  
      $(document).keyup(function() {
          socket.emit("message", {data: $("#theInput").val()});
      });
  });
  </code></pre>
  
  <p>[server]</p>
  
  <pre><code>var express = require("express"),
      app = express(),
      server = require("http").createServer(app);
      io = require("socket.io").listen(server),
      site = require("./site");
  
  server.listen(8080);
  
  app.set("view engine", "jade");
  app.set("views", __dirname + "/views");
  
  app.use(express.logger("dev"));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  
  //Handling sockets
  txt = "";
  io.sockets.on("connection", function(socket) {
      socket.on("message", function(data) {
          txt = data.data;
          socket.emit("message", {data: txt});
      });
  });
  </code></pre>
  
  <p>What I was trying to do is to send new data to server on the <code>$.keyup()</code> event, then the server should re-assign new input value into the global variable <code>txt</code>, and push that information back to the client. The client, on receiving any new data pushed from the server, should change the value of <code>#theInput</code>. It's kinda like opening 2 browsers, and type in 1, it should appears on another browser as well. It works well if I open only 1 browser, which means it receives data and re-assign to the <code>#theInput</code>, but when I open 2 different tabs/browsers to test its synchronization, whenever the <code>keyup</code> event fires, it replaces the global <code>txt</code> in server, and I didn't see any synchronization or real time in those browsers.</p>
  
  <p>I'm fairly new and would appreciate much any help or hints to solve the problem.</p>
  
  <p><strong>Additional question</strong>: In index.jade (just imagine I have one), like in this structure:</p>
  
  <pre><code>root
  |____ views
  |    |_____ index.jade
  |
  |____ libs
  |    |_____ jQuery.js
  |
  |server.js
  </code></pre>
  
  <p>From jade, I tried to:</p>
  
  <pre><code>script(src="./libs/jQuery.js")
  </code></pre>
  
  <p>But it results in 404, Not found. I suddenly remember that I need to route every request, so maybe I should do the same with external library, so I go:</p>
  
  <p>[server.js]</p>
  
  <pre><code>site = require("./site");
  app.get("/jQuery", site.jQuery);
  </code></pre>
  
  <p>And define route:</p>
  
  <p>[site.js]</p>
  
  <pre><code>exports.jQuery = function(req, res) {
      res.sendfile("./libs/js/jQuery.js");
  };
  </code></pre>
  
  <p>The file is then found, but an error occurs:</p>
  
  <pre><code>GET http://localhost:8080/jquery-1.10.2.min.map 404 (Not Found) 
  </code></pre>
  
  <p>What is jQuery.min.map even is? I've never encountered anything like this. I searched through the Internet for all express example, but unfortunately, they all use shortcuts <code>http://code.jquery.com/jquery-2.0.3.min.js</code> to embed jQuery. That works and is my temporary solution. So is there anyway to embed jQuery relatively like traditional server would do?</p>