主流的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好。

——————————————————————————————————

20190105补充：

最近不知道为啥突然就有一些小伙伴过来问我这个代码怎么运行，这边说明一下我的环境是通过wamp套件安装的

版本：wampserver3.0.6_x64_apache2.4.23_mysql5.7.14_php5.6.25-7.0.10

如果运行不起来的同学可以尝试一下换这个版本，基本就能解决问题了。另外程序是会自动帮忙建表的，不用手动去创建，需要创建的只是数据库。

实在找不到这个版本wamp资源的同学可以加我QQ，博客最新的文章有放QQ

最后说句实在话，现在轮询技术基本没人用了，如果不考虑性能简单做个网页的小功能是可以的。但是是无法投入到生产环境的。建议真想做聊天网站的同学可以去学习一下websocket，如果只是学会使用，半天的学习时间就够了。

祝大家一切顺利

利用ajax短轮询+php与服务器交互制作简易即时聊天网站的更多相关文章

  1. ajax短轮询+php与服务器交互制作简易即时聊天网站

    主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Server-sent Events). 本文主要介绍ajax短轮询的简易实现方式. 看懂此文 ...

  2. Web端即时通讯技术盘点：短轮询、Comet、Websocket、SSE

    1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Serve ...

  3. 关于ajax的短轮询问题

    利用前台的ajax不断向后台服务器请求,后台服务器不断查看数据库里的信息是否变化.若变化将信息返回前台,并执行一些操作 前台ajax代码 注意要加上cache这一项,如果是post请求的化,可以免了. ...

  4. Comet 反Ajax: jQuery与PHP实现Ajax长轮询

    原文地址(http://justcode.ikeepstudying.com/2016/08/comet-%E5%8F%8Dajax-%E5%9F%BA%E4%BA%8Ejquery%E4%B8%8E ...

  5. php websocket-网页实时聊天之PHP实现websocket（ajax长轮询和websocket都可以时间网络聊天室）

    php websocket-网页实时聊天之PHP实现websocket(ajax长轮询和websocket都可以时间网络聊天室) 一.总结 1.ajax长轮询和websocket都可以时间网络聊天室 ...

  6. 10分钟学会web通讯的四种方式，短轮询、长轮询(comet)、长连接(SSE)、WebSocket

    一般看到标题我们一般会产生下面几个问题??? 什么是短轮询? 什么是长轮询? 长连接又是什么? wensocket怎么实现呢? 他们都能实现web通讯,区别在哪呢,哪个好用呢? 接下来我们就一个个来了 ...

  7. http长轮询&短轮询

    http 协议介绍: http 协议是请求/响应范式的, 每一个 http 响应都是由一个对应的 http 请求产生的; http 协议是无状态的, 多个 http 请求之间是没有关系的. http ...

  8. 网页实时聊天之js和jQuery实现ajax长轮询

    众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息. 一直以来的方式 ...

  9. 误人子弟的网络，谈谈HTTP协议中的短轮询、长轮询、长连接和短连接

    引言 最近刚到公司不到一个月,正处于熟悉项目和源码的阶段,因此最近经常会看一些源码.在研究一个项目的时候,源码里面用到了HTTP的长轮询.由于之前没太接触过,因此LZ便趁着这个机会,好好了解了一下HT ...

随机推荐

  1. VS2013安装及破解教程

    https://blog.csdn.net/qq_33742119/article/details/80075352 软件下载的百度云链接,也可以在官网直接下载 链接:https://pan.baid ...

  2. python3入门之字典

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 本节主要介绍字典,字典也成映射,时python中唯一内建的映射类型.更多详细请点击readmore.下面附有之前的文章: python入门之字符串 ...

  3. flink学习笔记-flink实战

    说明:本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKh ...

  4. Android 开发环境的构建备忘

    准备工作:下载Eclipse.JDK.Android SDK.ADT插件 下载地址:Eclipse:http://www.eclipse.org/downloads/               JD ...

  5. Qt 学习之路 2（45）：模型

    Home / Qt 学习之路 2 / Qt 学习之路 2(45):模型 Qt 学习之路 2(45):模型  豆子  2013年2月26日  Qt 学习之路 2  23条评论 在前面两章的基础之上,我们 ...

  6. python大作业-图书管理系统

    #缺少循环执行和错误处理 #add()函数 添加了循环执行 #错误处理:regist()函数 登录和退出选择的时候添加了错误处理 import sys import importlib importl ...

  7. 洛谷 P2577 [ZJOI2005]午餐

    这道题目比较难想. 题解: 算法:贪心+dp 容易想到贪心:吃饭慢的先打饭节约时间, 所以先将人按吃饭时间从大到小排序. 然后就是dp了: 首先,应该想到f[i][j][k]:前i个人,在1号窗口打饭 ...

  8. P3332 [ZJOI2013]K大数查询

    传送门 注意操作 $1$ 是在区间的每个位置加入一个数,不是加上一个值 相当于每个位置维护的是一个集合 显然树套树 一开始想的是区间线段树套权值线段树 发现这样询问区间第 $K$ 大时就要先二分答案再 ...

  9. 零基础学QT编程

    吴迪.2010.1 北京航空航天大学出版社   Qt资源 CSDN QT http://bbs.csdn.net/forums/Qt/ QT编程网 http://www.qtbcw.com/ 编程论坛 ...

  10. C# Autofac 的 BeanFactory

    using Autofac; using Microsoft.Practices.ServiceLocation; namespace Core.Common { /// <summary> ...