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

最新推荐文章于 2022-06-23 18:28:07 发布

董董在这

最新推荐文章于 2022-06-23 18:28:07 发布

阅读量706

点赞数

本文链接：https://blog.csdn.net/sajiazaici/article/details/77647618

版权

主流的Web端即时通讯方案大致有4种：传统Ajax短轮询、Comet技术、WebSocket技术、SSE（Server-sent Events）。本文主要介绍ajax短轮询的简易实现方式。看懂此文需要：ajax基础，php基础，mysql基础，html/jquery基础————————————————————————————本人也是web新手，今天听说女票在学websocket，还做了个简

摘要由CSDN通过智能技术生成

主流的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(

最低0.47元/天解锁文章

董董在这

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用ajax短轮询+php与服务器交互制作简易即时聊天网站

主流的Web端即时通讯方案大致有4种：传统Ajax短轮询、Comet技术、WebSocket技术、SSE（Server-sent Events）。本文主要介绍ajax短轮询的简易实现方式。看懂此文需要：ajax基础，php基础，mysql基础，html/jquery基础————————————————————————————本人也是web新手，今天听说女票在学websocket，还做了个简
复制链接

扫一扫