happypeter / classroom

Nodejs+socket.io+Redis + rails 搭建的一个 demo 程序
20 stars 5 forks source link

have more than one chatroom #12

Open happypeter opened 10 years ago

happypeter commented 10 years ago

http://socket.io/docs/rooms-and-namespaces/

io.on('connection', function(socket){
  var addedUser = false;
  var arrayOfUsername = [];
  var room = "";

  socket.on('add user', function(data) {
    socket.join(data.room);
    room = data.room;

    addedUser = true;
    socket.username = data.username;
    // add the client's username to the global list
    usernames[data.username] = data.username;

    // store username to redis
    //redis.lpush("users", data.username);

    arrayOfUsername = Object.keys(usernames);
    ++numUsers;
    var t = new Date();
    socket.broadcast.to(room).emit('user joined', {username: socket.username, loginTime: t.getTime()});

  });

  socket.on('new message', function(data){
    socket.broadcast.to(room).emit('new message', {
      username: socket.username,
      message: data
    });
  });

  socket.on('disconnect', function () {
    socket.leave(room);
});
happypeter commented 10 years ago

_real_time_chat.js.erb

var COLORS = [
  '#e21400', '#91580f', '#f8a700', '#f78b00',
  '#58dc00', '#287b00', '#a8f07a', '#4ae8c4',
  '#3b88eb', '#3824aa', '#a700ff', '#d300e7'
];

var $messages = $('.messages'); // Messages area

var socket = io.connect("<%= Settings.socket_url %>");

var room = "<%= room %>";

var username = "<%= current_user_name %>";

socket.emit('add user', {username: username, room: room});

// Gets the color of a username through our hash function
function getUsernameColor (username) {
  // Compute hash code
  var hash = 7;
  for (var i = 0; i < username.length; i++) {
     hash = username.charCodeAt(i) + (hash << 5) - hash;
  }
  // Calculate color
  var index = Math.abs(hash % COLORS.length);
  return COLORS[index];
}

function addLoginMsg(data) {
  moment.lang("zh-cn");
  var time = moment(parseInt(data.loginTime, 10)).format("MMMD日 Ah:mm");

  var $username = $('<span class="username">').text(data.username)
                   .css('color', getUsernameColor(data.username));

  var $date = $('<span class="date">').text(" joined at " + time);

  var $participant = $('<li>').addClass(data.username).append($username, $date);

  $('.participants').append($participant);
}

// Adds the visual chat message to the message list
function addChatMessage (data) {
  var $usernameDiv = $('<span class="username">').text(data.username)
                       .css('color', getUsernameColor(data.username));

  var $messageBodyDiv = $('<span class="messagebody">').text(data.message);

  var $messageDiv = $('<li class="message">').data('username', data.username)
                      .append($usernameDiv, $messageBodyDiv);

  $('.messages').append($messageDiv);
  $messages[0].scrollTop = $messages[0].scrollHeight;
}

// Prevents input from having injected markup
function cleanInput (input) {
  return $('<div/>').text(input).text();
}

$('form').submit(function(){
  var message = $('.msg').val();
  // Prevent markup from being injected into the message
  message = cleanInput(message);
  // if there is a non-empty message and a socket connection
  if (message) {
    $('.msg').val('');
    addChatMessage({
      username: username,
      message: message
    });
    // tell server to execute 'new message' and send along one parameter
    socket.emit('new message', message);
  }
  return false;
});

// socket events

socket.on('new message', function(data){
  addChatMessage(data);
});

socket.on('user joined', function(data) {
  addLoginMsg(data);
});

socket.on('user left', function(data){
  $(".participants ." + data.username + " .username").css("color", "gray");
  setTimeout(function() { $(".participants ." + data.username).fadeOut(3000); }, 1000);
});
happypeter commented 10 years ago

in roomone.html.erb

<script>
  <%# <%= render(:partial => 'real_time_chat', :locals => {room: "room one"}, :handlers => [:erb], :formats => [:js]) %>
</script>
happypeter commented 10 years ago

http://raytaylorlin.com/category/Tech/web/Node.js/socket-io-advanced/