Open happypeter opened 10 years ago
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);
});
<script>
<%# <%= render(:partial => 'real_time_chat', :locals => {room: "room one"}, :handlers => [:erb], :formats => [:js]) %>
</script>
http://socket.io/docs/rooms-and-namespaces/