이 기사는 새로 고침이 없는 간단한 온라인 채팅방을 구현하기 위해 Ajax PHP JavaScript MySQL을 주로 소개합니다. 관심 있는 친구들은 이를 참고할 수 있습니다.
지난 이틀 동안 배운 Ajax 관련 지식을 더 잘 활용하기 위해 그 지식을 바탕으로 간단한 온라인 채팅방을 만들었습니다.
Idea
대화방을 구현하려면 기본적으로 Ajax를 통해 데이터를 전송하고, PHP에서 데이터 입력 및 검색을 구현한 다음 이를 프런트엔드 JavaScript에 전달하여 페이지를 업데이트하여 기능을 구현합니다. 인스턴트 채팅의
메시지 표시 영역
메시지 표시 영역은 Ajax를 사용하여 서버 측 정보를 얻고 JavaScript를 사용하여 페이지를 업데이트합니다.
<h3>消息显示区</h3>
<p id="up">
</p>
<hr />
로그인 후 복사
메시지 보내기
메시지 모듈은 직설적으로 말하면 서버에 데이터를 삽입하는 과정인데 이 역시 비교적 간단합니다.
<h3>发言栏</h3>
<p id="bottom">
<form action="./chatroom_insert.php">
<p 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>
</p>
<p id="chat_bottom">
<textarea id="msg" name="msg" style="width:380px;height:auto;"></textarea>
<input type="button" value="发言" onclick="send()" />
发言：<span id="result"></span>
</p>
</form>
</p>로그인 후 복사
섹션
코드를 사용하여 관련 비즈니스 로직을 구현해 보세요.
메시지 표시
우리의 생각은 클라이언트가 가끔씩 서버에 요청을 보내고 최신 데이터를 얻기 위해 폴링한다는 것입니다.
<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>로그인 후 복사
더 중요한 것은 요청 이벤트의 간격 트리거를 달성하기 위해 setInterval 함수를 사용하는 것입니다.
메시지 보내기
메시지 보내기는 양식을 통해 서버에 보내면 됩니다. 여기서는 HTML5의 최신 기술인 FormData를 사용합니다. 일반적으로 현재 주류 최신 브라우저는 이 기술을 지원합니다. FormData를 사용하면 양식의 데이터를 쉽게 얻을 수 있습니다.
참고: FormData는 키-값 쌍의 형태로 양식 데이터를 수집하므로 해당 양식 항목에는 이름 속성이 있어야 합니다. 그렇지 않으면 양식에서 항목의 데이터 값을 수집할 수 없습니다.
<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>로그인 후 복사
생각해 볼 가치가 있는 것은 setTimeout 함수에 의해 구현된 함수입니다. 서버로부터 피드백 정보를 받은 후 보내기 버튼 뒤에 적시에 업데이트되어 사용자에게 좋은 경험을 제공합니다.
Optimization
이 작업을 완료하면 기본적으로 채팅을 구현할 수 있습니다. 그러나 달성된 효과는 주로 다음 사항으로 인해 매우 나쁠 것입니다.
•스크롤링 표시가 없으며 매번 최신 뉴스를 수동으로 확인해야 합니다.
•얻은 데이터에는 중복된 데이터가 많이 포함되어 있어 트래픽이 낭비되고 정보 보기가 불편합니다.
반복되지 않는 데이터 표시
반복적인 데이터를 표시하는 이유는 where 문을 사용하지 않기 때문인데, 매번 모든 데이터를 얻어오는 것 같습니다. 생각해 보세요. 어떻게 최신 데이터를 얻을 수 있을까요?
그리고 다양한 고객을 돌봐야 합니다.
Hollywood 원칙: 나에게 오지 마세요, 내가 당신에게 갈 것입니다
이는 또한 고객이 이기기보다는 어떤 데이터를 얻을지 결정할 수 있도록 하는 많은 소프트웨어 개발 개념의 표현입니다. 막대기로 서버를 죽입니다. 따라서 데이터 요청을 보낼 때 클라이언트를 최적화해야 합니다.
<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 可以实现p底部最先展示
// pnode.scrollHeight而已获得p的高度包括滚动条的高度
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>로그인 후 복사
디스플레이 최적화
디스플레이 인터페이스 최적화는 데이터를 보낸 후 수동으로 최신 메시지를 확인하는 것을 용납할 수 없습니다. 따라서 표시 영역의 p를 설정해야 합니다.
스크롤바 추가
<style>
#up {
height:320px;
width:100%;
overflow:auto;
}
</style>로그인 후 복사
최신 뉴스를 매번 표시합니다
직접 말하면 항상 맨 밑에 있는 p가 먼저 표시됩니다.
//showmessage.scrollTop 可以实现p底部最先展示
// pnode.scrollHeight而已获得p的高度包括滚动条的高度
showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height;
로그인 후 복사
전체 코드
프런트 엔드 코드
Ajax 聊天室
<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 可以实现p底部最先展示
// pnode.scrollHeight而已获得p的高度包括滚动条的高度
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>
消息显示区
发言栏
로그인 후 복사
데이터베이스 테이블 구조
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 매개변수입니다.
•디스플레이 최적화 방법: 오버플로는 스크롤 효과를 구현합니다. pnode.scrollTop은 디스플레이 하단 효과를 제어합니다.
Outlook
•클라이언트 발신자가 고정되어 있음을 알 수 있습니다. 사용자 로그인. 사용자가 로그인하면 세션에서 발신자를 동적으로 얻을 수 있습니다. 이는 또한 사람들의 주관적인 감정과 더 일치할 수도 있습니다.
•인터페이스가 허술하고 미화효과가 없습니다. Bootstrap을 추가한 후 효과가 뛰어날 것입니다.
•휴대폰 적응 효과가 좋지 않고, Windows Phone에서는 색상 조절이 정상적으로 표시되지 않습니다.
관련 권장 사항:
php+webSoket 채팅방 샘플 코드 구현(소스 코드 첨부)
Python+Slack API를 사용하여 챗봇을 구현하는 방법의 자세한 예
위 내용은 Ajax PHP JavaScript MySQL은 새로 고침이 필요 없는 간단한 온라인 채팅방을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
