node.js - JS change socket namespace from client when click on button -
i'm developping simple app nodejs , socket.io. created 2 channels , want client connect 1 of channels when click on button. problem don't response server
this code :
// server side
var app = require('express')(); var http = require('http').server(app); var io = require('socket.io')(http); var namespaceweek = io.of('/week'); var namespaceday = io.of('/day'); app.get('/', function(req, res){ res.sendfile('mdc.html'); }); io.on('connection', function(socket){ console.log("user = " + socket.id) }); namespaceday.on('connection', function(socket){ console.log('someone connected on namespace day'); namespaceday.emit('hiday', 'hello on namespace day!'); }); namespaceweek.on('connection', function(socket){ console.log('someone connected on namespace week'); namespaceday.emit('hiweek', 'hello on namespace week!'); }); http.listen(3000, function(){ console.log('listening on localhost:3000'); }); // client side
<!doctype html> <html> <head><title>hello world</title></head> <script src="/socket.io/socket.io.js"></script> <script> var socket = io(); function setday(){ console.log("setday"); socket = io.connect('/day'); console.log(socket) } socket.on('hiday',function(data){ console.log("hiday") console.log("data = ." + data + ".") document.getelementbyid('message-container').innerhtml = 'update day' console.log("data = ." + data + ".") }); function setweek(){ console.log("setweek"); socket = io.connect('/week'); console.log(socket) } socket.on('hiweek',function(data){ console.log("hiweek") document.getelementbyid('message-container').innerhtml = 'update week' //document.getelementbyid('message-container').innerhtml = data console.log(data) }); </script> <body> <div id="message-container"></div> <div id="error-container"></div> <button type="button" name="button" onclick="setweek()">week</button> <button type="button" name="button" onclick="setday()">day</button> </body> in client, created 2 button , when click on 1 want change socket namespace
when call setday() or setweek(), creating whole new socket.io connection , overwriting previous socket variable. socket.on(hiday, ...) , socket.on('hiweek', ...) handlers have on first socket created, not on newly created sockets, never see messages on those.
to fix, add message handlers right socket after you've connected namespace.
function setweek() { // close previous socket.io connection socket.close(); // make new connection new namespace console.log("setweek"); socket = io.connect('/week'); console.log(socket) // add event handler new socket socket.on('hiweek',function(data){ console.log("hiweek") document.getelementbyid('message-container').innerhtml = 'update week' console.log(data) }); } then, same thing setday() function.
and, shown here want disconnect previous connection when changing namespaces don't leave connections aren't using more.
fyi, had typo this:
namespaceday.emit('hiweek', 'hello on namespace week!'); should have been this:
namespaceweek.emit('hiweek', 'hello on namespace week!'); final, tested , working code this:
<!doctype html> <html> <head><title>hello world</title></head> <script src="/socket.io/socket.io.js"></script> <script> var socket = io(); function setday(){ socket.close(); console.log("setday"); socket = io.connect('/day'); socket.on('hiday',function(data){ console.log("hiday") document.getelementbyid('message-container').innerhtml = 'update day'; console.log(data); }); } function setweek() { // close previous socket.io connection socket.close(); // make new connection new namespace console.log("setweek"); socket = io.connect('/week'); // add event handler new socket socket.on('hiweek',function(data){ console.log("hiweek"); document.getelementbyid('message-container').innerhtml = 'update week'; console.log(data); }); } </script> <body> <div id="message-container"></div> <div id="error-container"></div> <button type="button" name="button" onclick="setweek()">week</button> <button type="button" name="button" onclick="setday()">day</button> </body> and server code:
var app = require('express')(); var http = require('http').server(app); var io = require('socket.io')(http); var path = require('path'); var namespaceweek = io.of('/week'); var namespaceday = io.of('/day'); app.get('/', function(req, res){ res.sendfile(path.join(__dirname, 'socket-io-namespace.html')); }); io.on('connection', function(socket){ console.log("user = " + socket.id) }); namespaceday.on('connection', function(socket){ console.log('someone connected on namespace day'); namespaceday.emit('hiday', 'hello on namespace day!'); }); namespaceweek.on('connection', function(socket){ console.log('someone connected on namespace week'); namespaceweek.emit('hiweek', 'hello on namespace week!'); }); http.listen(3000, function(){ console.log('listening on localhost:3000'); });
Comments
Post a Comment