2017-05-02 15 views
0

node.jsを使用していて、クライアントが切断するたびに画像にエラーが表示されます(これはタブを閉じるだけですが、socket.disconnect ()クライアント側とサーバー側の両方で)クライアントの切断時にnode.jsエラーが発生しました

Error I'm getting

ここに私のコードは

var io = require('socket.io').listen(4000); 
var fs = require('fs'); 

io.sockets.on('connection', function(socket) { 
    socket.on('login', function(info) 
    { 
     fs.readFile("chatLog.txt", function(err, data) 
     { 
      if(err) 
      { 
       return console.error(err); 
      } 
      socket.emit('incomingMessage', data.toString()); 
     }); 
     socket.broadcast.emit('newUser', info); 
    }); 
    socket.on('message', function(content) { 
    console.log(content); 
    io.sockets.emit('incomingMessage', content); 
    }); 
    socket.on('logout', function(name) 
    { 
    socket.broadcast.emit('incomingMessage', "user: " + name + " has logged out"); 
    //socket.disconnect(); 
    }); 
}); 

だ誰がどのようにエラーでサーバーがクラッシュすることなく、切断するように私に言うことができますか?

クライアント側のHTML:

<html> 
<head> 
<!-- This is the websocket SERVER --> 
<script src="http://localhost:4000/socket.io/socket.io.js"></script> 
<script src="client.js"></script> 

</head> 
<body> 
<div id="loginDiv"> 
    username: <input type="text" id = "userName"><br> 
    <input type = "button" id="login" value = "login" onClick="login()"> 
</div> 
<div id="logoutDiv" style="visibility:hidden"> 
    <input type = "button" id = "messageRedir" value = "send message" onClick= "gotoMessage()"> 
    <input type = "button" id = "logout" value = "logout" onClick="logout()"> 
</div> 
<div id="sendMessage" style="visibility:hidden"> 
    <input type = "text" id="messageBox"><br> 
    <input type = "button" value="send message" onClick="sendMessage()"> 
    <input type = "button" value = "cancel" onClick="back"> 
</div> 
<div id="msg"></div> 
</body> 
</html> 

クライアントサイドのJS:

var userName = null; 
var socket = null; 
function login() 
{ 

    socket = io.connect('http://localhost:4000'); 
    userName = document.getElementById('userName').value; 
    document.getElementById("loginDiv").style.visibility = "hidden"; 
    document.getElementById("logoutDiv").style.visibility = "visible"; 
    socket.emit('login', userName+ ' has connected'); 

    // Attach event handler for event fired by server 
    socket.on('incomingMessage', function(data) { 
    var elem = document.getElementById('msg'); 
    console.log(data); 
    elem.innerHTML = data + "<br>" + elem.innerHTML; // append data that we got back 
    }); 
    socket.on('newUser', function(data) { 
    var elem = document.getElementById('msg'); 
    console.log(data); 
    elem.innerHTML = data + "<br>" + elem.innerHTML; // append data that we got back 
    }); 
} 

function logout() 
{ 
    document.getElementById("loginDiv").style.visibility = "visible"; 
    document.getElementById("logoutDiv").style.visibility = "hidden"; 
    document.getElementById('msg').innerHTML = ""; 
    socket.emit('logout', userName); 
    socket.disconnect(); 
    socket = null; 
} 

function gotoMessage() 
{ 
    document.getElementById("loginDiv").style.visibility = "hidden"; 
    document.getElementById("msg").style.visibility = "hidden"; 
    document.getElementById("sendMessage").visibility = "visible"; 
} 

function back() 
{ 
    document.getElementById("loginDiv").style.visibility = "visible"; 
    document.getElementById("msg").style.visibility = "visible"; 
    document.getElementById("sendMessage").visibility = "hidden"; 
} 

function sendMessage() 
{ 
    var mess = document.getElementById('messageBox').value; 
    socket.emit('message', mess); 
} 
+0

あなたは私たちにクライアント側コードを表示することができます。 – magreenberg

+0

投稿を編集して、クライアントコードを表示するようにしました – Alex5775

答えて

0

問題が発生することは(それがアクティブでなくなった)あなたはソケットを使用しているログアウト機能の中で最も可能性が高いですイベント。代わりにio.sockets.emitを使用してください。私はいくつかの提案があります。

クライアント側でsocket.emit('logout', username)イベントを使用する代わりに、組み込みのログアウトイベントを使用して、ユーザーがブラウザを閉じるときに起動します。そのイベントはdisconnectです。リクエストごとにユーザ名を渡す必要はありません。ログインイベントで一度だけ渡す必要があります。ソケットのプロパティとしてサーバーにユーザー名を格納することができます。

クライアント側

function login() 
 
{ 
 

 
    socket = io.connect('http://localhost:4000'); 
 
    userName = document.getElementById('userName').value; 
 
    document.getElementById("loginDiv").style.visibility = "hidden"; 
 
    document.getElementById("logoutDiv").style.visibility = "visible"; 
 
    // just send the username 
 
    socket.emit('login', userName); 
 

 
    // Attach event handler for event fired by server 
 
    socket.on('incomingMessage', function(data) { 
 
    var elem = document.getElementById('msg'); 
 
    console.log(data); 
 
    elem.innerHTML = data + "<br>" + elem.innerHTML; // append data that we got back 
 
    }); 
 
    socket.on('newUser', function(data) { 
 
    var elem = document.getElementById('msg'); 
 
    console.log(data); 
 
    elem.innerHTML = data + "<br>" + elem.innerHTML; // append data that we got back 
 
    }); 
 
} 
 

 
function logout() 
 
{ 
 
    document.getElementById("loginDiv").style.visibility = "visible"; 
 
    document.getElementById("logoutDiv").style.visibility = "hidden"; 
 
    document.getElementById('msg').innerHTML = ""; 
 
    socket.disconnect(); 
 
    socket = null; 
 
}

サーバー側

io.sockets.on('connection', function(socket) { 
    socket.on('login', function(uxname) 
    { 
     // store username variable as property of the socket connection 
     // this way we can handle the disconnect message later 
     this.username = uxname; 

     fs.readFile("chatLog.txt", function(err, data) 
     { 
      if(err) 
      { 
       return console.error(err); 
      } 
      socket.emit('incomingMessage', data.toString()); 
     }); 
     socket.broadcast.emit('newUser', uxname); 
    }); 
    socket.on('message', function(content) { 
    console.log(content); 
    io.sockets.emit('incomingMessage', content); 
    }); 
    socket.on('disconnect', function(){ 
     // don't use socket.broadcast.emit. at this point the socket is destroyed and you cant call events on it. That is most likely why you have the error. 
     // use io.sockets.emit instead 
     io.sockets.emit('incomingMessage', "user: " + this.username + " has logged out") 
    }); 
}); 
関連する問題