Php 与Facebook集成的网络聊天

我需要你们的帮助，我正在为我的在线广播网站建立我自己的网络聊天。我已经有一个来自Tutorialzine的AJAX PHP网络聊天。我想修改它。但我不知道从哪里开始。我希望它与Facebook整合。我想要它，而不是要求用户名和电子邮件，会有一个按钮，上面写着“连接到Facebook”。用户的个人资料图片和姓名将自动保存到数据库中。我真的需要它。我希望它能得到缓和。非常感谢。愿上帝保佑每一个人！：）

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();
}

$（文档）.ready（函数（）{
//在文档就绪时运行init方法：
chat.init（）；
});
变量聊天={
//数据保存在类中使用的变量：
数据：{
lastID:0，
无活动：0
},
//Init绑定事件侦听器并设置计时器：
init:function（）{
//使用底部包含的defaultText jQuery插件：
$（'#name'）。默认文本（'昵称'）；
$（'#email'）.defaultText（'电子邮件（已启用重力仪）'）；
//将#chatLineHolder div转换为jScrollPane，
//并将插件的API保存在chat.data中：
chat.data.jspAPI=$（“#chatLineHolder”）.jScrollPane({
垂直排水高度：12，
垂直排水高度：12
}).data（'jsp'）；
//我们使用工作变量来防止
//多表格提交：
var=false；
//将某人记录到聊天中：
$（'#loginForm'）。提交（函数（）{
如果（工作）返回错误；
工作=真实；
//使用tzPOST包装器函数
//（在底部定义）：
$.tzPOST（'login'，$（this）.serialize（），函数（r）{
工作=假；
if（r.error）{
chat.displayError（r.error）；
}
else chat.login（r.name，r.gravatar）；
});
返回false；
});
//提交新的聊天记录：
$（“#submitForm”）.submit（函数（）{
var text=$（'#chatText'）.val（）；
如果（text.length==0）{
返回false；
}
如果（工作）返回错误；
工作=真实；
//为聊天室分配临时ID：
var tempID='t'+Math.round（Math.random（）*1000000），
参数={
id:tempID，
作者：chat.data.name，
gravatar:chat.data.gravatar，
text:text.replace（//g'，）
};
//使用addChatLine方法添加聊天记录
//立即转到屏幕，无需等待
//要完成的AJAX请求：
addChatLine（$.extend（{}，params））；
//使用tzPOST包装器方法发送聊天
//通过POST AJAX请求：
$.tzPOST（'submitChat'，$（this）.serialize（），函数（r）{
工作=假；
$（'#chatText'）.val（''）；
$（'div.chat-'+tempID）.remove（）；
params['id']=r.insertID；
addChatLine（$.extend（{}，params））；
});
返回false；
});
//正在注销用户：
$（'a.logoutButton'）.live（'click'，function（））{
$（'#chatTopBar>span'）.fadeOut（函数（）{
$（this.remove（）；
});
$（'#submitForm'）.fadeOut（函数（）{
$（'#loginForm'）.fadeIn（）；
});
$.tzPOST（“注销”）；
返回false；
});
//检查用户是否已登录（浏览器刷新）
$.tzGET（'checkLogged'，函数（r）{
如果（r.logged）{
登录（r.loggedAs.name，r.loggedAs.gravatar）；
}
});
//自动执行超时函数
（函数getChatsTimeoutFunction（）{
getChats（getchatsimeoutfunction）；
})();
（函数getUsersTimeoutFunction（）{
getUsers（getUsersTimeoutFunction）；
})();
},
//login方法隐藏并显示
//用户的登录数据并显示提交表单
登录：函数（名称、gravatar）{
chat.data.name=名称；
chat.data.gravatar=gravatar；
$（'#chatTopBar'）.html（chat.render（'loginTopBar'，chat.data））；
$（“#loginForm”）.fadeOut（函数（）{
$（'#submitForm'）.fadeIn（）；
$（'#chatterxt'）.focus（）；
});
},
//render方法生成HTML标记
//这是其他方法所需要的：
渲染：函数（模板、参数）{
var-arr=[]；
开关（模板）{
案例“loginTopBar”：
arr=[
'',
''，参数名称，
''];
打破
“聊天热线”案例：
arr=[
“，”，params.author，
“：”，params.text'，params.time'，”]；
打破
案例“用户”：
arr=[
''
];
打破
}
//单个数组联接比
//多重串联
返回arr.join（“”）；
},
//addChatLine方法将聊天条目广告到页面中
addChatLine:函数（参数）{
//所有时间都显示在用户的时区中
var d=新日期（）；
if（参数时间）{
//PHP以UTC（GMT）为单位返回时间。我们使用它来输入日期
//对象，然后将其输出到用户的timezone.JavaScript中
//在内部为我们转换它。
d、 设定值（参数时间小时，参数时间分钟）；
}
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）；
如果（存在。长度）{
存在。删除（）；
}
如果（！chat.data.lastID）{
//如果这是第一次聊天，请删除
//段落中说没有：
$（'#chatLineHolder p'）。删除（）；
}
//如果这不是临时聊天：
if（params.id.toString（）.charAt（0）！='t'）{
var previous=$（'#chatLineHolder.chat-'+（+params.id-1））；
如果（上一个长度）{
前.后（标记）；
}
else chat.data.jspAPI.get