Chat web con integración de Facebook

Necesito su ayuda chicos, estoy construyendo mi propio chat web para mi sitio de radio en línea. Ya tengo un chat web AJAX PHP de Tutorialzine. Quiero modificarlo. Pero no sé por dónde empezar. Quiero que se integre con Facebook. Lo quiero en lugar de pedir nombre de usuario y correo electrónico, habrá un botón que dice 'Conectarse a Facebook'. y la imagen de perfil y el nombre del usuario se guardarán automáticamente en la base de datos. Lo necesito de verdad. Y quiero que sea moderado. ¡Gracias! y Dios bendiga a todos! :)

ajax.php

<?php

/* Database Configuration. Add your details below */

$dbOptions = array(
'db_host' => 'localhost',
'db_user' => 'root',
'db_pass' => '',
'db_name' => 'chat'
);

/* Database Config End */


error_reporting(E_ALL ^ E_NOTICE);

require "classes/DB.class.php";
require "classes/Chat.class.php";
require "classes/ChatBase.class.php";
require "classes/ChatLine.class.php";
require "classes/ChatUser.class.php";

session_name('webchat');
session_start();

if(get_magic_quotes_gpc()){

// If magic quotes is enabled, strip the extra slashes
array_walk_recursive($_GET,create_function('&$v,$k','$v = stripslashes($v);'));
array_walk_recursive($_POST,create_function('&$v,$k','$v = stripslashes($v);'));
}

try{

// Connecting to the database
DB::init($dbOptions);

$response = array();

// Handling the supported actions:

switch($_GET['action']){

    case 'login':
        $response = Chat::login($_POST['name'],$_POST['email']);
    break;

    case 'checkLogged':
        $response = Chat::checkLogged();
    break;

    case 'logout':
        $response = Chat::logout();
    break;

    case 'submitChat':
        $response = Chat::submitChat($_POST['chatText']);
    break;

    case 'getUsers':
        $response = Chat::getUsers();
    break;

    case 'getChats':
        $response = Chat::getChats($_GET['lastID']);
    break;

    default:
        throw new Exception('Wrong action');
}

echo json_encode($response);
}
catch(Exception $e){
die(json_encode(array('error' => $e->getMessage())));
}

?>

script.js

$(document).ready(function(){

// Run the init method on document ready:
chat.init();

});

var chat = {

// data holds variables for use in the class:

data : {
    lastID      : 0,
    noActivity  : 0
},

// Init binds event listeners and sets up timers:

init : function(){

    // Using the defaultText jQuery plugin, included at the bottom:
    $('#name').defaultText('Nickname');
    $('#email').defaultText('Email (Gravatars are Enabled)');

    // Converting the #chatLineHolder div into a jScrollPane,
    // and saving the plugin's API in chat.data:

    chat.data.jspAPI = $('#chatLineHolder').jScrollPane({
        verticalDragMinHeight: 12,
        verticalDragMaxHeight: 12
    }).data('jsp');

    // We use the working variable to prevent
    // multiple form submissions:

    var working = false;

    // Logging a person in the chat:

    $('#loginForm').submit(function(){

        if(working) return false;
        working = true;

        // Using our tzPOST wrapper function
        // (defined in the bottom):

        $.tzPOST('login',$(this).serialize(),function(r){
            working = false;

            if(r.error){
                chat.displayError(r.error);
            }
            else chat.login(r.name,r.gravatar);
        });

        return false;
    });

    // Submitting a new chat entry:

    $('#submitForm').submit(function(){

        var text = $('#chatText').val();

        if(text.length == 0){
            return false;
        }

        if(working) return false;
        working = true;

        // Assigning a temporary ID to the chat:
        var tempID = 't'+Math.round(Math.random()*1000000),
            params = {
                id          : tempID,
                author      : chat.data.name,
                gravatar    : chat.data.gravatar,
                text        :  text.replace(/</g,'&lt;').replace(/>/g,'&gt;')
            };

        // Using our addChatLine method to add the chat
        // to the screen immediately, without waiting for
        // the AJAX request to complete:

        chat.addChatLine($.extend({},params));

        // Using our tzPOST wrapper method to send the chat
        // via a POST AJAX request:

        $.tzPOST('submitChat',$(this).serialize(),function(r){
            working = false;

            $('#chatText').val('');
            $('div.chat-'+tempID).remove();

            params['id'] = r.insertID;
            chat.addChatLine($.extend({},params));
        });

        return false;
    });

    // Logging the user out:

    $('a.logoutButton').live('click',function(){

        $('#chatTopBar > span').fadeOut(function(){
            $(this).remove();
        });

        $('#submitForm').fadeOut(function(){
            $('#loginForm').fadeIn();
        });

        $.tzPOST('logout');

        return false;
    });

    // Checking whether the user is already logged (browser refresh)

    $.tzGET('checkLogged',function(r){
        if(r.logged){
            chat.login(r.loggedAs.name,r.loggedAs.gravatar);
        }
    });

    // Self executing timeout functions

    (function getChatsTimeoutFunction(){
        chat.getChats(getChatsTimeoutFunction);
    })();

    (function getUsersTimeoutFunction(){
        chat.getUsers(getUsersTimeoutFunction);
    })();

},

// The login method hides displays the
// user's login data and shows the submit form

login : function(name,gravatar){

    chat.data.name = name;
    chat.data.gravatar = gravatar;
    $('#chatTopBar').html(chat.render('loginTopBar',chat.data));

    $('#loginForm').fadeOut(function(){
        $('#submitForm').fadeIn();
        $('#chatText').focus();
    });

},

// The render method generates the HTML markup 
// that is needed by the other methods:

render : function(template,params){

    var arr = [];
    switch(template){
        case 'loginTopBar':
            arr = [
            '<span><img src="',params.gravatar,'" width="23" height="23" />',
            '<span class="name">',params.name,
            '</span><a href="" class="logoutButton rounded">Logout</a></span>'];
        break;

        case 'chatLine':
            arr = [
                '<div class="chat chat-',params.id,' rounded"><span class="gravatar"><img src="',params.gravatar,
                '" width="23" height="23" onload="this.style.visibility=\'visible\'" />','</span><span class="author">',params.author,
                ':</span><span class="text">',params.text,'</span><span class="time">',params.time,'</span></div>'];
        break;

        case 'user':
            arr = [
                '<div class="user" title="',params.name,'"><img src="',
                params.gravatar,'" width="30" height="30" onload="this.style.visibility=\'visible\'" /></div>'
            ];
        break;
    }

    // A single array join is faster than
    // multiple concatenations

    return arr.join('');

},

// The addChatLine method ads a chat entry to the page

addChatLine : function(params){

    // All times are displayed in the user's timezone

    var d = new Date();
    if(params.time) {

        // PHP returns the time in UTC (GMT). We use it to feed the date
        // object and later output it in the user's timezone. JavaScript
        // internally converts it for us.

        d.setUTCHours(params.time.hours,params.time.minutes);
    }

    params.time = (d.getHours() < 10 ? '0' : '' ) + d.getHours()+':'+
                  (d.getMinutes() < 10 ? '0':'') + d.getMinutes();

    var markup = chat.render('chatLine',params),
        exists = $('#chatLineHolder .chat-'+params.id);

    if(exists.length){
        exists.remove();
    }

    if(!chat.data.lastID){
        // If this is the first chat, remove the
        // paragraph saying there aren't any:

        $('#chatLineHolder p').remove();
    }

    // If this isn't a temporary chat:
    if(params.id.toString().charAt(0) != 't'){
        var previous = $('#chatLineHolder .chat-'+(+params.id - 1));
        if(previous.length){
            previous.after(markup);
        }
        else chat.data.jspAPI.getContentPane().append(markup);
    }
    else chat.data.jspAPI.getContentPane().append(markup);

    // As we added new content, we need to
    // reinitialise the jScrollPane plugin:

    chat.data.jspAPI.reinitialise();
    chat.data.jspAPI.scrollToBottom(true);

},

// This method requests the latest chats
// (since lastID), and adds them to the page.

getChats : function(callback){
    $.tzGET('getChats',{lastID: chat.data.lastID},function(r){

        for(var i=0;i<r.chats.length;i++){
            chat.addChatLine(r.chats[i]);
        }

        if(r.chats.length){
            chat.data.noActivity = 0;
            chat.data.lastID = r.chats[i-1].id;
        }
        else{
            // If no chats were received, increment
            // the noActivity counter.

            chat.data.noActivity++;
        }

        if(!chat.data.lastID){
            chat.data.jspAPI.getContentPane().html('<p class="noChats">No chats yet</p>');
        }

        // Setting a timeout for the next request,
        // depending on the chat activity:

        var nextRequest = 1000;

        // 2 seconds
        if(chat.data.noActivity > 3){
            nextRequest = 2000;
        }

        if(chat.data.noActivity > 10){
            nextRequest = 5000;
        }

        // 15 seconds
        if(chat.data.noActivity > 20){
            nextRequest = 15000;
        }

        setTimeout(callback,nextRequest);
    });
},

// Requesting a list with all the users.

getUsers : function(callback){
    $.tzGET('getUsers',function(r){

        var users = [];

        for(var i=0; i< r.users.length;i++){
            if(r.users[i]){
                users.push(chat.render('user',r.users[i]));
            }
        }

        var message = '';

        if(r.total<1){
            message = 'No one is online';
        }
        else {
            message = r.total+' '+(r.total == 1 ? 'person':'people')+' online';
        }

        users.push('<p class="count">'+message+'</p>');

        $('#chatUsers').html(users.join(''));

        setTimeout(callback,15000);
    });
},

// This method displays an error message on the top of the page:

displayError : function(msg){
    var elem = $('<div>',{
        id      : 'chatErrorMessage',
        html    : msg
    });

    elem.click(function(){
        $(this).fadeOut(function(){
            $(this).remove();
        });
    });

    setTimeout(function(){
        elem.click();
    },5000);

    elem.hide().appendTo('body').slideDown();
}
};

// Custom GET & POST wrappers:

$.tzPOST = function(action,data,callback){
$.post('php/ajax.php?action='+action,data,callback,'json');
}

$.tzGET = function(action,data,callback){
$.get('php/ajax.php?action='+action,data,callback,'json');
}

// A custom jQuery method for placeholder text:

$.fn.defaultText = function(value){

var element = this.eq(0);
element.data('defaultText',value);

element.focus(function(){
    if(element.val() == value){
        element.val('').removeClass('defaultText');
    }
}).blur(function(){
    if(element.val() == '' || element.val() == value){
        element.addClass('defaultText').val(value);
    }
});

return element.blur();
}

preguntado el 03 de mayo de 12 a las 17:05

1 Respuestas

Si solo desea conectarse con Facebook para el nombre de usuario y la imagen, todo lo que necesita hacer es incluir el SDK de Javascript de Facebook, y luego use el Complemento del botón de inicio de sesión en IRS.gov o use la Autenticación del lado del cliente.

Si desea conectarse con el chat interno de Facebook, puede utilizar el API de chat que tiene dos métodos de autenticación: Plataforma de Facebook y Usuario Contraseña. Si desea el primer método (suena como lo que desea), deberá autenticar al usuario, ya sea con el flujo del lado del cliente o con el flujo del lado del servidor y pide el permiso "xmpp_login".

Hay ejemplos de php en la documentación de la API de chat.

contestado el 03 de mayo de 12 a las 17:05

Ahora, puedo obtener información de Facebook. pero mi problema es cómo editaré PHP, AJAX y JAVASCRIPTS. Estoy realmente confundido. :( - Torcuator Sedrik

Necesitas ser más específico. - nitzan tomer

Ahora puedo obtener la información de Facebook. pero también necesito modificar mis scripts PHP. pero no se que modificar. Puedo almacenar datos en mi base de datos. Pero solo se almacena en la base de datos. Y no le pasa nada a mi chatbox. :( - Torcuator Sedrik

No sé lo que estás haciendo, ni siquiera soy un programador de php. Tendrás que darte cuenta de eso tú mismo. Si tiene preguntas más específicas, hágalas, agréguele código. - nitzan tomer

Publicó el código, pero no tiene una pregunta específica, más que eso, no estoy en php. Tienes el código php que Facebook dio como ejemplo, prueba las cosas tú mismo y regresa con preguntas específicas. - nitzan tomer

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.