主要作用： 基于PHP和JavaScript编写了一个聊天工具，部署在支持php的vps或者主机空间上即可。最初的想法是用于将远程桌面上chatgpt生成的内容，直接cp下来，但同时不想给仅有1G、1核的远程主机太大压力，所以用网页形式作为中介来达成目的。
最终形态截图：
怎么做的就不详述了，直接贴代码了。
一、 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">用户名 —</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
}
?>二、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);
}
?>三、 页面设置 sytle.css 源码
* {
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;
}四、touch一个空文件
touch log.html五、总共4个文件
注意： 这个方案中，所有的发布信息都在 log.html 文档中，要清除需要用命令“ echo '' >log.html" j进行覆盖。另有带清除按钮的版本，需要请收藏后私信。