How to open chat box if roomid more than 1

Lau_1 12 Junior Poster in Training

11 Years Ago

I have no idea how to open extra chat box if room_id record more than 1

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Admin</title>

<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    // load messages every 1000 milliseconds from server. (1 second = 1000milliseconds)
    var roomID = $('#room_id').val();
    load_data = {'fetch':1,'roomID':roomID};
    window.setInterval(function(){
     $.post('shoutAdmin.php', load_data,  function(data) {
        $('.message_box').html(data);
        //var scrolltoh = $('.message_box')[0].scrollHeight;
        //$('.message_box').scrollTop(scrolltoh);
     });
    }, 1000);

    //method to trigger when user hits enter key
    $("#shout_message").keypress(function(evt) {
        if(evt.which == 13) {
                var iusername = $('#shout_username').val();
                var imessage = $('#shout_message').val();
                var roomID = $('#room_id').val();
                post_data = {'username':iusername, 'message':imessage, 'roomID':roomID};

                //send data to "shout.php" using jQuery $.post()
                $.post('shoutAdmin.php', post_data, function(data) {

                    //append data into messagebox with jQuery fade effect!
                    $(data).hide().appendTo('.message_box').fadeIn();

                    //keep scrolled to bottom of chat!
                    var scrolltoh = $('.message_box')[0].scrollHeight;
                    $('.message_box').scrollTop(scrolltoh);

                    //reset value of message box
                    $('#shout_message').val('');

                }).fail(function(err) { 

                //alert HTTP server error
                alert(err.statusText); 
                });
            }
    });

    //toggle hide/show shout box
    $(".close_btn").click(function (e) {
        //get CSS display state of .toggle_chat element
        var toggleState = $('.toggle_chat').css('display');

        //toggle show/hide chat box
        $('.toggle_chat').slideToggle();

        //use toggleState var to change close/open icon image
        if(toggleState == 'block')
        {
            $(".header div").attr('class', 'open_btn');
        }else{
            $(".header div").attr('class', 'close_btn');
        }


    });
});

</script>
</head>

<body>
<div class="shout_box">
<div class="header">Live Customer Service <div class="close_btn">&nbsp;</div></div>
  <div class="toggle_chat">
  <div class="message_box">
    </div>
    <div class="user_info">
    <input name="shout_username" id="shout_username" type="hidden" placeholder="Your Name" maxlength="15" value="admin"/>
    <input name="room_id" id="room_id" type="hidden" placeholder="Your Name" maxlength="15" value="roomID20"/>
   <input name="shout_message" id="shout_message" type="text" placeholder="Type Message Hit Enter" maxlength="100" /> 
    </div>

    </div>
</div>

shout.php

<?php

if($_POST)
{

    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
        die();
    } 

    if(isset($_POST["message"]) &&  strlen($_POST["message"])>0)
    {
        $username = filter_var(trim($_POST["username"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
        $message = filter_var(trim($_POST["message"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
        $room_id = filter_var(trim($_POST["roomID"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
        $user_ip = $_SERVER['REMOTE_ADDR'];


        //insert new message in db
        if(mysqli_query($sql_con,"INSERT INTO shout_box(user, message, ip_address, room_id) value('$username','$message','$user_ip','$room_id')"))
        {
            $msg_time = date('h:i A M d',time()); // current time
            echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$username.'</span><span class="message">'.$message.'</span></div>';
        }

        // delete all records except last 10, if you don't want to grow your db size!
        mysqli_query($sql_con,"DELETE FROM shout_box WHERE id NOT IN (SELECT * FROM (SELECT id FROM shout_box ORDER BY id DESC LIMIT 0, 10) as sb)");
    }

    elseif($_POST["fetch"]==1)
    {
        $room_id = $_POST["roomID"];
        $results = mysqli_query($sql_con,"SELECT user, message, date_time FROM (select * from shout_box ORDER BY id DESC LIMIT 10) shout_box ORDER BY shout_box.id ASC");
        while($row = mysqli_fetch_array($results))
        {
            $msg_time = date('h:i A M d',strtotime($row["date_time"])); //message posted time
            echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$row["user"].'</span> <span class="message">'.$row["message"].'</span></div>';
        }
    }
    else
    {
        header('HTTP/1.1 500 Are you kiddin me?');
        exit();
    }
}



</body>
</html>

I try to do by mysql, which select only user comments,(excluded admin).
Assume the record for $testing = 2, it will keep loop the chat box. Since it will update every second.

        $testing = mysqli_query($sql_con, "SELECT count(DISTINCT room_id) as total FROM shout_box where room_id != 'roomID20'");

Any idea?

Edited 11 Years Ago by Lau_1

1 Contributor
0 Replies
118 Views

Dani AI

Generated 10 Months Ago

— focused plan to stop the repeating chat boxes and support multiple rooms

Your client currently loads or appends raw HTML every second, so when the server returns multiple room blocks the browser keeps inserting them repeatedly. Two reliable patterns avoid that:

Server returns structured data (JSON) grouped by room_id; the client creates one DOM container per room once and then replaces only that container’s inner HTML with the messages for that room. This prevents repeated creation of the same chat box.
If you must keep HTML responses, return per-room fragments and make the client request only the room(s) it needs and update a specific selector such as div.message_box[data-room="roomID20"] instead of a global .message_box.

Recommended SQL (MySQL 8+) to fetch the last N messages per room in a single query (useful when returning JSON for many rooms):

SELECT room_id, user, message, date_time
FROM (
  SELECT *, ROW_NUMBER() OVER (PARTITION BY room_id ORDER BY id DESC) rn
  FROM shout_box
  WHERE room_id IN ('roomA','roomB',...)
) t
WHERE rn <= 10
ORDER BY room_id, id ASC;

Return a JSON shape like:

{
  "rooms": {
    "roomA": [{ "user":"admin", "message":"...", "time":"..." }, ...],
    "roomB": [ ... ]
  }
}

Client pseudocode: on first load create containers for each room; then use one periodic AJAX call that requests messages for the open rooms, parse the JSON, and do a targeted container.innerHTML = render(messages) for each room. Avoid creating a separate setInterval per room (that scales poorly).

Security & performance notes: use prepared statements or PDO for inserts/reads (see PHP mysqli prepared statements), and consider WebSockets (Ratchet for PHP) or lower polling frequency for many rooms to reduce DB load. For reference on window functions and prepared statements consult the MySQL and PHP manuals.

Be the first to reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.