显示特定页面的聊天

时间:2018-07-19 18:30:18

标签: php ajax chat

我使用了现成的php ajax聊天脚本。问题是我无法根据特定页面允许聊天。

如何编辑代码以允许特定页面聊天,并防止所有页面中的数据输入都相同。

简单来说,我该如何允许聊天仅在特定页面中的两个选定用户之间进行。

HTML:

   <div id="chatTopBar" class="rounded"></div>
                        <div class="line_holder" id="chatLineHolder<?php echo htmlspecialchars($_GET['did']); ?>"></div>
                        <input type="hidden" name="did_hidden" id="did_hidden" value="<?php echo htmlspecialchars($_GET['did']); ?>" />
                        <!--<div id="chatUsers" class="rounded"></div> -->
                        <div id="chatBottomBar" class="rounded">
                            <div class="tip"></div>

                            <form id="loginForm" method="post" action="">
                                <input id="name"  name="name" value="<?php echo $_SESSION['real_name']; ?>-<?php echo htmlspecialchars($_GET['deal_no']); ?>" class="rounded" maxlength="16" />
                                <input id="email"  name="email" value="<?php echo $_SESSION['username']; ?>" class="rounded" />
                                <input type="submit" class="blueButton" value="Login" />
                            </form>





                            <form id="submitForm" method="post" action="">

                            <input type="hidden" name="did_hidden" id="did_hidden" value="<?php echo $_GET['did']; ?>" />
                                <textarea cols="40" id="chatText" name="chatText" class="rounded"></textarea>
                             <!--  <input id="chatText" name="chatText" class="rounded" maxlength="255" /> -->
                                <input type="submit" class="blueButton" value="send" />
                            </form>

                        </div>

Js:

$(document).ready(function(){

    //toggle

    $("#toggle_seller").click(function(){
        $("#toggle_seller_details").slideToggle();
    })

    $("#toggle_buyer").click(function(){
        $("#toggle_buyer_details").slideToggle();
    })


    // 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:
        var username=$("#name").val();
        var email=$("#email").val();
        $('#name').defaultText(username);
        $('#email').defaultText(email);
        var line_holder=$('.line_holder').attr('id');


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

        chat.data.jspAPI = $('#'+line_holder).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 line_holder=$('.line_holder').attr('id');

            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){
        // template=$('.line_holder').attr('id');
        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">خروج</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){
    var line_holder=$('.line_holder').attr('id');

        // 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 = $("#"+line_holder + " .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:

            $('#'+line_holder+' p').remove();
        }

        // If this isn't a temporary chat:
        if(params.id.toString().charAt(0) != 't'){
            var previous = $('#'+line_holder+' .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">لايوجد محادثات</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();
}

ajax.php

<?php
   session_start();
/* Database Configuration. Add your details below */

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

/* 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 'getdid':
        $response=Chat::getdid($_GET['did']);
        break;

        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':
           $Chat2=new Chat;
            $response = $Chat2->getChats($_GET['lastID']);
        break;

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

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

?>

chat.class.php:

<?php

/* The Chat class exploses public static methods, used by ajax.php */


class Chat {



    public static function login($name,$email){
        if(!$name || !$email){
            throw new Exception('Fill in all the required fields.');
        }

        if(!filter_input(INPUT_POST,'email',FILTER_DEFAULT)){
            throw new Exception('Your email is invalid.');
        }

        // Preparing the gravatar hash:
            $gravatar = md5(strtolower(trim($email)));
        //$gravatar = md5(uniqid());

        $user = new ChatUser(array(
            'name'      => $name,
            'gravatar'  => $gravatar
        ));

        // The save method returns a MySQLi object
        if($user->save()->affected_rows != 1){
            throw new Exception('اختار اسم مستعار اخر');
        }

        $_SESSION['user']   = array(
            'name'      => $name,
            'gravatar'  => $gravatar
        );

        return array(
            'status'    => 1,
            'name'      => $name,
            'gravatar'  => Chat::gravatarFromHash($gravatar)
        );
    }

    public static function checkLogged(){
        $response = array('logged' => false);

        if($_SESSION['user']['name']){
            $response['logged'] = true;
            $response['loggedAs'] = array(
                'name'      => $_SESSION['user']['name'],
                'gravatar'  => Chat::gravatarFromHash($_SESSION['user']['gravatar'])
            );
        }

        return $response;
    }

    public static function logout(){
        DB::query("DELETE FROM webchat_users WHERE name = '".DB::esc($_SESSION['user']['name'])."'");

        $_SESSION = array();

        unset($_SESSION['user']['name']);
        unset($_SESSION['user']['gravatar']);

        return array('status' => 1);
    }




    public static function submitChat($chatText){
        if(!$_SESSION['user']){
            throw new Exception('You are not logged in');
        }

        if(!$chatText){
            throw new Exception('You haven\' entered a chat message.');
        }

        $chat = new ChatLine(array(
            'author'    => $_SESSION['user']['name'],
            'gravatar'  => $_SESSION['user']['gravatar'],
            'text'      => $chatText
        ));

        // The save method returns a MySQLi object
        $insertID = $chat->save()->insert_id;

        return array(
            'status'    => 1,
            'insertID'  => $insertID
        );
    }

    public static function getUsers(){
        if($_SESSION['user']['name']){
            $user = new ChatUser(array('name' => $_SESSION['user']['name']));
            $user->update();
        }

        // Deleting chats older than 5 minutes and users inactive for 30 seconds

        DB::query("DELETE FROM webchat_lines WHERE ts < SUBTIME(NOW(),'0:30:0')");
        DB::query("DELETE FROM webchat_users WHERE last_activity < SUBTIME(NOW(),'0:3:60')");

        $result = DB::query('SELECT * FROM webchat_users ORDER BY name ASC LIMIT 18');

        $users = array();
        while($user = $result->fetch_object()){
            $user->gravatar = Chat::gravatarFromHash($user->gravatar,30);
            $users[] = $user;
        }

        return array(
            'users' => $users,
            'total' => DB::query('SELECT COUNT(*) as cnt FROM webchat_users')->fetch_object()->cnt
        );




    }






    public  function getChats($lastID) {
        $lastID = (int)$lastID;

        $didx= $_SESSION['dido'];

        //$result = DB::query('SELECT * FROM webchat_lines WHERE id > '.$lastID.' and deal_did="'.$new.'" ORDER BY id ASC');
        $result = DB::query('SELECT * FROM webchat_lines WHERE deal_did="'.$didx.'" ORDER BY id ASC');

        $chats = array();
        while($chat = $result->fetch_object()){

            // Returning the GMT (UTC) time of the chat creation:

            $chat->time = array(
                'hours'     => gmdate('H',strtotime($chat->ts)),
                'minutes'   => gmdate('i',strtotime($chat->ts))
            );

            $chat->gravatar = Chat::gravatarFromHash($chat->gravatar);

            $chats[] = $chat;
        }

        return array('chats' => $chats);
    }

    public static function gravatarFromHash($hash, $size=23){
        return 'http://www.gravatar.com/avatar/'.$hash.'?size='.$size.'&amp;default='.
                urlencode('http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?size='.$size);
    }
}


?>

1 个答案:

答案 0 :(得分:0)

在Javascript中,您可以使用window.location.pathname来确定页面的名称。

示例:如果您在主页上,则window.location.pathname将返回“ /”

因此,如果您只想在首页上输入内容,则将代码包装在其中:

if(window.location.pathname == '/') {
    //DOE GOES HERE`enter code here`
}