Socket.IOのクライアントを切断しても、今まで接続されていた分イベントが飛ぶ

###前提・実現したいこと
socket.ioとNode.jsを用いて、あるディレクトリにファイルが追加された時
その内容をイベントとしてクライアントに送るシステムを構築しています。

###発生している問題・エラーメッセージ
下記該当のソースコードにあるようなコードを記述しているのですが
クライアントの接続を切断してもsocket.idが廃棄されず、今まで接続していたクライアント全てに飛ばしているような
挙動を示します。
例）3回ブラウザを更新すると、4回分のイベントが発行されているような挙動
どのように修正すれば、切断時にsocket.idが廃棄され、現在接続しているクライアントのみに
イベントを飛ばすようになるのでしょうか。

###該当のソースコード

JavaScript
1//lib
2var express = require('express')
3var app = express();
4var chokidar = require('chokidar');
5var fs = require('fs');
6var server = require ('http').Server(app);
7var io = require('socket.io')(server);
8var filepath = require('path');
9
10let clients = {};
11
12var watcher = chikidar.watch('./***/',{
13    ignored:/[/\]./,
14    persistent:true,
15    alwaysStat:true,
16    }
17});
18
19app.get('/',req,res)=>{
20   res.SendFile(__dirname + './***.html');
21});
22
23io.on('connection',(socket)=>{
24    clients[socket.id]= socket;
25    console.log(socket.id+'connected')
26    watcher.on('add',function(path){
27　　///fsでファイルを読む処理をしています。
28    io.json.to(socket.id).emit(～～～);
29});// watcher
30socket.on('命令1',function(data){
31    console.log(socket.id)
32    console.log('命令1が来た')
33　　///fsでファイルを消しています。
34});
35socket.on('disconnect',(reason)=>{
36     delete clients;
37     console.log(socket.id+'disconnected')
38});
39});

###出力
例えば3回更新した時はこのように出力されます。

    [Time] (socket.id1) connected
    [Time] (socket.id1) disconnected
    [Time] (socket.id2) connected
    [Time] (socket.id2) disconnected      
    [Time] (socket.id3) connected

この時にemitさせるとこのように出力されます

    [Time] (socket.id1)
    [Time] 命令1が来た
    [Time] (socket.id2)
    [Time] 命令1が来た
    [Time] (socket.id3)
    [Time] 命令1が来た

###試したこと
https://teratail.com/questions/97749
で回答頂いた通り、下記の様に変更した所Last few GCsが発生してしまいました。

///
///fsでファイルを読むだけです。
while(socket.connected){
io.json.to(socket.id).emit(～～～);
}
});// watcher
///

###試したこと2
実際接続されているクライアントはどれだけあるかを確認するため、
以下の様にコードを変更し、確認しました。

io.on('connection',(socket)=>{
    var info = io.sockets.client();
    var count = Oblect.keys(info.connected).length
    console.log(info); //出力1
    console.log(count); //出力2
    clients[socket.id]= socket;
    watcher.on('add',function(path){
    ・・・

結果としては出力1,2どちらも接続されている分しか出ませんでした。
例）2ブラウザで接続した際は、出力は2と出力
しかし、イベントを発火させた際、命令1が来たといった出力は変わらず今まで接続されていた
分出力されてしまいます。

###試したこと3
回答頂いた様に下記の様に実装致しました。

socket.on('disconnect',(reason)=>{
     //delete clients;
        console.log(socket.id) 
       delete clients[socket.id];
      console.log(socket.id+'_disconnected')
});

しかし、上記の部分の出力は以下のように、プロパティが消えず
更新しても今まで接続された分出力されてしまいます。

    [Time] (socket.id1)
    [Time] (socket.id1_disconnected)

マルチポスト
Stack over flow

行動規範の内容に同意します

回答3件

自己解決

接続があるたびに watcher.on('add',...); でハンドラを登録して、削除していないのが問題でした。

以下の様にすることで動作しました。
回答頂いた皆様ありがとうございました。

watcher.on('add', function(path) {
    for (var id in clients) {
        io.json.to(id).emit(～～～);
    }
});

io.on('connection', (socket) => {
    // ここでは watcher.on('add, ...); しない。

    // ...

    socket.on('disconnect',(reason)=>{
         delete clients[socket.id];          // ←ここも修正
         console.log(socket.id+'disconnected')
    });
});

投稿2018/01/09 12:44

編集2018/01/09 12:45

kishi_kun

総合スコア26