PHP Ajax로 간단한 대화방 구축하기-PHP 튜토리얼-php.cn

집

백엔드 개발

PHP 튜토리얼

PHP Ajax로 간단한 대화방 구축하기

墨辰丷

May 10, 2018 pm 04:19 PM

ajaxphp대화방

이 글은 주로 php+ajax를 사용하여 간단한 채팅방을 구축하는 실습을 설명합니다. 필요하시면 글에 있는 php와 ajax에 대한 내용을 참고하시면 됩니다.

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html>  
    <head>  
        <title>新建网页</title>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <meta name="description" content="" />  
        <meta name="keywords" content="" />  
  
        <link rel="stylesheet" style="text/css" href="./css/talk.css" />  
  
        <script type="text/javascript">  
  
        var maxID = 0;  
        //获取最新的聊天消息  
        function showmsg(){  
            //ajax去获取  
            var xhr = new XMLHttpRequest();  
            xhr.onreadystatechange = function(){  
                if(xhr.readyState==4){  
                    eval("var jn_info="+xhr.responseText);  
                    //<p style="color:#800080">恶魔 对 大家 微笑 说：好久不见了啊(22:05:35)</p>  
                    var s = "";  
                    for(var i=0; i<jn_info.length; i++){  
                        s += "<p style=&#39;color:"+jn_info[i].color+"&#39;>"+jn_info[i].sender+" 对 ";  
                        s += jn_info[i].receiver+" "+jn_info[i].biaoqing+" 说：";  
                        s += jn_info[i].msg+"("+jn_info[i].add_time+")</p>";  
                        //把已经获取的最大id值赋予给maxID  
                        maxID = jn_info[i].id;  
                    }  
                    var hm =document.getElementById(&#39;show_msg&#39;);   
                    hm.innerHTML += s;  
  
                    //设置div滚动条卷起高度,该高度要随着内容增多有自适应效果。(设置div有滚动条：css： height:327px; overflow:auto;)  
                    hm.scrollTop = hm.scrollHeight;  //滚动条始终在最下方。scrolltop表示滚动条卷起的高度，scrollheight是整个div的高度。  
                }  
            }  
            xhr.open(&#39;get&#39;,&#39;./data.php?maxID=&#39;+maxID);  
            xhr.send(null);  
        }  
        //页面加载完毕就要显示最新聊天消息  
        window.onload = function(){  
            //每间隔2s就执行一次  
            setInterval("showmsg()",2000);  
        }  
        </script>  
  
        <style type="text/css">  
        </style>  
    </head>  
    <body>  
        <div id="main">  
            <div id="left">  
                <h2 id="在线名单-人">在线名单：（5人）</h2>  
                <ul id="user">  
                    <li>帅哥：恶魔</li>  
                    <li>靓妹：甜甜</li>  
                    <li>帅哥：诸葛</li>  
                    <li>帅哥：成就梦想</li>  
                    <li>靓妹：郁金香</li>  
                </ul>  
                <ul id="anniu">  
                    <li><input type="button" value="刷新名单" ></li>  
                    <li><input type="button" value="刷新屏幕" ></li>  
                    <li><input type="button" value="退出聊天" ></li>  
                </ul>  
            </div>  
            <div id="right">  
                <div id="content">  
                    <h2 id="有什么意见和建议欢迎大家踊跃提出">有什么意见和建议欢迎大家踊跃提出</h2>  
                    <hr />  
                    <div id="show_msg">  
                        <p style="color:red">PHP爱好者聊天室公告：欢迎恶魔来到聊天室(22:05:35)</p>  
                        <p>恶魔 对 大家 微笑 说：对啊(22:05:35)</p>  
                        <p>恶魔 对 大家 微笑 说：对啊(22:05:35)</p>  
                        <p style="color:#800080">恶魔 对 大家 微笑 说：好久不见了啊(22:05:35)</p>  
                        <p style="color:red">PHP爱好者聊天室公告：欢迎天使来到聊天室(22:05:35)</p>  
                        <p>天使 对 大家 微笑 说：你来了啊(22:05:35)</p>  
                    </div>  
                </div>  
                <div id="send">  
                    <form>  
                    <div id="control">  
                    颜色：  
                    <select id="color" name="color">  
                        <option value="">请选择</option>  
                        <option  style="color:#FF8888" value="#FF8888">爱的暗示</option>  
                        <option  style="color:#00BBFF" value="#00BBFF">忧郁的蓝</option>  
                        <option  style="color:#0000FF" value="#0000FF">碧空蓝天</option>  
                        <option  style="color:#9F88FF" value="#9F88FF">灰蓝种族</option>  
                        <option  style="color:#000088" value="#000088 ">蔚蓝海洋</option>  
                        <option  style="color:#77FFEE" value="#77FFEE">清清之蓝</option>  
                        <option  style="color:#4400B3" value="#4400B3">发亮篮紫</option>  
                        <option  style="color:#A500CC" value="#A500CC">紫的拘谨</option>  
                        <option  style="color:#B088FF" value="#B088FF">卡其制服</option>  
                        <option  style="color:#D1BBFF" value="#D1BBFF">伦敦灰雾</option>  
                        <option  style="color:#DC143C" value="#DC143C">卡布其诺</option>  
                        <option  style="color:#A52A2A" value="#A52A2A">苦涩心红</option>  
                        <option  style="color:#FF0000" value="#FF0000">正宗喜红</option>  
                        <option  style="color:#990099" value="#990099">红的发紫</option>  
                        <option style="color:#FF0000" value="#FF0000">红旗飘飘</option>  
                        <option style="color:#D2691E" value="#D2691E ">黄金岁月</option>  
                        <option style="color:#800080" value="#800080">紫金绣贴</option>  
                        <option style="color:#006400" value="#006400">橄榄树绿</option>  
                        <option style="color:#000000" value="#000000">绝对黑色</option>   
                    </select>  
                    表情：  
                    <select id="biaoqing" name="biaoqing">  
                        <option value="">请选择</option>  
                        <option value="笑着">笑着</option>  
                        <option value="高兴地">高兴地</option>  
                        <option value="含情脉脉">含情脉脉</option>  
                        <option value="微笑">微笑</option>  
                        <option value="幸福">幸福</option>  
                        <option value="有点脸红">有点脸红</option>  
                        <option value="使劲安慰">使劲安慰</option>  
                        <option value="自言自语">自言自语</option>  
                        <option value="差点要哭">差点要哭</option>  
                        <option value="嚎啕大哭">嚎啕大哭</option>  
                        <option value="一把鼻涕">一把鼻涕</option>  
                        <option value="很无辜">很无辜</option>  
                        <option value="流口水">流口水</option>  
                        <option value="神秘兮兮">神秘兮兮</option>  
                        <option value="幸灾乐祸">幸灾乐祸</option>  
                        <option value="很不服气">很不服气</option>  
                        <option value="不怀好意">不怀好意</option>  
                        <option value="拳打脚踢">拳打脚踢</option>  
                        <option value="不知所措">不知所措</option>  
                        <option value="翻箱倒柜">翻箱倒柜</option>  
                        <option value="很遗憾">很遗憾</option>  
                        <option value="很严肃">很严肃</option>  
                        <option value="善意警告">善意警告</option>  
                        <option value="正气凛然">正气凛然</option>  
                        <option value="哈欠连天">哈欠连天</option>  
                        <option value="小声的">小声的</option>  
                        <option value="大声的">大声的</option>  
                        <option value="尖叫一声">尖叫一声</option>  
                        <option value="遗憾的">遗憾的</option>  
                        <option value="无精打采">无精打采</option>  
                        <option value="想吐">想吐</option>  
                        <option value="真诚">真诚</option>  
                        <option value="不好意思">不好意思</option>  
                        <option value="扭捏的">扭捏的</option>  
                        <option value="腼腆的">腼腆的</option>  
                        <option value="很诧异">很诧异</option>  
                        <option value="依依不舍">依依不舍</option>  
                    </select>  
                    聊天对象：  
                    <select id="receiver" name="receiver">  
                        <option value="">所有的人</option>   
                        <option value="恶魔">恶魔</option>  
                        <option value="甜甜">甜甜</option>  
                        <option value="诸葛">诸葛</option>  
                        <option value="成就梦想">成就梦想</option>  
                        <option value="郁金香">郁金香</option>  
                    </select>  
                    <br />  
                    <textarea id="msg" name="msg"></textarea>  
                    <input type="button" value="发送" onclick="sendmsg()" />  
                    <span id="result"></span>  
                    </div>  
                    </form>  
                </div>  
            </div>  
        </div>  
    </body>  
</html>  
<script type="text/javascript">  
function sendmsg(){  
    //发表聊天消息  FormData+Ajax合作  
    var fm = document.getElementsByTagName(&#39;form&#39;)[0];  
    var fd = new FormData(fm);  
    var xhr = new XMLHttpRequest();  
    xhr.onreadystatechange = function(){  
        if(xhr.readyState==4){  
            document.getElementById(&#39;result&#39;).innerHTML = xhr.responseText;  
            //表单域信息归位  
            document.getElementById(&#39;color&#39;).value="";  
            document.getElementById(&#39;biaoqing&#39;).value="";  
            document.getElementById(&#39;receiver&#39;).value="";  
            document.getElementById(&#39;msg&#39;).value="";  
            //"留言成功"标志归位,2s后归位  
            setTimeout("guiflag()",2000);  
        }  
    }  
    xhr.open(&#39;post&#39;,&#39;./send.php&#39;);  
    xhr.send(fd);  
}  
//"留言成功"标志归位  
function guiflag(){  
    document.getElementById(&#39;result&#39;).innerHTML = "";  
}  
</script>

data.php(백엔드, 데이터베이스에서 모든 채팅 정보 가져오기):

<?php  
  
//随时获取最新的聊天消息  
$link = mysql_connect(&#39;localhost&#39;,&#39;root&#39;,&#39;123456&#39;);  
mysql_select_db(&#39;shop0811&#39;,$link);  
mysql_query(&#39;set names utf8&#39;);  
  
$maxID = $_GET[&#39;maxID&#39;];  
//获取聊天消息,根据maxID做限制查询获取(避免获取重复消息)  
$sql = "select * from message where id>".$maxID;  
$qry = mysql_query($sql);  
$info = array();  
while($rst = mysql_fetch_assoc($qry)){  
    $info[] = $rst;  
}  
//把数据组织为二维数组  
//把最新的聊天信息通过json格式提供出来  
echo json_encode($info);

send.php(백엔드, 보낸 채팅 기록을 데이터베이스에 저장):

<?php  
  
//发表聊天消息，服务器端  
$link = mysql_connect(&#39;localhost&#39;,&#39;root&#39;,&#39;123456&#39;);  
mysql_select_db(&#39;shop0811&#39;,$link);  
mysql_query(&#39;set names utf8&#39;);  
  
$msg        = $_POST[&#39;msg&#39;];  
$receiver   = $_POST[&#39;receiver&#39;];  
$color      = $_POST[&#39;color&#39;];  
$biaoqing   = $_POST[&#39;biaoqing&#39;];  
  
$sql = "insert into message values (null,&#39;$msg&#39;,&#39;admin&#39;,&#39;$receiver&#39;,&#39;$color&#39;,&#39;$biaoqing&#39;,now())";  
if(mysql_query($sql)){  
    echo "发表留言成功！";  
}else{  
    echo "发表留言失败！";  
}

talk.css (외부 CSS 파일 도입):

* {margin:0;padding:0;border:0;}  
#main {width:900px; height:500px; background:pink; margin:auto; margin-top:10px;}  
#left {width:200px; height:500px;background:#F5DEB3; float:left;}  
#right {width:700px; height:500px; background:rgb(206,263,49); float:left;}  
#content {height:379px; padding-top:1px;}  
#send {height:120px; background:rgb(51,175,234);}  
#control {position:relative; left:75px; top:18px;}  
select,textarea {border:1px solid gray;}  
#msg {width:410px;height:52px; margin-top:5px;}  
#content-title{color:green;font-size:14px;width:245px;margin:10px auto;}  
hr {border:1px solid gray; width:600px; margin:auto;}  
#show_msg {width:600px; margin-left:47px;margin-top:10px;font-size:14px;font-weight:bold;  
    height:327px;  
    overflow:auto;  
}  
#left h2 {color:#8B4513;font-size:14px;position:relative; left:36px;top:24px; width:150px; }  
#left #user { position:relative; top:46px;left:48px;   }  
  
ul {font-size:12px;  list-style:none; width:110px; }  
  
#anniu {margin-top:280px; margin-left:50px; }  
#anniu input {margin-top:3px; width:98px;height:30px; background:#CD853F; color:white; border:2px solid white;}

관련 추천:

php websocket 기반의 간단한 채팅방 만들기 연습

php 간단한 채팅 만들기 연습 websocket 기반의 방 _php 예제

php+websocket으로 간단한 채팅방 만들기 연습

위 내용은 PHP Ajax로 간단한 대화방 구축하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

스칼라 유형, 반환 유형, 노조 유형 및 무효 유형을 포함한 PHP 유형의 힌트 작업은 어떻게 작동합니까?Apr 17, 2025 am 12:25 AM

PHP 유형은 코드 품질과 가독성을 향상시키기위한 프롬프트입니다. 1) 스칼라 유형 팁 : PHP7.0이므로 int, float 등과 같은 기능 매개 변수에 기본 데이터 유형을 지정할 수 있습니다. 2) 반환 유형 프롬프트 : 기능 반환 값 유형의 일관성을 확인하십시오. 3) Union 유형 프롬프트 : PHP8.0이므로 기능 매개 변수 또는 반환 값에 여러 유형을 지정할 수 있습니다. 4) Nullable 유형 프롬프트 : NULL 값을 포함하고 널 값을 반환 할 수있는 기능을 포함 할 수 있습니다.

PHP는 객체 클로닝 (클론 키워드) 및 __clone 마법 방법을 어떻게 처리합니까?Apr 17, 2025 am 12:24 AM

PHP에서는 클론 키워드를 사용하여 객체 사본을 만들고 \ _ \ _ Clone Magic 메소드를 통해 클로닝 동작을 사용자 정의하십시오. 1. 복제 키워드를 사용하여 얕은 사본을 만들어 객체의 속성을 복제하지만 객체의 속성은 아닙니다. 2. \ _ \ _ 클론 방법은 얕은 복사 문제를 피하기 위해 중첩 된 물체를 깊이 복사 할 수 있습니다. 3. 복제의 순환 참조 및 성능 문제를 피하고 클로닝 작업을 최적화하여 효율성을 향상시키기 위해주의를 기울이십시오.

PHP vs. Python : 사용 사례 및 응용 프로그램Apr 17, 2025 am 12:23 AM

PHP는 웹 개발 및 컨텐츠 관리 시스템에 적합하며 Python은 데이터 과학, 기계 학습 및 자동화 스크립트에 적합합니다. 1.PHP는 빠르고 확장 가능한 웹 사이트 및 응용 프로그램을 구축하는 데 잘 작동하며 WordPress와 같은 CMS에서 일반적으로 사용됩니다. 2. Python은 Numpy 및 Tensorflow와 같은 풍부한 라이브러리를 통해 데이터 과학 및 기계 학습 분야에서 뛰어난 공연을했습니다.

다른 HTTP 캐싱 헤더 (예 : 캐시 제어, ETAG, 최종 수정)를 설명하십시오.Apr 17, 2025 am 12:22 AM

HTTP 캐시 헤더의 주요 플레이어에는 캐시 제어, ETAG 및 최종 수정이 포함됩니다. 1. 캐시 제어는 캐싱 정책을 제어하는 데 사용됩니다. 예 : 캐시 제어 : Max-AGE = 3600, 공개. 2. ETAG는 고유 식별자를 통해 리소스 변경을 확인합니다. 예 : ETAG : "686897696A7C876B7E". 3. Last-modified는 리소스의 마지막 수정 시간을 나타냅니다. 예 : 마지막으로 변형 : Wed, 21oct201507 : 28 : 00GMT.

PHP에서 보안 비밀번호 해싱을 설명하십시오 (예 : Password_hash, Password_Verify). 왜 MD5 또는 SHA1을 사용하지 않습니까?Apr 17, 2025 am 12:06 AM

PHP에서 Password_hash 및 Password_Verify 기능을 사용하여 보안 비밀번호 해싱을 구현해야하며 MD5 또는 SHA1을 사용해서는 안됩니다. 1) Password_hash는 보안을 향상시키기 위해 소금 값이 포함 된 해시를 생성합니다. 2) Password_verify 암호를 확인하고 해시 값을 비교하여 보안을 보장합니다. 3) MD5 및 SHA1은 취약하고 소금 값이 부족하며 현대 암호 보안에는 적합하지 않습니다.

PHP : 서버 측 스크립팅 언어 소개Apr 16, 2025 am 12:18 AM

PHP는 동적 웹 개발 및 서버 측 응용 프로그램에 사용되는 서버 측 스크립팅 언어입니다. 1.PHP는 편집이 필요하지 않으며 빠른 발전에 적합한 해석 된 언어입니다. 2. PHP 코드는 HTML에 포함되어 웹 페이지를 쉽게 개발할 수 있습니다. 3. PHP는 서버 측 로직을 처리하고 HTML 출력을 생성하며 사용자 상호 작용 및 데이터 처리를 지원합니다. 4. PHP는 데이터베이스와 상호 작용하고 프로세스 양식 제출 및 서버 측 작업을 실행할 수 있습니다.

PHP 및 웹 : 장기적인 영향 탐색Apr 16, 2025 am 12:17 AM

PHP는 지난 수십 년 동안 네트워크를 형성했으며 웹 개발에서 계속 중요한 역할을 할 것입니다. 1) PHP는 1994 년에 시작되었으며 MySQL과의 원활한 통합으로 인해 개발자에게 최초의 선택이되었습니다. 2) 핵심 기능에는 동적 컨텐츠 생성 및 데이터베이스와의 통합이 포함되며 웹 사이트를 실시간으로 업데이트하고 맞춤형 방식으로 표시 할 수 있습니다. 3) PHP의 광범위한 응용 및 생태계는 장기적인 영향을 미쳤지 만 버전 업데이트 및 보안 문제에 직면 해 있습니다. 4) PHP7의 출시와 같은 최근 몇 년간의 성능 향상을 통해 현대 언어와 경쟁 할 수 있습니다. 5) 앞으로 PHP는 컨테이너화 및 마이크로 서비스와 같은 새로운 도전을 다루어야하지만 유연성과 활발한 커뮤니티로 인해 적응력이 있습니다.

PHP를 사용하는 이유는 무엇입니까? 설명 된 장점과 혜택Apr 16, 2025 am 12:16 AM

PHP의 핵심 이점에는 학습 용이성, 강력한 웹 개발 지원, 풍부한 라이브러리 및 프레임 워크, 고성능 및 확장 성, 크로스 플랫폼 호환성 및 비용 효율성이 포함됩니다. 1) 배우고 사용하기 쉽고 초보자에게 적합합니다. 2) 웹 서버와 우수한 통합 및 여러 데이터베이스를 지원합니다. 3) Laravel과 같은 강력한 프레임 워크가 있습니다. 4) 최적화를 통해 고성능을 달성 할 수 있습니다. 5) 여러 운영 체제 지원; 6) 개발 비용을 줄이기위한 오픈 소스.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.