Ajax PHP JavaScript MySQL 은 간단 하고 새로 고침 없 는 온라인 채 팅 방 을 실현 합 니 다.
사고의 방향
채 팅 방 을 실현 하 는 것 은 기본적으로 Ajax 를 통 해 데 이 터 를 전달 하고 PHP 로 데이터 에 대한 접근 과 검색 을 실현 한 다음 에 전단 JavaScript 에 맡 겨 페이지 의 업 데 이 트 를 실현 하여 실시 간 채 팅 기능 을 실현 하 는 것 이다.
메시지 표시 영역
메시지 표시 구역 은 DIV 블록 입 니 다.저 희 는 Ajax 를 통 해 서버 쪽 정 보 를 얻 은 후에 자바 스 크 립 트 를 사용 하여 페이지 를 업데이트 합 니 다.
<h3> </h3>
<div id="up">
</div>
<hr />
메 시 지 를 보 내 는 모듈 은 솔직히 서버 에 데 이 터 를 삽입 하 는 과정 도 비교적 간단 하 다.
<h3> </h3>
<div id="bottom">
<form action="./chatroom_insert.php">
<div id="chat_up">
<span> </span>
<input type="color" name="color"/>
<span> </span>
<select name="biaoqing">
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
</select>
<span> </span>
<select name="receiver">
<option value=""> </option>
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
</select>
</div>
<div id="chat_bottom">
<textarea id="msg" name="msg" style="width:380px;height:auto;"></textarea>
<input type="button" value=" " onclick="send()" />
：<span id="result"></span>
</div>
</form>
</div>
다음은 코드 를 사용 하여 관련 업무 논 리 를 실현 하기 시작 합 니 다.
메시지 표시
우리 의 사고방식 은 일정 시간 마다 클 라 이언 트 가 서버 에 요청 을 보 내 고 돌아 가면 서 최신 데 이 터 를 얻 는 것 이다.
<script>
function showmessage(){
var ajax = new XMLHttpRequest();
//
ajax.onreadystatechange = function(){
if(ajax.readyState==4) {
//alert(ajax.responseText);
//
eval('var data = '+ajax.responseText);
// data ，
var s = "";
for(var i = 0 ; i < data.length;i++){
data[i];
s += "("+data[i].add_time+") >>>";
s += "<p style='color:"+data[i].color+";'>";
s += data[i].sender +" " + data[i].receiver +" "+ data[i].biaoqing+" ：" + data[i].msg;
s += "</p>";
}
//
var showmessage = document.getElementById("up");
showmessage.innerHTML += s;
}
}
ajax.open('get','./chatroom.php');
ajax.send(null);
}
//
window.onload = function(){
//showmessage();
// ,
setInterval("showmessage()",3000);
}
</script>
메시지 전송
메시지 발송 에 관 해 서 는 폼 형식 으로 서버 에 보 내 면 됩 니 다.현재 Html 5 의 최신 기술 인 FormData 를 사 용 했 습 니 다.일반적으로 현재 주류 인 현대 브 라 우 저 는 이 기술 을 지원 합 니 다.FormData 를 사용 하면 폼 의 데 이 터 를 편리 하 게 얻 을 수 있 습 니 다.
메모:FormData 는 폼 데 이 터 를 수집 할 때 키 값 이 맞 는 형식 으로 수집 하기 때문에 해당 하 는 폼 항목 은 반드시 name 속성 이 있어 야 합 니 다.그렇지 않 으 면 폼 은 이 항목 의 데이터 값 을 수집 하지 못 합 니 다.
<script>
function send(){
//
var form = document.getElementsByTagName('form')[0];
var formdata = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4) {
//alert(xhr.resposneText);
document.getElementById("result").innerHTML = xhr.responseText;
setTimeout("hideresult()",2000);
}
}
xhr.open('post','./chatroom_insert.php');
xhr.send(formdata);
document.getElementById("msg").value="";
//return false;
}
// 2
function hideresult(){
document.getElementById('result').innerHTML = "";
}
</script>
최적화 하 다.
이곳 을 마치 면 기본적으로 채 팅 을 실현 할 수 있다.그러나 실현 효 과 는 매우 좋 지 않 을 것 이다.주로 다음 과 같은 몇 가지 가 있다.
•스크롤 디 스 플레이 가 없어 서 매번 수 동 으로 최신 메 시 지 를 봐 야 합 니 다.
•얻 은 데 이 터 는 중복 데이터 가 많아 서 데 이 터 를 낭비 할 뿐만 아니 라 정 보 를 보기 도 불편 하 다.
반복 되 지 않 는 데이터 보이 기
반복 적 인 데 이 터 를 표시 하 는 것 은 우리 가 where 문 구 를 사용 하지 않 았 기 때문에 매번 모든 데 이 터 를 얻 는 것 과 같 습 니 다.어떻게 해야만 최신 데 이 터 를 얻 을 수 있 는 지 생각해 보 세 요.
그리고 서로 다른 클 라 이언 트 에 대해 서도 잘 챙 겨 야 합 니 다.
할리우드 원칙:날 찾 아 오지 마.내 가 찾 아 갈 게.
이것 도 많은 소프트웨어 개발 이념 의 구현 으로 고객 이 어떤 데 이 터 를 얻 을 지 결정 하 게 하 는 것 이지 서버 에서 몽둥이 로 때 려 죽 이 는 것 이 아니다.그래서 우 리 는 클 라 이언 트 가 데이터 요청 을 보 내 는 데 최 적 화 를 해 야 한다.
<script>
// id ，
var maxId = 0;
function showmessage(){
var ajax = new XMLHttpRequest();
//
ajax.onreadystatechange = function(){
if(ajax.readyState==4) {
//alert(ajax.responseText);
//
eval('var data = '+ajax.responseText);
// data ，
var s = "";
for(var i = 0 ; i < data.length;i++){
data[i];
s += "("+data[i].add_time+") >>>";
s += "<p style='color:"+data[i].color+";'>";
s += data[i].sender +" " + data[i].receiver +" "+ data[i].biaoqing+" ：" + data[i].msg;
s += "</p>";
// id
maxId = data[i].id;
}
//
var showmessage = document.getElementById("up");
showmessage.innerHTML += s;
//showmessage.scrollTop div
// divnode.scrollHeight div
showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height;
}
}
ajax.open('get','./chatroom.php?maxId='+maxId);
ajax.send(null);
}
//
window.onload = function(){
//showmessage();
// ,
setInterval("showmessage()",3000);
}
</script>
디 스 플레이 인 터 페 이 스 를 최적화 하 는 것 은 필수 적 이다.데 이 터 를 보 낸 후에 도 수 동 으로 최신 메 시 지 를 볼 수 있 는 사람 은 아무 도 없다.그래서 디 스 플레이 영역의 div 를 설정 해 야 합 니 다.
스크롤 바 추가
<style>
#up {
height:320px;
width:100%;
overflow:auto;
}
</style>
말하자면 밑 에 있 는 div 를 영원히 가장 먼저 표시 하 는 것 이다.
//showmessage.scrollTop div
// divnode.scrollHeight div
showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height;
전단 코드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax </title>
<style>
#up {
height:320px;
width:100%;
overflow:auto;
}
</style>
<script>
// id ，
var maxId = 0;
function showmessage(){
var ajax = new XMLHttpRequest();
//
ajax.onreadystatechange = function(){
if(ajax.readyState==4) {
//alert(ajax.responseText);
//
eval('var data = '+ajax.responseText);
// data ，
var s = "";
for(var i = 0 ; i < data.length;i++){
data[i];
s += "("+data[i].add_time+") >>>";
s += "<p style='color:"+data[i].color+";'>";
s += data[i].sender +" " + data[i].receiver +" "+ data[i].biaoqing+" ：" + data[i].msg;
s += "</p>";
// id
maxId = data[i].id;
}
//
var showmessage = document.getElementById("up");
showmessage.innerHTML += s;
//showmessage.scrollTop div
// divnode.scrollHeight div
showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height;
}
}
ajax.open('get','./chatroom.php?maxId='+maxId);
ajax.send(null);
}
//
window.onload = function(){
//showmessage();
// ,
setInterval("showmessage()",3000);
}
</script>
</head>
<body style="background-color:silver">
<div id="main">
<h3> </h3>
<div id="up">
</div>
<hr />
<h3> </h3>
<div id="bottom">
<form action="./chatroom_insert.php">
<div id="chat_up">
<span> </span>
<input type="color" name="color"/>
<span> </span>
<select name="biaoqing">
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
</select>
<span> </span>
<select name="receiver">
<option value=""> </option>
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
</select>
</div>
<div id="chat_bottom">
<script>
function send(){
//
var form = document.getElementsByTagName('form')[0];
var formdata = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4) {
//alert(xhr.resposneText);
document.getElementById("result").innerHTML = xhr.responseText;
setTimeout("hideresult()",2000);
}
}
xhr.open('post','./chatroom_insert.php');
xhr.send(formdata);
document.getElementById("msg").value="";
//return false;
}
// 2
function hideresult(){
document.getElementById('result').innerHTML = "";
}
</script>
<textarea id="msg" name="msg" style="width:380px;height:auto;"></textarea>
<input type="button" value=" " onclick="send()" />
：<span id="result"></span>
</div>
</form>
</div>
</div>
</body>
</html>
mysql> desc message;
+----------+--------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+----------+--------------+------+-----+---------+----------------+
| id | int(100) | NO | PRI | NULL | auto_increment |
| msg | varchar(255) | NO | | NULL | |
| sender | varchar(30) | NO | | NULL | |
| receiver | varchar(30) | NO | | NULL | |
| color | varchar(10) | YES | | NULL | |
| biaoqing | varchar(10) | YES | | NULL | |
| add_time | datetime | YES | | NULL | |
+----------+--------------+------+-----+---------+----------------+
7 rows in set (0.00 sec)
<?php
//
$conn = mysql_connect('localhost','root','mysql');
mysql_select_db('test');
mysql_query('set names utf8');
$maxId = $_GET['maxId'];
// ， id id
$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);
?>
총결산
완전한 작은 예 는 바로 이렇다.돌 이 켜 보면 오늘 의 수확 은:
•어떻게 돌아 가면 서 데 이 터 를 얻 는 지,setInterval 함 수 를 빌 렸 습 니 다.
•정시 에 알림 이 사라 진 데 이 터 는 setTimeout 함수 의 도움 을 받 았 습 니 다.
•최신 데 이 터 를 가 져 오 는 방법:클 라 이언 트 가 보 내 는 maxId 인 자 를 제어 합 니 다.
•어떻게 디 스 플레이 를 최적화 합 니까:overflow 는 스크롤 효 과 를 실현 합 니까?divnode.scrollTop 제어 디 스 플레이 아래쪽 효과
전망 하 다.
•아마도 클 라 이언 트 발송 자가 고정 되 어 있다 는 것 을 알 게 될 것 이다.그것 은 바로 우리 가 사용자 로그 인 을 하지 않 았 기 때문이다.사용자 로그 인 을 하면 발송 자 는 Session 에서 동적 으로 가 져 올 수 있 습 니 다.이렇게 하면 사람들의 주관적 인 느낌 에 더욱 부합 할 수 있다.
•인터페이스 가 비교적 엉망 으로 만들어 져 미화 효과 가 없다.부 트 스 트랩 을 더 하면 효과 가 좋 을 것 같 습 니 다.
•휴대 전화 어댑터 효과 가 좋 지 않 으 며,윈도 폰 에 색상 컨트롤 이 제대로 표시 되 지 않 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Laravel - 변환된 유효성 검사 규칙으로 API 요청 제공동적 콘텐츠를 위해 API를 통해 Laravel CMS에 연결하는 모바일 앱(또는 웹사이트) 구축을 고려하십시오. 이제 앱은 CMS에서 번역된 콘텐츠를 받을 것으로 예상되는 다국어 앱이 될 수 있습니다. 일반적으로 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
