5.WEB版QQ多人聊天，带离线留言功能

最新推荐文章于 2023-03-21 22:24:24 发布

enlyhua

最新推荐文章于 2023-03-21 22:24:24 发布

阅读量1.4k

点赞数

分类专栏： Ajax 文章标签：聊天设计

Ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

信息表设计：

这里写图片描述

1.建表

create table messages(
    id int UNSIGNED PRIMARY KEY auto_increment,
sender VARCHAR(64) not null,
getter varchar(64) not null,
content VARCHAR(3600),
sendTime datetime not null,
isGet TINYINT DEFAULT 0
)

2.界面

chatRoom.php

<?php
//接收 window.open 传递的用户名
$username = $_GET['username'];
//使用 php 方法去掉空格
$username = trim($username);

//在这里我们取出 session 保存的登陆人的名字
session_start();
$loginuser = $_SESSION['loginuser'];
?>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" src="my.js"></script>
    <script type="text/javascript">
        function sendMessage()
        {
            //创建一个xmlhttprequest对象
            var myHttpRequest = getXmlHttpObject();
            if(myHttpRequest){
                var url = 'SendMessageController.php';
                // js 中如何使用 php 代码
                //如何在这里得到发送人的名字

                var data = 'con=' + $('con').value + "&getter=<?php echo $username;?>&sender=<?php echo $loginuser;?>";
                alert(data);
                myHttpRequest.open('post',url,true);
                myHttpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                myHttpRequest.onreadystatechange = function(){
                    if(myHttpRequest.readyState == 4 && myHttpRequest.status == 200){
                        //这里要返回信息，这里可能不需要
                    }
                }
            }
            //发送
            myHttpRequest.send(data);
        }
    </script>
</head>

<body>

<center>
    <h1>聊天室(您正在和<font color="red"><?php echo $username;?></font>聊天)</h1>
    <textarea cols="50" rows="20"></textarea><br/>
    <input type="text" id="con"/>
    <input type="button" value="发送信息" onclick="sendMessage();"/>
</center>

</body>
</html>

friendList.php

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" src="my.js"></script>
    <script type="text/javascript">
        //移到上面改变颜色
        function change1(val,obj)
        {
            if(val == 'over'){
                obj.style.color = "red";
                //鼠标变小手
                obj.style.cursor = "hand";
            }else if(val == 'out'){
                obj.style.color = "black";
            }
        }

        //响应点击新的聊天窗口
        function openChatRoom(obj)
        {
            //打开新窗口
            //这里有我 window.open 是 get 方式提交，所以到服务器就变乱码
            //所以需要编码
//            window.open('chatRoom.php?username='+encodeURI(obj.innerHTML),'_blank');
            window.open('chatRoom.php?username='+obj.innerHTML,'_blank');
        }
    </script>
    <!--<script type="text/javascript">
        window.resizeTo(500,700);
    </script>-->
</head>

<body>
    <h1>好友列表</h1>
<ul>
    <li onclick="openChatRoom(this);" onmouseover="change1('over',this);" onmouseout="change1('out',this)">宋江</li>
    <li onclick="openChatRoom(this);" onmouseover="change1('over',this);" onmouseout="change1('out',this)">张飞</li>
    <li onclick="openChatRoom(this);" onmouseover="change1('over',this);" onmouseout="change1('out',this)">小倩</li>
</ul>
</body>
</html>

login.php

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
</head>

<body>
<center>
    <h1>欢迎登陆聊天室</h1>
    <form action="loginController.php" method="post">
        用户名：<input type="text" name="username"/><br/>
        密码：<input type="password" name="passwd"/><br/>
        <input type="submit" value="登陆聊天室"/>
    </form>
</center>

</body>
</html>

loginController.php

<?php

//接收用户的名字和密码

$loginUser = $_POST['username'];
$pwd = $_POST['passwd'];

//简单判断(因为没有用户表)
if($pwd == '123'){
    //合法,跳转到好友列表
    session_start();
    $_SESSION['loginuser'] = $loginUser;
    header('Location:friendList.php');
}else{
    //不合法
    header("Location:login.php");
}

MessageService.class.php

<?php

require_once 'SqlHelper.class.php';
class MessageService
{
    //将信息添加到数据库
    function addMessage($sender,$getter,$con)
    {
        //组织一个 sql
        $sql = "insert into messages(sender,getter,con,sendTime)
                values('$sender','$getter','$con','now()');
               ";
        //创建一个 SqlHelper 对象
        $sqlHelper = new SqlHelper();
        return $sqlHelper->execute_dml($sql);
    }
}

my.js

//创建 ajax 引擎

function getXmlHttpObject()
{
    var xmlHttpRequest;
    if(window.XMLHttpRequest){
        xmlHttpRequest = new XMLHttpRequest();
    }else{
        xmlHttpRequest = new ActiveXObject();
    }
    return xmlHttpRequest;
}

function $(id)
{
    return document.getElementById(id);
}

SendMessageController.php

<?php
require_once 'MessageService.class.php';

//控制器
//接收信息
$sender = $_POST['sender'];
$getter = $_POST['getter'];
$con = $_POST['con'];

//把信息输出到文件
//file_put_contents('./my.log',$sender . '---' . $getter . '---' . $con . '\r\n',FILE_APPEND);

//创建这样一个对象
$messageService = new MessageService();
$res = $messageService->addMessage($sender,$getter,$con);
if($res == 1){
    //成功
}else{
    echo 'err';
}

enlyhua

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
5.WEB版QQ多人聊天，带离线留言功能

信息表设计：1.建表create table messages( id int UNSIGNED PRIMARY KEY auto_increment,sender VARCHAR(64) not null,getter varchar(64) not null,content VARCHAR(3600),sendTime datetime not null,isGet TINYI
复制链接

扫一扫