Electronic bulletin board - based on PHP and JSP, can also be used as a chat tool, cross-platform, cross-network transmission of text information

Main functions: A chat tool is written based on PHP and JavaScript, and it can be deployed on a vps or host space that supports php. The original idea is to directly cp the content generated by chatgpt on the remote desktop, but at the same time, I don’t want to put too much pressure on the remote host with only 1G and 1 core, so I use the web page as an intermediary to achieve the goal.

Screenshot of the final form:

How to do it will not be described in detail, just paste the code directly.

1. The code of index.php

<?php
session_start();

if(isset($_GET['logout'])){

        //Simple exit message
        $logout_message = "<div class='msgln'><span class='left-info'>User <b class='user-name-left'>". $_SESSION['name'] ."</b> has left the chat session.</span><br></div>";
    file_put_contents("log.html", $logout_message, FILE_APPEND | LOCK_EX);

        session_destroy();
        header("Location: index.php"); //Redirect the user
}

if(isset($_POST['enter'])){
    if($_POST['name'] != ""){
                $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
        }
        else{
                echo '<span class="error">Please type in a name</span>';
        }
}
function loginForm(){
        echo'
<div id="loginform">
<p>请输入您的用户名!</p>
<form action="index.php" method="post">
<label for="name">用户名 &mdash;</label>
<input type="text" name="name" id="name" />
<input type="submit" name="enter" id="enter" value="确定" />
</form>
</div>
';
}
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>电子白板!</title>
        <meta name="description" content="Tuts+ Chat Application" />
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
<?php
if(!isset($_SESSION['name'])){
        loginForm();
}
else{
?>
        <div id="wrapper">
            <div id="menu">
                <p class="welcome">欢迎您： <b><?php echo $_SESSION['name']; ?></b></p>
                <p class="logout"><a id="exit" href="#">退出!</a></p>
            </div>
            <div id="chatbox">
            <?php
             if(file_exists("log.html") && filesize("log.html") > 0){
             $contents = file_get_contents("log.html");
             echo $contents;
              }
               ?>
            </div>
           <div id="inputarea">
            <form name="message" action="">
                <textarea name="usermsg" id="usermsg" rows="15" cols="60"/></textarea>
                <input name="submitmsg" type="submit" id="submitmsg" value="发送" />
            </form>
            </div>
        </div>


<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
            // jQuery Document
    $(document).ready(function () {

//If user submits the form 如果用户提交表单
                $("#submitmsg").click(function () {
                    var clientmsg = $("#usermsg").val();
                    $.post("post.php", { text: clientmsg });
                    $("#usermsg").val("");
                    return false;
                });

//加载包含聊天日志的文件Load the file containing the chat log
function loadLog(){
        $.ajax({
                url: "log.html",
                cache: false,
                success: function(html){
                        $("#chatbox").html(html); //Insert chat log into the #chatbox div
                        //Auto-scroll 聊天内容过多的话，自动滚动
                        var newscrollHeight = $("#chatbox")[0].scrollHeight - 20; //Scroll height after the request
                        if(newscrollHeight > oldscrollHeight){
                                $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
                        }
                },
        });
}
//监测log.html文档的内容是否有变化，有变化则调动 loadLog()功能，重新加载
function checkLog() {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'log.html');
xhr.onload = function() {
if (xhr.status === 200) {
let currentLog = xhr.responseText;
if (currentLog !== localStorage.getItem('log')) {
localStorage.setItem('log', currentLog);
loadLog();
}
}
};
xhr.send();
}
// 每1秒执行一次上面的监测功能。
setInterval(checkLog, 1000);
// setInterval (loadLog, 2500); //2.5秒更新一次数据Reload file every 2500 ms or x ms if you wish to change the second parameter
                //If user wants to end session 如果用户想要退出
        $("#exit").click(function(){
                var exit = confirm("您确定要退出聊天吗?");
                if(exit==true){window.location = 'index.php?logout=true';}
        });
    });
        </script>
</script>
</body></html>
<?php
}
?>

2. The source code of post.php

<?php
session_start();
if(isset($_SESSION['name'])){
        $text = $_POST['text'];

        $text_message = "<div class='msgln'><span class='chat-time'>".date("g:i A")."</span> <b class='user-name'>".$_SESSION['name']."</b> ".nl2br($text)."<br></div>";

    file_put_contents("log.html", $text_message, FILE_APPEND | LOCK_EX);
}
?>

3. Page settings sytle.css source code

* {
    margin: 0;
    padding: 0;
  }

  body {
    margin: 20px auto;
    font-family: "Lato";
    font-weight: 300;
  }

  form {
    padding: 15px 25px;
    display: flex;
    gap: 10px;
    justify-content: center;
  }

  form label {
    font-size: 1.5rem;
    font-weight: bold;
  }

  input {
    font-family: "Lato";
  }

  a {
    color: #0000ff;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  #wrapper,
  #loginform {
    margin: 0 auto;
    padding-bottom: 25px;
    background: #eee;
    width: 1200px;
    max-width: 100%;
    border: 2px solid #212121;
    border-radius: 4px;
  }

  #loginform {
    padding-top: 18px;
    text-align: center;
  }

  #loginform p {
    padding: 15px 25px;
    font-size: 1.4rem;
    font-weight: bold;
  }

  #chatbox {
    text-align: left;
    margin: 0 auto;
    margin-bottom: 25px;
    padding: 10px;
    background: #fff;
    height: 500px;
    width: 980px;
    border: 1px solid #a7a7a7;
    overflow: auto;
    border-radius: 4px;
    border-bottom: 4px solid #a7a7a7;
  }
  #inputarea {
    text-align: left;
    margin: 0 auto;
height:100px;   /* 调整聊输入窗口所在div区域高度*/
width:1050px;
}
  #usermsg {
    flex: 1;
    border-radius: 4px;
    border: 1px solid #ff9800;
    height: 80px;
    width:950px
}

  #name {
    border-radius: 4px;
    border: 1px solid #ff9800;
    padding: 2px 8px;
  }

  #submitmsg,
  #enter{
    background: #ff9800;
    border: 2px solid #e65100;
    color: white;
    padding: 4px 10px;
    font-weight: bold;
    font-size:32px;
    border-radius: 4px;
    height: 80px;
    width:80px;
    top: 4px;
    left: 4px;
  }

  .error {
    color: #ff0000;
  }

  #menu {
    padding: 15px 25px;
    display: flex;
  }

  #menu p.welcome {
    flex: 1;
  }

  a#exit {
    color: white;
    background: #c62828;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
  }

  .msgln {
    margin: 0 0 5px 0;
  }

  .msgln span.left-info {
    color: orangered;
  }

  .msgln span.chat-time {
    color: #666;
    font-size: 60%;
    vertical-align: super;
  }

  .msgln b.user-name, .msgln b.user-name-left {
    font-weight: bold;
    background: #546e7a;
    color: white;
    padding: 2px 4px;
    font-size: 90%;
    border-radius: 4px;
    margin: 0 5px 0 0;
  }

  .msgln b.user-name-left {
    background: orangered;
  }
  /* 以下为调整id=textarea1这个多行显示窗口的大小的*/
#textarea1{
background-color: rgb(252,141,170);    /*粉色*/
color: #cc3336;   /*深红色*/
font-size: 50px;
            display:block;
            width:800px;
            height:60px;
            margin:40px auto 0;
        }
        .btn{
            width:35px;
            margin:10px auto;
            text-align:right;
        }

4. Touch an empty file

touch log.html

5. A total of 4 files

Note: In this solution, all the release information is in the log.html document, and to clear it, you need to use the command "echo '' >log.html" j to overwrite it. There is also a version with a clear button, if you need it, please bookmark it and send a private message.

Electronic bulletin board - based on PHP and JSP, can also be used as a chat tool, cross-platform, cross-network transmission of text information

Guess you like