weixin_33713503 2016-03-09 15:00 采纳率: 0%
浏览 46

替换重新加载页面

I am developing a simple chat application using php. I am inserting message into database using ajax and I am reloading page after every 5 seconds so that if any new message arrives it gets refresh and the user will be able to see the new message but its not a good way to do that.I want a solution for this so that if any new message arrives the user can see that without reloading page after every 5 seconds. javascript code I have used is:

            $(document).ready(function() {
            debugger;
    var percentageToScroll = 100;
    var height = $('.panel-body').innerHeight();
    var scrollAmount = height;
     var overheight = jQuery(document).height() - jQuery(window).height();
jQuery(".divcls").animate({scrollTop: scrollAmount}, 900);    
});
setTimeout(function(){
   window.location.reload(1);
}, 5000);

        function checkMsg()
        {
            //alert("Enter");
            var message = document.getElementById("msg").value;
            //alert(message);
            if (message === "")
            {
                alert("Please Enter Message");
            } else
            {
                submitChat(message);
            }

        }
        ;
        function submitChat(message)
        {
            // alert("Enter");
            var msg = message;
            var xmlhttp = new XMLHttpRequest();

            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                    document.getElementById('msg').innerHTML = "";
                    location.reload();

                }
            }
            xmlhttp.open('GET', 'insert.php?msg=' + msg, true);
            xmlhttp.send();

        };

snippet code of chat box home is:

     <div style="overflow: scroll ;max-height: 650px; width: 100%;" class="divcls">
            <div class="panel-body">

<ul class="media-list">
    <?php
    include './connect.php';
                                        $sql = "select * from chatlog";
                                        $result = mysqli_query($con,$sql);
                                        while ($row = mysqli_fetch_array($result)) {
                                            ?>
                                    <li class="media">

                                        <div class="media-body">

                                            <div class="media">
                                                <a class="pull-left" href="#">
                                                    <img class="media-object img-circle " src="assets/img/user.png" />
                                                </a>
                                                <div class="media-body">
                                                    <span id="chatData"><?php echo $row["Msg"]; ?></span>
                                                    <br/>
                                                   <small class="text-muted"><?php echo $row["UserName"]; ?> | 23rd June at 5:00pm</small>
                                                    <hr />
                                                </div>
                                            </div>

                                        </div>
                                    </li>
                                    <?php
                                        }
                                        ?>
                                </ul>
                </div>
            </div>

insert page:

    <?php

require("connect.php");
$msg=$_GET['msg'];
$result=mysqli_query($con, "INSERT INTO chatlog(UserName, Msg) VALUES('admin','$msg')");

    header("location:index.php");
?>
  • 写回答

1条回答 默认 最新

  • weixin_33716557 2016-03-09 18:00
    关注

    Warning: this answer is a long one. So, grab your coffee and be prepared.

    First of all, I would like to address this code:

    <?php
    
    require("connect.php");
    $msg=$_GET['msg'];
    $result=mysqli_query($con, "INSERT INTO chatlog(UserName, Msg) VALUES('admin','$msg')");
    
    header("location:index.php");
    ?>
    

    Please tell me this is not a direct copy and paste from your source code? If so, you severely need to edit this to protect against SQL Injection. To aid with this, please try something like the following instead:

    <?php
    
    require("connect.php");
    $msg= $con->real_escape_string($_GET['msg']);
    $result=mysqli_query($con, "INSERT INTO chatlog(UserName, Msg) VALUES('admin','$msg')");
    
    header("location:index.php");
    ?>
    

    You may also want to consider using prepared statements, but real_escape_string() will at least prevent injection by escaping potentially harmful messages. Consider reading this SO Question for more information about best practices for preventing SQL Injection attacks. As an additional security note, you should also look into applying filters to prevent XSS.

    Anyway, I know that is not the topic of your question, but I always feel inclined to mention those sort of flaws when I see them. (Fixing them protects you, your website, and your users.) Onto your actual question, though!

    I have seen a lot of "chat-box" implementations and most of them work in one of two ways:

    1. The webpage routinely queries/polls a backend script which returns the properly formatted HTML for the messages that are in the chatbox; or
    2. The webpage tracks all messages with an ID (sometimes using localStorage or sessionStorage), the webpage queries a backend script with the ID of the last received message, and the backend script returns any messages that have been received since that ID (any messages that are newer than the last received message).

    Personally, I am a fan of the second method, but sometimes the first method is easier to implement. Also, to use the second method, your database would need to store an auto-incrementing unique identifier with your chatlog entries.


    Method One Implementation

    Because the second method can get a bit convoluted depending on how you do it, I'll write up an example of the first method.

    The following would be my backend PHP code that would be polled (We'll call it get_chat.php):

    <?php
    // File: backend/get_chat.php
    require_once('./connect.php');
    $sql = "select * from chatlog";
    $result = mysqli_query($con,$sql);
    while ($row = mysqli_fetch_array($result)) {
    
    ?>
    <li class="media">
        <div class="media-body">
    
            <div class="media">
                <a class="pull-left" href="#">
                    <img class="media-object img-circle " src="assets/img/user.png" />
                </a>
                <div class="media-body">
                    <span id="chatData"><?php echo $row["Msg"]; ?></span>
                    <br/>
                   <small class="text-muted"><?php echo $row["UserName"]; ?> | 23rd June at 5:00pm</small>
                    <hr />
                </div>
            </div>
    
        </div>
    </li>
    <?php
    
    } /* End While Loop */
    
    ?>
    

    Note: This code will produce multiple spans with id="chatData". I have left the code like this because that is what your original code does as well. However, you should not have repeat IDs. I will leave that up to you to correct as you see fit.

    Next, we'll need Javascript to interact with this code:

    // We will want to set an initial timeout to start the refreshChat() 'cycle' (so to speak)
    var timerId = setTimeout(function(){
                                refreshChat();
                            },
                    3000
                ); /* End setTimeout(); */
    
    function refreshChat(){
        var xmlhttp = new XMLHttpRequest();
    
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState === 4) { // Request finished
    
                // Check if the status code indicates success
                if(xmlhttp.status === 200){
                    var chatbox = document.getElementById('chatBox');
                    chatbox.innerHTML = xmlhttp.responseText; // Set the inner-chatbox body
                } // Else, something went wrong.
    
                // Regardless of whether or not the request succeeded, the request has finished
                // so we should now set up a new timeout to automatically refresh the window again.
    
                // First, we'll try to clear the timeout so we don't potentially end up with two timeouts (which, in theory, would only happen if there is an error):
                clearTimeout(timerId);
    
                // Now we'll just go ahead and set the new timeout:
                timerId = setTimeout(function(){
                                            refreshChat();
                                        },
                                    3000
                                ); /* End setTimeout(); */
            }
        } // End readyStateChange function
    
        var cacheBreaker = new Date().getTime(); // Current time to prevent caching
        xmlhttp.open('GET', 'backend/get_chat.php?anticache=' + cacheBreaker, true);
        xmlhttp.send();
    };
    

    Okay, now we have Javascript which calls a PHP script, and then receives the HTML of all of the latest chat messages. However, we're still not quite done. Now we will need to specify where that HTML goes. In the Javascript we are saying document.getElementById('chatBox');, but we do not actually have any elements with the ID chatBox currently.

    To solve this, and to get the reloaded HTML into the right spot, all we need to do is change <ul class="media-list"> to <ul id="chatBox" class="media-list">. Now the Javascript will know which element we are inserting the returned HTML into, and it will be able to update the list of messages.

    But we're not done just yet. Now we need to actually do something about the submitChat(message) function. We don't want it to reload the page, do we? And we probably don't want the user to submit a message and then have to wait around for 3 seconds before it appears, so, we should replace submitChat() with the following:

    function submitChat(message){
        // alert("Enter");
        var msg = message;
        var xmlhttp = new XMLHttpRequest();
    
        xmlhttp.onreadystatechange = function () {
            // Handle this the same we handle refreshing the chat:
            if (xmlhttp.readyState === 4) { // Request finished
    
                // Check if the status code indicates success
                if(xmlhttp.status === 200){
                    var chatbox = document.getElementById('chatBox');
                    chatbox.innerHTML = xmlhttp.responseText; // Set the inner-chatbox body
                } // Else, something went wrong.
    
                // First, we'll try to clear the timeout so we don't prematurely run refreshChat():
                clearTimeout(timerId);
    
                // Now we'll just go ahead and set the new timeout:
                timerId = setTimeout(function(){
                                            refreshChat();
                                        },
                                    3000
                                ); /* End setTimeout(); */
            }
        }
        xmlhttp.open('GET', 'insert.php?msg=' + msg, true);
        xmlhttp.send();
    
    };
    

    Now, to use this new Javascript, we'll need to slightly modify our insert.php code:

    <?php
    
    require("connect.php");
    $msg= $con->real_escape_string($_GET['msg']);
    $result=mysqli_query($con, "INSERT INTO chatlog(UserName, Msg) VALUES('admin','$msg')");
    
    // And now we'll return the newest messages in the database:
    include_once('get_chat.php');
    ?>
    

    And that's it. We now have a chat-box that will automatically refresh itself, allow someone to post a message, and which has basic protection against SQL Injection attacks.

    Again, I encourage you to look into adding XSS protection, and you may want to consider writing this using the second method described above. However, method two would be too long and complex to implement here, and XSS protection is out of the scope of this question, so I'll leave those up to you.

    Note: I have not tested the code here, so it may contain some errors. I have attempted to read through all of the code to double check it, but I am sure I missed some minor errors here-and-there. Nonetheless, this should get you started down the right path. If something does not make sense, please do not hesitate to leave a comment and ask.

    评论

报告相同问题?

悬赏问题

  • ¥15 MATLAB怎么通过柱坐标变换画开口是圆形的旋转抛物面?
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿