ボタンをクリックするとJSのソケットネームスペースがクライアントから変更されます

私はnodejsとsocket.ioで簡単なアプリを開発しています。私は2つのチャンネルを作成しました。ボタンをクリックすると、クライアントがチャンネルの1つを接続します。問題は、私は、サーバーボタンをクリックするとJSのソケットネームスペースがクライアントから変更されます

からの応答を得ることはありませんこれは私のコードです：

//サーバ側

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>

私のクライアントでは、私は2つのボタンを作成し、1つをクリックするとソケットネームスペースを変更したいのです

出典

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()機能についても同じことをしてください。

また、ここに示すように、名前空間を変更するときに前の接続を切断して、もはや使用していない接続を残す必要はないと思われます。

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>

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

このされている必要があります：

はFYI、あなたも、これはタイプミスがありました

およびサーバーコード：

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のソケットネームスペースがクライアントから変更されます

答えて

関連する問題