• Php7+Mysql8实现简单的网页聊天室功能


    php聊天室

    前端页面

    chat_room.html

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="../ico/index.ico" />
        <title>聊天室</title>
        <style>
            div {
                 32rem;
                yellowgreen;
            }
        </style>
    </head>


    <body>
        <script>
            document.write(new Date());
        </script>
        <div id="con">
        </div>
        <form action="" method="">
            <input type="text" name="uname" id="uname" size="10">
            <input type="text" size="40" id="content">
            <input type="button" value="发送" id="btn" onclick="demo02()">
        </form>
        <script>



            function createXmlHttpRequest() {
                var request = false;
                request = new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象,除 IE 外的浏览器都支持这个方法。
                if (request == false) {
                    request = ActiveXobject("Msxml12.XMLHTTP");//使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)。
                } else if (request == false) {
                    request = ActiveXobject("Microsoft.XMLHTTP");//使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.XMLHTTP)。
                } else if (request == false) {
                    //alert("创建request失败!");
                } else {
                    //alert("创建成功!")

                }
            }
            function demo02() {
                var request = false;
                request = new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象,除 IE 外的浏览器都支持这个方法。
                if (request == false) {
                    request = ActiveXobject("Msxml12.XMLHTTP");//使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)。
                } else if (request == false) {
                    request = ActiveXobject("Microsoft.XMLHTTP");//使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.XMLHTTP)。
                } else if (request == false) {
                    //alert("创建request失败!");
                } else {
                    //alert("创建成功!")

                }
                var unameobj = document.getElementById("uname");
                var uname = unameobj.value;

                var contentobj = document.getElementById("content");
                var content = contentobj.value
                contentobj.value = '';

                var mess = "username=" + uname + "&" + "content=" + content;
                // alert(mess);
                request.open("POST", "php/write.php", true);
                request.setRequestHeader("Content-type", 'application/x-www-form-urlencoded');
                request.send(mess);
            }





            function getMass() {
                var request = false;
                request = new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象,除 IE 外的浏览器都支持这个方法。
                if (request == false) {
                    request = ActiveXobject("Msxml12.XMLHTTP");//使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)。
                } else if (request == false) {
                    request = ActiveXobject("Microsoft.XMLHTTP");//使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.XMLHTTP)。
                } else if (request == false) {
                    //alert("创建request失败!");
                } else {
                    //alert("创建成功!")

                }
                createXmlHttpRequest();
                setInterval(function () {
                    request.open("GET", "php/read.php", true);
                    request.send(null);
                    request.onreadystatechange = function () {
                        if (request.readyState == 4 && request.status == 200) {
                            //alert("服务器响应数据:" + this.responseText);
                            document.getElementById("con").innerHTML = this.responseText;

                        }
                    }
                }, 2000);
            }
            getMass();
        </script>

    </body>

    </html>

    php后端页面

    conn.php:连接数据库

    <?php
    header("Content-Type:text/html;charset=utf8");
    $mysql_server_name = "localhost:3306"; //连接数据库端口
    $mysql_username = "root"; //用户名
    $mysql_password = "123456"; //密码
    $mysql_database = "test"; //数据库名称  
    $conn = new Mysqli($mysql_server_name, $mysql_username, $mysql_password, $mysql_database); //构造函数mysql
    // 检测连接
    if ($conn->connect_error) {
        die("连接失败: " . $conn->connect_error);
        }
        echo "连接成功";
     

    write.php:写入数据库消息

    <?php
    include_once 'conn.php';
    $username = $_POST["username"];
    $content = $_POST["content"];


    // $username = "username";
    // $content = "content";
    $time = date("Y/m/d H:i:s");
    if ($content == null) {
        echo "<script>alert('内容不能为空!')</script>";
    } else {
        # code...
        $sql = "INSERT INTO message(time,username,message) VALUES('$time','$username','$content')";
        $conn->query($sql);
    }

    read.php :读取数据库中存入的消息

    <?php
    include_once 'conn.php';
    $sql = "SELECT time,username,message FROM message";
    $array = $conn->query($sql);
    $data = mysqli_fetch_all($array, MYSQLI_NUM);
    echo '<br/>';
    // print_r($data);
       // echo file_get_contents("message.txt");
    //echo $data[]
    $count = count($data);
    for ($i=0; $i <$count ; $i++) { 
       $temp =$data[$i];
       for ($j=0; $j < 3; $j++) { 
          # code...
          echo $temp[$j];
          echo '------';

       }
       echo '<br/>';
    }
     
  • 相关阅读:
    Explicitly configure spring.jpa.open-in-view to disable this warning
    [LeetCode] 982. Triples with Bitwise AND Equal To Zero 按位与为零的三元组
    [LeetCode] 981. Time Based Key-Value Store 基于时间的键值存储
    [LeetCode] 980. Unique Paths III 不同的路径之三
    [LeetCode] 979. Distribute Coins in Binary Tree 在二叉树中分配硬币
    [LeetCode] 978. Longest Turbulent Subarray 最长湍流子数组
    [LeetCode] 976. Largest Perimeter Triangle 最大周长的三角形
    [LeetCode] 977. Squares of a Sorted Array 有序数组的平方值
    [LeetCode] 975. Odd Even Jump 奇偶跳跃
    [LeetCode] 974. Subarray Sums Divisible by K 子数组数字之和可被K整除
  • 原文地址:https://www.cnblogs.com/youlingdada-top/p/13086504.html
Copyright © 2020-2023  润新知