当前位置：网站首页 > PHP笔记 > 正文

用PHP、JS、frameset框架来完成一个简易的即时聊天系统

作者：文煞发布时间：2024-04-27分类：PHP笔记浏览：177

温馨提示：手机扫码可阅读当前文章!
文章简介：大家都知道PHP作为一款服务端语言，工作逻辑大概是PHP软件根据PHP脚本逻辑处理对应的数据、然后编译成html代码提供给浏览器，让浏览器来渲染页面。虽然PHP是一款作为动态的网页处理软件，但是每次展示最新的内容都需要刷新一下页面，生成新的...

大家都知道PHP作为一款服务端语言，工作逻辑大概是PHP软件根据PHP脚本逻辑处理对应的数据、然后编译成html代码提供给浏览器，让浏览器来渲染页面。虽然PHP是一款作为动态的网页处理软件，但是每次展示最新的内容都需要刷新一下页面，生成新的请求，PHP才会把最新的内容提供给浏览者。对于聊天交友功能来说，我们不可能一直刷新页面，那么如何解决即时通讯的问题呢？

想要实现即时聊天功能通常需要使用 WebSocket 技术。WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它使得客户端和服务器可以进行实时通信，而无需像传统的 HTTP 请求那样频繁建立连接。想要实现即时聊天功能，我们可以使用前后端配合，通过 WebSocket 技术实现实时通信，同时保证数据传输安全以及考虑到用户体验和功能扩展。但是这不是本文想要谈及的内容，本文想要解决的是如何用PHP、JS、frameset框架来完成一个简易的即时聊天系统。

一、JavaScript中的定时器

其实聊天功能对PHP而已，那是十分简单的，问题是如何即时把信息发送给对方，如果我们不需要用户自己刷新就能展示最新的内容，那么即时通讯聊天的功能就能解决了吗。对于实时信息的展示，可以使用JavaScript中的定时器（setTimeout或setInterval）来定时向服务器发起请求，实现自动更新页面内容的效果。

<!DOCTYPE html>
<html>
<head>
    <title>Auto Refresh Example</title>
    <script type="text/javascript">
        function autoUpdate() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        document.getElementById("time").innerHTML = xhr.responseText;
                    } else {
                        console.error('Error: ' + xhr.status);
                    }
                }
            };
            xhr.open('GET', 'get_time.php', true);
            xhr.send();
        }
        // 每隔5秒自动更新一次时间
        setInterval(autoUpdate, 5000);
    </script>
</head>
<body>
    <h1>Current Time:</h1>
    <div id="time"></div>
</body>
</html>

在我演示的这个示例代码中，页面加载后会调用autoUpdate()函数来获取当前时间并展示在页面上。然后使用setInterval函数每隔5秒调用一次autoUpdate()函数，实现定时更新页面内容的效果。这样就能实现定时自动更新页面内容而不需要用户任何操作。如果间隔时间足够短，那么不就能够达到即时通讯的效果了吗？

二、frameset框架

为什么我还要使用frameset框架，主要是考虑我们需要更新的部分只有聊天记录的展示部分，而其他展示块是不需要更新的，当然你也可以用HTML5语言来完成，毕竟frameset框架已经被淘汰了。但我们这里就以frameset框架为例来介绍吧，逻辑是相同的，而且浏览器基本都支持frameset框架。

<?php
$uid = '1';//定义当前用户id
$toid = '0';//定义信息接受对象
?>
<!DOCTYPE html>
<html>
<head>
</head>
<frameset rows="80px,100%,200px,50px" framespacing="0" frameborder="NO" border="0">
  <frame name="topNav" style="border: none;" noresize="noresize" scrolling="no" src="header.php">
  <frame name="mainContent" style="border: none;" noresize="noresize" scrolling="no" src="body.php">
  <frame style="border: none;" noresize="noresize" scrolling="no" src="sub.php">
  <frame name="bottomNav" style="border: none;" noresize="noresize" scrolling="no" src="footer.php">
</frameset>
<noframes>
<body>
你的浏览器不支持frameset框架！
</body>
</noframes>
</html>

这里的frameset框架定义了4个子框架，一个topNav框架、一个mainContent框架、一个输入界面框架和bottomNav框架。框架演示如下：

用PHP、JS、frameset框架来完成一个简易的即时聊天系统第1张

三、及时更新聊天内容

从上面的演示图可以看出，其实我们只需要即时更新聊天信息框架里的内容就可以让别人发送给你的信息及时的展示出来。从而达到即时聊天的效果！我的构思是我用PHP写一个展示聊天信息的页面，然后用JS每半秒钟获取一次聊天信息页面的内容，并展示到对应的框架里。

1、message.php：

<?php
$currentUserId = '1';
if(isset($_GET['fromid']) && isset($_GET['toid'])){
    if($_GET['fromid'] == $currentUserId){
        $userNames[$currentUserId] = '文煞';
        $userNames['0'] = '电脑';
        $file1 = '../data/'.$_GET['fromid'].'-'.$_GET['toid'].'.php';
        $file2 = '../data/'.$_GET['toid'].'-'.$_GET['fromid'].'.php';
        if(file_exists($file1)){
            $content = file($file1); 
        } else if(file_exists($file2)){
            $content = file($file2); 
        } else {
            $content = NULL;
        }
        if($content != NULL){
            $messages = [];
            $skipFirstLine = true;
            foreach ($content as $line) {
                if($skipFirstLine){
                    $skipFirstLine = false;
                    continue;
                }
                //每行的数据格式如：{"from":1,"toid":"0","text":"\u4f60\u597d\u554a\uff01","time":1714199484}
                $messageData = json_decode($line, true);
                $messages[] = $messageData;
            }
            $messageHtml =' ';
            foreach ($messages as $message) {
                $messageHtml .='
                <tr class="firstRow">
                    <td valign="top" style="word-break: break-all; border-color: rgb(149, 179, 215);" align="'.($message['from'] == $currentUserId ? 'right' : 'left').'" width="100%">
                        <p style="margin-top: 0; margin-bottom: 0; white-space: normal; padding: 0;font-size: 1.2em;">
                            '.$message['text'].'
                        </p >
                        <p style="margin-top: 0; margin-bottom: 0; white-space: normal; padding: 0;">
                            <span style="color: #BFBFBF;">'.$userNames[$message['from']].':'.date('Y-m-d H:i:s',$message['time']).'</span>
                        </p >
                    </td>
                </tr>';
            }
        } else {
            $messageHtml = '暂无聊天记录';
        }
    }
}
?>
<table width="100%">
    <tbody>
        <?php echo $messageHtml;?>
    </tbody>

在该代码运行之前，我已经设置了聊天信息的演示数据文件：1-0.php，该代码通过读取记录聊天数据的文件从而展示对话内容。

<?php die('禁止访问！');?>
{"from":1,"toid":"0","text":"你好啊！你好啊！你好啊！","time":1732557010}
{"from":0,"toid":1,"text":"你好！","time":1732557130}
{"from":1,"toid":"0","text":"你是谁？","time":1732557010}
{"from":0,"toid":1,"text":"我是电脑哦","time":1732557130}
{"from":1,"toid":"0","text":"好的。","time":1732557010}
{"from":0,"toid":1,"text":"bey","time":1732557130}

2、即时更新对话内容

即时更新对话内容，即是及时更新mainContent框架部分，body.php：

<?php
$fromid = '1';
$toid = '0';
?>
<script>
setInterval(function() {
    var xhr = new XMLHttpRequest();
    var url = `http://admin.adminbk.com/html/message.php?fromid=<?php echo $fromid ?>&toid=<?php echo $toid ?>`;
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.body.innerHTML = xhr.responseText;
        }
    };
    xhr.send();
}, 1000);
</script>

注释：该代码每半分钟抓取一次message页面的内容，并输出到浏览器！

四、结尾

关于即时聊天功能，已经是现在网络上相当成熟的技术了，本文的宗旨也不是让大家用这么落后的技术来做即时聊天系统，本文只是对PHP、JS、HTML语言混编的一种展示，也是对前面文煞介绍的PHP知识做一次实例运用的展示。本文案例中的代码仅作为一种思路引导，仅为了写这篇文章而创作，没有做任何安全处理和代码优化，请勿在项目中直接复制粘贴使用，以免造成损失！

我相信会浏览我文章的朋友，大部分都从事与建站或者网站相关服务的行业。本人建有一个站长交流的微信群，目前也将近200位站长入驻，如果你对建站、SEO、编程等相关内容感兴趣的话，可以扫描下方二维码进群。

网站建设交流群

用PHP、JS、frameset框架来完成一个简易的即时聊天系统第2张