ajax短轮询+php与服务器交互制作简易即时聊天网站
主流的Web端即时通讯方案大致有4种:传统Ajax短轮询、Comet技术、WebSocket技术、SSE(Server-sent Events)。
本文主要介绍ajax短轮询的简易实现方式。
看懂此文需要:ajax基础,php基础,mysql基础,html/jquery基础
————————————————————————————
本人也是web新手,今天听说女票在学websocket,还做了个简易的网站利用广播和我通信。但是刷新一下数据就没了。。
我觉得这个还是挺有意思的,,就想着能不能做一个刷新后数据依然存在然后可以实时显示的呢。。就跟web上的qq一样。。做一个简易的对话板
因为我不会websocket,就想着好像ajax可以实现,一查果然可以,原来ajax短轮询也是一种即时通讯的方案。
于是我心血来潮就开始做了。。
最后结果如下:
GIF演示:
我本地开两个浏览器自己和自己聊天是完全没问题的,可以显示最后聊的12条消息,输入框输入后按回车消息实时显示在最下面,页面不自动刷新。
后面部署到服务器上和舍友测试了一下也是完全没问题的,和远在台湾的女票测试有时候消息会闪。。应该是网络问题吧。。毕竟使用的是ajax短轮询还是挺受网络影响的。
——————————————————————————————————————————
原理:
输入框输入原理:给输入框赋上按回车的事件,按下回车用ajax把当前选择的身份和输入框内的内容提交到后台,存储在数据库中。
显示聊天记录的原理:利用ajax从后端获取数据库中最后12条的数据(我这里用了jquery的$.get()方法)。然后设置交互时间,前端不断从后端获取数据,我这里设置的是每0.5秒从后端获取一次数据并显示。所以实际使用起来和QQ的效果一样,基本感受不到对方聊天的延时。
——————————————————————————————————————————
代码:
chat.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- jQuery静态库。-->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function (){ var message = "";
setInterval(function(){
getdata();
},500); function getdata() {
$.get("getdata.php",function (data) {
var count = 0;
for (a in data){
count++;
}
var show = 0;
for (a in data){
if ( show >= count-15 ){
message += "<p>"+ data[a].username + ":" + data[a].message+"</p>";
$("#show_message").html(message);
}
show++;
} message = "";
});
} $("#ckq").keydown(function(e){ //按下键盘触发函数
if(e.keyCode==13){ //如果按下的是回车
var user = $('input:radio:checked').val();
$.ajax({
url: "chat.php",
type: "post",
async: false,
data: {"in":$("#ckq").val(),"username":user}
});
getdata();
$("#ckq").val("");
}
}); }) </script> <style type="text/css"> </style> </head>
<body> <p id="message">小董与晴晴的对话:</p>
选择身份:<input type="radio" name="sex" value="小董" checked>小董
<input type="radio" name="sex" value="晴晴">晴晴
<br>
<div id="show_message">
</div>
<input type="text" id="ckq" name="in"> </body>
</html>
connection.php:(都是默认用户名密码,选择了我自己的数据库app_phptest2017,如果有改就改成对应的就行了)
<?php
session_start();
error_reporting(0); //。。加这个就不显示提示
$servername = "localhost";
$username = "root";
$password = "";
//$server_db_name = "app_phptest2017"; $con = mysql_connect($servername,$username,$password); if (!$con)
{
die('Could not connect: ' . mysql_error());
} mysql_query("set names 'utf8'"); mysql_select_db("app_phptest2017", $con); $sql = "CREATE TABLE IF NOT EXISTS `mymessage` (
messageID int NOT NULL AUTO_INCREMENT,
username char(30) NOT NULL,
message char(30) NOT NULL,
PRIMARY KEY (messageID)
) ENGINE=InnoDB DEFAULT CHARSET=gbk; " ; mysql_query($sql); ?>
chat.php (用来插入数据):
<?php include ("connection.php"); $sql = "INSERT INTO mymessage (message,username) VALUES('$_POST[in]','$_POST[username]')";
mysql_query($sql); ?>
getdata.php (用来从后端获取json格式数据并输出):
<?php
include ("connection.php");
header('content-type:application/json;charset=utf8'); $result = mysql_query("select message,username from mymessage"); $results = array();
while ($row = mysql_fetch_assoc($result)) { //mysql_fetch_assoc() 函数从结果集中取得一行作为关联数组,返回根据从结果集取得的行生成的关联数组!,如果没有更多行,则返回 false。
$results[] = $row;
} $jsonResult = json_encode($results); echo $jsonResult; mysql_close();
?>
————————————————————————————————
在本地服务器下创建以上四个文件并把代码复制进去就可以了,大家可以开两个浏览器运行一下试试看。
目前只能显示最后十二条,之后还可以添加一些滚动栏显示之前的消息之类的功能,以后再说了,本来也是做着玩。
——————————————————————————————————
结论:初步尝试了一下Web端即时通讯,还是挺有意思的。然而ajax短轮询与服务器交互太频繁了,没消息的时候总是进行一些无意义的交互,浪费资源,现在这项技术已经被淘汰了,还是学学websocket好。
ajax短轮询+php与服务器交互制作简易即时聊天网站的更多相关文章
- 利用ajax短轮询+php与服务器交互制作简易即时聊天网站
主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Server-sent Events). 本文主要介绍ajax短轮询的简易实现方式. 看懂此文 ...
- Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE
1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Serve ...
- 关于ajax的短轮询问题
利用前台的ajax不断向后台服务器请求,后台服务器不断查看数据库里的信息是否变化.若变化将信息返回前台,并执行一些操作 前台ajax代码 注意要加上cache这一项,如果是post请求的化,可以免了. ...
- 误人子弟的网络,谈谈HTTP协议中的短轮询、长轮询、长连接和短连接
引言 最近刚到公司不到一个月,正处于熟悉项目和源码的阶段,因此最近经常会看一些源码.在研究一个项目的时候,源码里面用到了HTTP的长轮询.由于之前没太接触过,因此LZ便趁着这个机会,好好了解了一下HT ...
- Comet 反Ajax: jQuery与PHP实现Ajax长轮询
原文地址(http://justcode.ikeepstudying.com/2016/08/comet-%E5%8F%8Dajax-%E5%9F%BA%E4%BA%8Ejquery%E4%B8%8E ...
- HTTP协议中的短轮询、长轮询、长连接和短连接
HTTP协议中的短轮询.长轮询.长连接和短连接 引言 最近刚到公司不到一个月,正处于熟悉项目和源码的阶段,因此最近经常会看一些源码.在研究一个项目的时候,源码里面用到了HTTP的长轮询.由于之前没太接 ...
- 转---谈谈HTTP协议中的短轮询、长轮询、长连接和短连接
作者:伯乐在线专栏作者 - 左潇龙 http://web.jobbole.com/85541/ 如有好文章投稿,请点击 → 这里了解详情 引言 最近刚到公司不到一个月,正处于熟悉项目和源码的阶段,因此 ...
- php websocket-网页实时聊天之PHP实现websocket(ajax长轮询和websocket都可以时间网络聊天室)
php websocket-网页实时聊天之PHP实现websocket(ajax长轮询和websocket都可以时间网络聊天室) 一.总结 1.ajax长轮询和websocket都可以时间网络聊天室 ...
- 谈谈HTTP协议中的短轮询、长轮询、长连接和短连接
引言 最近刚到公司不到一个月,正处于熟悉项目和源码的阶段,因此最近经常会看一些源码.在研究一个项目的时候,源码里面用到了HTTP的长轮询.由于之前没太接触过,因此LZ便趁着这个机会,好好了解了一下HT ...
随机推荐
- LeetCode OJ 之 Delete Node in a Linked List (删除链表中的结点)
题目: Write a function to delete a node (except the tail) in a singly linked list, given only access t ...
- 国内物联网平台初探(五) ——机智云IoT物联网云服务平台及智能硬件自助开发平台
平台定位 机智云平台是致力于物联网.智能硬件云服务的开放平台.平台提供了从定义产品.设备端开发调试.应用开发.产测.运营管理等覆盖智能硬件接入到运营管理全生命周期服务的能力. 机智云平台为开发者提供了 ...
- 辨异 —— Java 中的抽象类和接口
接口优于抽象类.-- <Effective Java>(Item 18) 0. 语法区别 抽象类允许给出某些方法的实现,接口不允许: 为了实现由抽象类定义的类型(type),类必须成为抽象 ...
- 【NOIP 2009】 靶形数独
[题目链接] https://www.luogu.org/problemnew/show/P1074 [算法] 搜索 + 剪枝 [代码] #include<bits/stdc++.h> u ...
- IP与以太网的包收发操作
你好,这是<网络是怎样连接的>的第3篇读书笔记,第二章<用电信号传输TCP/IP>后半部分:IP与以太网的包收发操作. 先看下经典的TCP/IP四层模型: 通常,下层模块支撑上 ...
- Hadoop MapReduce编程 API入门系列之wordcount版本1(五)
这个很简单哈,编程的版本很多种. 代码版本1 package zhouls.bigdata.myMapReduce.wordcount5; import java.io.IOException; im ...
- idiom的学习笔记(一)、三栏布局
三栏布局左右固定,中间自适应是网页中常用到的,实现这种布局的方式有很多种,这里我主要写五种.他们分别是浮动.定位.表格.flexBox.网格. 在这里也感谢一些老师在网上发的免费教程,使我们学习起来更 ...
- css table布局
表格布局有两种方式: 1.HTML Table(<table>标签)和 2. CSS Table(display:table 等相关属性). HTML Table是指使用原生的<ta ...
- eeee
Math Behind Rx https://github.com/ReactiveX/RxSwift/blob/master/Documentation/MathBehindRx.md Gettin ...
- ZBrush带你发掘脸部雕刻的秘诀(上)
骨骼,是一门基础艺术,几百年来一直为伟大的艺术大师所研究,它曾经,也将一直是创作现实且可信角色的关键,提高骨骼知识更将大大提高雕刻技能. 当然,这对于现实角色很重要,对卡通和风格化的角色也同样重要,底 ...