Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Nodejs - Simple socket.io example doesn't push data to all browers

It must have been some of my mistakes that I couldn't figure out how:

[client]

$(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()});
    });
});

[server]

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

What I was trying to do is to send new data to server on the $.keyup() event, then the server should re-assign new input value into the global variable txt, and push that information back to the client. The client, on receiving any new data pushed from the server, should change the value of #theInput. 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 #theInput, but when I open 2 different tabs/browsers to test its synchronization, whenever the keyup event fires, it replaces the global txt in server, and I didn't see any synchronization or real time in those browsers.

I'm fairly new and would appreciate much any help or hints to solve the problem.

Additional question: In index.jade (just imagine I have one), like in this structure:

root
|____ views
|    |_____ index.jade
|
|____ libs
|    |_____ jQuery.js
|
|server.js

From jade, I tried to:

script(src="./libs/jQuery.js")

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:

[server.js]

site = require("./site");
app.get("/jQuery", site.jQuery);

And define route:

[site.js]

exports.jQuery = function(req, res) {
    res.sendfile("./libs/js/jQuery.js");
};

The file is then found, but an error occurs:

GET http://localhost:8080/jquery-1.10.2.min.map 404 (Not Found) 

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 http://code.jquery.com/jquery-2.0.3.min.js to embed jQuery. That works and is my temporary solution. So is there anyway to embed jQuery relatively like traditional server would do?

like image 334
xx3004 Avatar asked Apr 18 '26 12:04

xx3004


1 Answers

In your server program change socket.emit to io.sockets.emit.

socket.emit will send message to specific socket (client) that got connected. io.sockets.emit will send message to all connected sockets (clients)

like image 167
vinayr Avatar answered Apr 21 '26 03:04

vinayr