2016-11-06 11 views
0

これは初めてnode.js/socket.ioで作業していて、すべてのソケットで 'connect'イベントが発生するのに少し問題があります。私はチャットアプリケーションの例に従って、ユーザーが接続または切断したときにコンソールに表示するのではなく、画面に表示する機能を追加しようとしました。Socket.io connect event not firing

すべてのタブで切断イベントが発生しています(チャットアプリケーションに対して複数のタブが開いている場合)が、現在のタブでのみ接続イベントが発生しているようです。

サーバー(index.js)

var app = require('express')(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http); 

app.get('/', function(req, res){ 
    res.sendFile(__dirname + '/index.html'); 
}); 

io.on('connection', function(socket){ 
    socket.on('connect', function(){ 
     io.emit('connect', "A user connected"); 
    }); 
    socket.on('disconnect', function(){ 
     io.emit('disconnect', "A user disconnected"); 
    }); 
    socket.on('chat message', function(msg){ 
     io.emit('chat message', msg); 
    }); 
}); 

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

クライアント(index.htmlを)

<script src="/socket.io/socket.io.js"></script> 
<script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
<script> 
    var socket = io(); 
    $('form').submit(function(){ 
     socket.emit('chat message', $('#m').val()); 
     $('#m').val(''); 
     return false; 
    }); 
    socket.on('chat message', function(msg){ 
     $('#messages').append($('<li>').text(msg)); 
    }); 
    socket.on('disconnect', function(msg){ 
     $('#users').text(msg); 
    }); 
    socket.on('connect', function(msg){ 
     $('#users').text(msg); 
    }); 
</script> 

答えて

0

あなたはこれを試すことができ、それが動作することがあります。

サーバー:

var app = require('express')(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http); 

app.get('/', function(req, res){ 
    res.sendFile(__dirname + '/index.html'); 
}); 

io.on('connection', function(socket){ 

    io.emit('new user', "A user connected"); 

    socket.on('disconnect', function(){ 
     io.emit('disconnect', "A user disconnected"); 
    }); 

    socket.on('chat message', function(msg){ 
     io.emit('chat message', msg); 
    }); 
}); 

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

クライアント:

<script src="/socket.io/socket.io.js"></script> 
<script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
<script> 
    var socket = io(); 
    $('form').submit(function(){ 
     socket.emit('chat message', $('#m').val()); 
     $('#m').val(''); 
     return false; 
    }); 
    socket.on('connect', function() { 
     $('#users').text('I am connected!'); 
    }); 
    socket.on('chat message', function(msg){ 
     $('#messages').append($('<li>').text(msg)); 
    }); 
    socket.on('disconnect', function(msg){ 
     $('#users').text(msg); 
    }); 
    socket.on('new user', function(msg){ 
     $('#users').text(msg); 
    }); 
</script> 
0

私はあなたのコードを見ることができる2つの問題があります。

あなたはソケット「接続時」機能は必要ありません。あなたのコードをioの "接続時"に置くことができ、ユーザーが接続すると起動します。

io.on("connection", function (socket) { 
    // Do connect stuff here 
}) 

もう1つは、ソケット切断機能で、他の機能と名前を共有するため、問題を引き起こす可能性がある切断です。代わりに次のようにしてください:

//Server: 
io.on('connection', function(socket){ 

    io.emit('set users', "A user connected"); 

    socket.on('disconnect', function(){ 
     io.emit('set users', "A user disconnected"); 
    }); 

    socket.on('chat message', function(msg){ 
     io.emit('chat message', msg); 
    }); 
}); 

//Client: 
var socket = io(); 
$('form').submit(function(){ 
    socket.emit('chat message', $('#m').val()); 
    $('#m').val(''); 
    return false; 
    }); 

socket.on('chat message', function(msg){ 
    $('#messages').append($('<li>').text(msg)); 
    }); 

//You only need one function to set "#users" 
socket.on('set users', function(msg){ 
    $('#users').text(msg); //this will set the text in #users 
    });