當點擊按鈕時，JS從客戶端更改套接字名稱空間

我正在開發使用nodejs和socket.io的簡單應用程序。我創建了兩個通道，並且我希望我的客戶端在點擊按鈕時連接一個通道。問題是我不從服務器獲取當點擊按鈕時，JS從客戶端更改套接字名稱空間

響應這是我的代碼：

// SERVER端

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 everyone on namespace day!'); 
}); 

nameSpaceWeek.on('connection', function(socket){ 
    console.log('someone connected on namespace week'); 
    nameSpaceDay.emit('hiWeek', 'Hello everyone on namespace week!'); 
}); 

http.listen(3000, function(){ 
    console.log('listening on localhost:3000'); 
});

//客戶端

<!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>

在我的客戶端中，我創建了兩個按鈕，當我點擊一個按鈕時，我想更改套接字名稱空間

來源

2017-07-25 baudic_j

當您撥打setDay()或setWeek()時，您將創建一個全新的socket.io連接，從而覆蓋您之前的socket變量。您擁有的socket.on( hiDay , ...)和socket.on('hiWeek', ...)處理程序僅在您創建的第一個套接字上，而不在新創建的套接字上，因此您從不會看到這些消息。

要解決此問題，請在連接到該名稱空間後，將這些消息處理程序僅添加到正確的套接字。

function setWeek() { 
    // close previous socket.io connection 
    socket.close(); 

    // make new connection to new namespace 
    console.log("setWeek"); 
    socket = io.connect('/week');   
    console.log(socket) 

    // add event handler for new socket 
    socket.on('hiWeek',function(data){ 
     console.log("hiWeek") 
     document.getElementById('message-container').innerHTML = 'Update Week' 
     console.log(data) 
    }); 
}

然後，對setDay()函數做同樣的事情。

而且，如此處所示，您可能希望在更改名稱空間時斷開上一個連接，因此您不必留下您不再使用的連接。

僅供參考，你也有一個錯字，其中這樣的：

nameSpaceDay.emit('hiWeek', 'Hello everyone on namespace week!');

應該是這樣的：

nameSpaceWeek.emit('hiWeek', 'Hello everyone on namespace week!');

最後，測試和運行的代碼是這樣的：

<!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 to new namespace 
     console.log("setWeek"); 
     socket = io.connect('/week');   

     // add event handler for 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>

和服務器代碼：

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 everyone on namespace day!'); 
}); 

nameSpaceWeek.on('connection', function(socket){ 
    console.log('someone connected on namespace week'); 
    nameSpaceWeek.emit('hiWeek', 'Hello everyone on namespace week!'); 
}); 

http.listen(3000, function(){ 
    console.log('listening on localhost:3000'); 
});

來源

2017-07-25 19:30:28 jfriend00

我所做的更改，但它是相同的結果 –

@baudic_j - 當我與所需的更改運行它，它只是對我很好。你顯然沒有正確地做出改變，或者我不清楚你應該做什麼。 – jfriend00

@baudic_j - 出於某種原因，'setDay（）'方法工作正常，但'setWeek（）'不是。我正在調查。 – jfriend00

如果創建connect（ns）函數，則可以在名稱空間更改時重新構建套接字事件偵聽器。下面應該工作：

 <script> 
      var connect = function (ns) { 
       return io.connect(ns, { 
        query: 'ns=' + ns, 
        resource: "socket.io" 
       }).on('hiWeek', function (data) { 
        console.log("hiWeek") 
        document.getElementById('message-container').innerHTML = 'Update Week' 
        //document.getElementById('message-container').innerHTML = data 
        console.log(data) 
       }).on('hiDay', function (data) { 
       console.log("hiDay") 
       console.log("data = ." + data + ".") 
       document.getElementById('message-container').innerHTML = 'Update day' 
       console.log("data = ." + data + ".") 
      }); 
      } 

      var socket = io(); 

      function setDay() { 
       console.log("setDay"); 
       socket = connect('/day'); 
       console.log(socket); 
      } 

      function setWeek() { 
       console.log("setWeek"); 
       socket = connect('/week');   
       console.log(socket); 
      } 


     </script>

來源

2017-07-25 20:53:00 Woodsy

在你的功能，套接字將自動連接'hiWeek'和'hiDay'？ –

雖然確實有'hiDay'和'hiWeek'的聽衆，它只會響應來自指定名稱空間的事件。如果在服務器上存在像namespaceDay.emit（'hiWeek'，data）這樣的不匹配項，它仍然會捕獲事件 – Woodsy

，但是如果將命名空間設置爲/ week，則不會收到hiDay，因爲它來自於其他命名空間服務器。 – Woodsy

當點擊按鈕時，JS從客戶端更改套接字名稱空間

回答

相關問題