2012-05-14 56 views
2

這是一個簡單的聊天示例。我該如何修改腳本:Js節點 - socket.io聊天修改

在第5s中,第一個用戶可以發送消息,並且在接下來的5s中,用戶在接下來的5s中不能發送消息 (當第一個用戶不能發送郵件),第二用戶可以發送消息和第一用戶得到一個div(apIdv1)顯示 的index.html:

<script src="/socket.io/socket.io.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script> 
    var socket = io.connect('http://localhost:8080'); 

    // on connection to server, ask for user's name with an anonymous callback 
    socket.on('connect', function(){ 
     // call the server-side function 'adduser' and send one parameter (value of prompt) 
     socket.emit('adduser', prompt("What's your name?")); 
    }); 

    // listener, whenever the server emits 'updatechat', this updates the chat body 
    socket.on('updatechat', function (username, data) { 

     $('#conversation').append('<b>'+username + ':</b> ' + data + '<br>'); 
    }); 

    // listener, whenever the server emits 'updaterooms', this updates the room the client is in 
    socket.on('updaterooms', function(rooms, current_room) { 
     $('#rooms').empty(); 
     $.each(rooms, function(key, value) { 
      if(value == current_room){ 
       $('#rooms').append('<div>' + value + '</div>'); 
      } 
      else { 
       $('#rooms').append('<div><a href="#" onclick="switchRoom(\''+value+'\')">' + value + '</a></div>'); 
      } 
     }); 
    }); 

    function switchRoom(room){ 
     socket.emit('switchRoom', room); 
    } 

    // on load of page 
    $(function(){ 
     // when the client clicks SEND 
     $('#datasend').click(function() { 
      var message = $('#data').val(); 
      $('#data').val(''); 
      // tell server to execute 'sendchat' and send along one parameter 
      socket.emit('sendchat', message); 
     }); 

     // when the client hits ENTER on their keyboard 
     $('#data').keypress(function(e) { 
      if(e.which == 13) { 
       $(this).blur(); 
       $('#datasend').focus().click(); 
      } 
     }); 
    }); 

</script> 

<style type="text/css"> 
#apDiv1 { 
    position:absolute; 
    width:200px; 
    height:115px; 
    z-index:1; 
    left: 150px; 
    top: 20px; 
    background-color: #FF9900; 
    display:none; 
} 
</style> 

<div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;"> 
    <b>ROOMS</b> 
    <div id="rooms"></div> 
</div> 
<div style="float:left;width:300px;height:250px;overflow:scroll-y;padding:10px;"> 
    <div id="conversation"></div> 
    <input id="data" style="width:200px;" /> 
    <input type="button" id="datasend" value="send" /> 
</div> 
<div id="apDiv1"></div> 

app.js

var app = require('express').createServer() 
var io = require('socket.io').listen(app); 

app.listen(8080); 

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

// usernames which are currently connected to the chat 
var usernames = {}; 

// rooms which are currently available in chat 
var rooms = ['room1','room2','room3']; 

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

    // when the client emits 'adduser', this listens and executes 
    socket.on('adduser', function(username){ 
     // store the username in the socket session for this client 
     socket.username = username; 
     // store the room name in the socket session for this client 
     socket.room = 'room1'; 
     // add the client's username to the global list 
     usernames[username] = username; 
     // send client to room 1 
     socket.join('room1'); 
     // echo to client they've connected 
     socket.emit('updatechat', 'SERVER', 'you have connected to room1'); 
     // echo to room 1 that a person has connected to their room 
     socket.broadcast.to('room1').emit('updatechat', 'SERVER', username + ' has connected to this room'); 
     socket.emit('updaterooms', rooms, 'room1'); 
    }); 

    // when the client emits 'sendchat', this listens and executes 
    socket.on('sendchat', function (data) { 
     // we tell the client to execute 'updatechat' with 2 parameters 
     io.sockets.in(socket.room).emit('updatechat', socket.username, data); 
    }); 

    socket.on('switchRoom', function(newroom){ 
     // leave the current room (stored in session) 
     socket.leave(socket.room); 
     // join new room, received as function parameter 
     socket.join(newroom); 
     socket.emit('updatechat', 'SERVER', 'you have connected to '+ newroom); 
     // sent message to OLD room 
     socket.broadcast.to(socket.room).emit('updatechat', 'SERVER', socket.username+' has left this room'); 
     // update socket session room title 
     socket.room = newroom; 
     socket.broadcast.to(newroom).emit('updatechat', 'SERVER', socket.username+' has joined this room'); 
     socket.emit('updaterooms', rooms, newroom); 
    }); 

    // when the user disconnects.. perform this 
    socket.on('disconnect', function(){ 
     // remove the username from global usernames list 
     delete usernames[socket.username]; 
     // update list of users in chat, client-side 
     io.sockets.emit('updateusers', usernames); 
     // echo globally that this client has left 
     socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected'); 
     socket.leave(socket.room); 
    }); 
}); 

我怎樣才能顯示apDiv1爲第一個5s給一個用戶,然後讓它消失,並vi對於第二個用戶,反之亦然?

更新與回答:

爲什麼這現在不工作?

app.js

var app = require('express').createServer() 
var io = require('socket.io').listen(app); 

app.listen(8080); 

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

// usernames which are currently connected to the chat 
var usernames = {}; 

// rooms which are currently available in chat 
var rooms = ['room1','room2','room3']; 

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

    // when the client emits 'adduser', this listens and executes 
    socket.on('adduser', function(username){ 
     // store the username in the socket session for this client 
     socket.username = username; 
     // store the room name in the socket session for this client 
     socket.room = 'room1'; 
     // add the client's username to the global list 
     usernames[username] = username; 
     // send client to room 1 
     socket.join('room1'); 
     // echo to client they've connected 
     socket.emit('updatechat', 'SERVER', 'you have connected to room1'); 
     // echo to room 1 that a person has connected to their room 
     socket.broadcast.to('room1').emit('updatechat', 'SERVER', username + ' has connected to this room'); 
     socket.emit('updaterooms', rooms, 'room1'); 
    }); 

    // when the client emits 'sendchat', this listens and executes 
    socket.on('sendchat', function (data) { 
     // we tell the client to execute 'updatechat' with 2 parameters 
     io.sockets.in(socket.room).emit('updatechat', socket.username, data); 
    }); 

    socket.on('switchRoom', function(newroom){ 
     // leave the current room (stored in session) 
     socket.leave(socket.room); 
     // join new room, received as function parameter 
     socket.join(newroom); 
     socket.emit('updatechat', 'SERVER', 'you have connected to '+ newroom); 
     // sent message to OLD room 
     socket.broadcast.to(socket.room).emit('updatechat', 'SERVER', socket.username+' has left this room'); 
     // update socket session room title 
     socket.room = newroom; 
     socket.broadcast.to(newroom).emit('updatechat', 'SERVER', socket.username+' has joined this room'); 
     socket.emit('updaterooms', rooms, newroom); 
    }); 
    function redLightGreenLight() { 
    socket1.emit('redLight'); 
    socket2.emit('greenLight'); 
} 

setTimer('redLightGreenLight()', 5000); 
    // when the user disconnects.. perform this 
    socket.on('disconnect', function(){ 
     // remove the username from global usernames list 
     delete usernames[socket.username]; 
     // update list of users in chat, client-side 
     io.sockets.emit('updateusers', usernames); 
     // echo globally that this client has left 
     socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected'); 
     socket.leave(socket.room); 
    }); 
}); 

的index.html

<script src="/socket.io/socket.io.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script> 
    var socket = io.connect('http://localhost:8080'); 

    // on connection to server, ask for user's name with an anonymous callback 
    socket.on('connect', function(){ 
     // call the server-side function 'adduser' and send one parameter (value of prompt) 
     socket.emit('adduser', prompt("What's your name?")); 
    }); 

    // listener, whenever the server emits 'updatechat', this updates the chat body 
    socket.on('updatechat', function (username, data) { 
     $('#conversation').append('<b>'+username + ':</b> ' + data + '<br>'); 
    }); 

    // listener, whenever the server emits 'updaterooms', this updates the room the client is in 
    socket.on('updaterooms', function(rooms, current_room) { 
     $('#rooms').empty(); 
     $.each(rooms, function(key, value) { 
      if(value == current_room){ 
       $('#rooms').append('<div>' + value + '</div>'); 
      } 
      else { 
       $('#rooms').append('<div><a href="#" onclick="switchRoom(\''+value+'\')">' + value + '</a></div>'); 
      } 
     }); 
    }); 

    function switchRoom(room){ 
     socket.emit('switchRoom', room); 
    } 
*socket.on('greenLight', function (data) { 
    // change div to enable sending a message 
}); 
socket.on('redLight', function (data) { 
    // change div to index.html* 
}); 
    // on load of page 
    $(function(){ 
     // when the client clicks SEND 
     $('#datasend').click(function() { 
      var message = $('#data').val(); 
      $('#data').val(''); 
      // tell server to execute 'sendchat' and send along one parameter 
      socket.emit('sendchat', message); 
     }); 

     // when the client hits ENTER on their keyboard 
     $('#data').keypress(function(e) { 
      if(e.which == 13) { 
       $(this).blur(); 
       $('#datasend').focus().click(); 
      } 
     }); 
    }); 

</script> 
<style type="text/css"> 
#greenLight { 
    position:absolute; 
    width:200px; 
    height:115px; 
    z-index:1; 
    left: 150px; 
    top: 20px; 
    background-color: #FF9900; 
    display:none; 
} 
</style> 

<div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;"> 
    <b>ROOMS</b> 
    <div id="rooms"></div> 
</div> 
<div style="float:left;width:300px;height:250px;overflow:scroll-y;padding:10px;"> 
    <div id="conversation"></div> 
    <input id="data" style="width:200px;" /> 
    <input type="button" id="datasend" value="send" /> 
</div> 
***<div id="greenLight"></div>*** 
+0

所以如何我可以阻止用戶當計數器> 0 – beginerplus

回答

1

答曰beginerplus,「也許是更好的服務器做的工作......如何改變我的腳本來做到這一點,請寫成例如在一個答案?」:

在服務器上:

function redLightGreenLight() { 
    socket1.emit('redLight'); 
    socket2.emit('greenLight'); 
} 

setTimer('redLightGreenLight()', 5000); 

在客戶端:

socket.on('greenLight', function (data) { 
    // change div to enable sending a message 
}); 
socket.on('redLight', function (data) { 
    // change div to index.html 
}); 
+0

謝謝我現在就試試! – beginerplus

+0

我用你建議的代碼更新我的問題,但錯誤在哪裏? – beginerplus

+0

我添加了你爲我寫的代碼,但在某個地方是這個問題? – beginerplus

0

有兩種方法:

  1. 服務器5秒後發送消息給每一個客戶端,使用的SetTimer(或setInterval以防需要重複):客戶端#1不能再發送消息,並且客戶端#2可以。然後每個客戶端通過更改div內容來處理消息。
  2. 每個客戶端自己使用setTimer或setInterval;根據您的使用情況,這可能會有一些優勢,但可能有定時器不能在同一時間啓動的缺點。
+0

的兩個事件可能不會完全同步無論如何由於方差在網絡延遲。 –

+1

確實如此,但是對於#1來說,時間通常會更少錯誤,我猜測它會足夠接近我假設他正在嘗試做的事情。沒有人在學校告訴我假設和猜測我會做一名工程師。 –

+0

是嗎?什麼是更好的解決方案# – beginerplus