搭建简易在线聊天室

来源：互联网发布：淘宝书店转让编辑：程序博客网时间：2024/05/15 23:48

chatroom.php

<!DOCTYPE HTML><html>    <head>        <meta charset="utf-8">        <script src="jquery-2.2.0.min.js" type="text/javascript"></script>        <link rel="stylesheet" href="style.css" type="text/css">        <title>网页聊天室</title>    </head>    <body>        <center><textarea readonly="readonly" rows="27" cols="100" id="chatwindow"></textarea></center>        <br>        <form style="text-align:center;" method="POST" action="write.php" >            <input id="sendtext" type="text" class="submit"></input>            <br><br><br>            <input type="button" value="发送" onclick="chat()" class="myButton"></input>        </form>        <script>            var xmlhttp=new XMLHttpRequest();            var getmes=new XMLHttpRequest();            setInterval("message()",1000);            function message()            {                getmes.open("GET","return.php",true);                getmes.send();            }            function chat()            {                var text=document.getElementById("sendtext").value;                document.getElementById("sendtext").value="";                xmlhttp.open("GET","write.php?text="+text,true);                xmlhttp.send();            }            getmes.onreadystatechange=function()            {                if (getmes.readyState==4 && getmes.status==200)                {                    document.getElementById("chatwindow").innerHTML=getmes.responseText;                }            }        </script>    </body></html>

config.php

<?php    header("Content-type: text/html; charset=utf-8");    define('HOST','主机名');    define('USERNAME','用户名');    define('PASSWORD','密码');    define('DBNAME','数据库名');?>

connect.php

    require_once('config.php');    //连库    if(!($con=mysql_connect(HOST,USERNAME,PASSWORD)))    {        echo mysql_error();    }    //选库    if(!mysql_select_db(DBNAME))    {        echo mysql_error();    }    //字符集    if(!mysql_query('set names utf8'))    {        echo mysql_error();    }?>

index.html

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" href="style.css" type="text/css"><title>网页聊天室</title></head><body>  <h1 style="text-align:center;">欢迎光临网页聊天室</h1>  <form style="text-align:center;" method="POST" action="login.php">    <input type="text" name="username" class="submit" placeholder="用户名"><br>    <input type="password" name="password" class="submit" placeholder="密码"><br><br><br>    <input type="submit" class="myButton" value="登录">    <br><br><br>    <a href="register.html">新用户注册</a>  </form>  <div class="bottom">    <p>Copyright © 2015 Mahaoyu All Rights Reserved</p>    <p>苏ICP备15057782号</p>  </div></body></html>

jquery-2.2.0.min.js文件请自行到jQuery官网下载

login.php

<?php     require_once('connect.php');    $username=$_POST['username'];    $password=$_POST['password'];    $sql="select * from users where username='$username' and password='$password'";    $result=mysql_query($sql);    session_start();    $_SESSION['username']=$username;    if(!mysql_num_rows($result))    {        echo "WRONG USERNAME OR PASSWORD!";        exit;    }    header("location:chatroom.html");?>

register.html

<!DOCTYPE HTML><html>    <head>        <meta charset="utf-8">        <link rel="stylesheet" href="style.css" type="text/css">        <script src="jquery-2.2.0.min.js" type="text/javascript"></script>        <title>网页聊天室注册</title>    </head>    <body>        <h1 style="text-align:center;">新用户注册</h1>        <form style="text-align:center;" method="POST" action="register.handle.php">            <input name="username" type="text" class="submit" placeholder="用户名"></input>            <br>            <input name="password" type="password" class="submit" placeholder="用户名"></input>            <br><br><br>            <input type="submit" value="确认" class="myButton"></input>        </form>        <div class="bottom">            <p>Copyright © 2015 Mahaoyu All Rights Reserved</p>            <p>苏ICP备15057782号</p>        </div>    </body></html>

register.handle.php

<?php     require_once('connect.php');    $username=$_POST['username'];    $password=$_POST['password'];    if(!$username || !$password)    {        echo "USERNAME OR PASSWORD CANNOT BE EMPTY!";        exit;    }    $sql="SELECT * FROM users WHERE username='$username'";    $result=mysql_query($sql);    if(mysql_num_rows($result))    {        echo "USERNAME EXISTS!";        exit;    }    $sql="INSERT users(username,password) VALUES ('$username','$password')";    mysql_query($sql);    header("location:index.html");?>

return.php

<?php     echo file_get_contents("/var/www/html/chat.txt");?>

style.css

body{    font-family:YouYuan;}.bottom{    color:#757575;    position:absolute;    bottom:0;    width:100%;    margin:0 auto;    text-align:center;}.submit{    width:270px;    height:42px;    line-height:42px;    margin-top:25px;    padding:0 15px;    background:#2d2d2d;    background:rgba(45,45,45,.15);    border-radius:6px;    border:1px solid #3d3d3d;    border:1px solid rgba(255,255,255,.15);    box-shadow:0 2px 3px 0 rgba(0,0,0,.1) inset;    font-family:YouYuan;    font-size:16px;    color:#ffffff;    text-shadow:0 1px 2px rgba(0,0,0,.1);    transition:all .2s;}.submit:focus{    outline:0;    box-shadow:0 2px 3px 0 rgba(0,0,0,.1) inset,0 2px 7px 0 rgba(0,0,0,.2);}.myButton{    transition: background-color 0.5s;    background-color:#00bde7;    border:0px solid #00bde7;    border-radius:10px;    cursor:pointer;    color:#ffffff;    font-family:YouYuan;    font-size:18px;    padding:11px 132px;    text-decoration:none;    white-space:nowrap;}.myButton:hover {    background-color:#00aad1;}

write.php

<?php     require_once("connect.php");    session_start();    $username=$_SESSION['username'];    $text=$_GET['text'];    $filename="/var/www/html/chat.txt";    $fp=fopen($filename,'a');    if(!$fp)    {        echo "FAIL!";    }    $outputstring=sprintf("\r\s%s(%s)\r\n%s\r\n",$username,date("h:i:sa"),$text);    fwrite($fp,$outputstring);    fclose($fp);?>

0 0