使用Ajax long polling实现简单的聊天程序

关于web实时通信,通常使用长轮询或这长连接方式进行实现。

为了能够实际体会长轮询,通过Ajax长轮询实现了一个简单的聊天程序,在此作为笔记。

长轮询

传统的轮询方式是,客户端定时(一般使用setInterval)向服务器发送Ajax请求,服务器接到请求后马上返回响应信息。使用这种方式,无论客户端还是服务端都比较好实现,但是会有很多无用的请求(服务器没有有效数据的时候,也需要返回通知客户端)。

而长轮询是,客户端向服务器发送Ajax请求,服务器接到请求后保持住连接,直到有新消息才返回响应信息,客户端处理完响应信息后再向服务器发送新的请求。这样的好处就是,在没有数据的时候,客户端和服务器之间不会有无用的请求。

对于使用长轮询的实现,客户端和服务器都有一定的要求:

  • 客户端发起请求,当接收到服务器响应(正常或异常的响应)后,需要向服务求发送新的请求,从而达到轮询的效果
  • 服务器端要能够一直保持住客户端的请求,直到有响应消息;同时服务器对请求的处理要支持非阻塞模式

实现

例子很简单,客户端使用Ajax进行轮询请求,服务器端使用Python的gevent库来实现了非阻塞式的响应。

客户端

客户端实现了一个longPolling的函数,当文档加载完成后,就会调用这个longPolling函数。

注意Ajax请求的complete属性设置,每次当longPolling函数中的Ajax请求结束后,又会重新通过longPolling函数向服务器发出轮询请求。

function longPolling() {
        $.ajax({
            url: "update",
            data: {"cursor": cursor},
            type: "POST",
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $("#state").append("[state: " + textStatus + ", error: " + errorThrown + " ]<br/>");
            },
            success: function (result, textStatus) {
                msg_data = eval("(" + result + ")");
                $("#inbox").append(msg_data.html);
                cursor = msg_data.latest_cursor;
                console.log(msg_data)
                $("#message").val("");
                $("#state").append("[state: " + textStatus + " ]<br/>");
            },
            complete: longPolling
        });
    }

服务端

服务器端通过MessageBuffer类来维护了一个cache(用list实现),用来存放所有来自客户端的消息。当消息的数量超过cache_size的时候,服务器会清理掉早期的消息。

class MessageBuffer(object):
    def __init__(self, cache_size = 200):
        self.cache = []
        self.cache_size = cache_size
        self.message_event = Event()

由于Python自带的WSGI服务器是阻塞模式的,所以这里使用了gevent库中提供的非阻塞模式的WSGI服务器。

服务器的工作流程可以简单描述如下:

  • 当服务器接收到客户端的数据请求时(/update)

    • 如果存放消息cache为空,或者客户端已经得到了最新的消息(根据cursor这个GUID来判断),服务器阻塞(保持)该请求
    • 服务器将所有有效的消息返回给客户端
  • 当服务器接收到新的消息时(/new请求),服务器将新消息添加到cache中,并通过message_event事件来唤醒被阻塞的update请求
def application(env, start_response):
    # visit the main page
    if env[‘PATH_INFO‘] == ‘/‘:
        return generate_response_data(‘200 OK‘, chat_html, start_response)
    # client to send a new message
    elif env[‘PATH_INFO‘] == ‘/new‘:
        msg = escape(get_request_data("msg", env))    

        msg_item = {}
        msg_item["id"] = str(uuid.uuid4())
        msg_item["msg"] = msg
        print "Got new message from client %s" %str(msg_item)

        messageBuffer.cache.append(msg_item)

        if len(messageBuffer.cache) > messageBuffer.cache_size:
            messageBuffer.cache = messageBuffer.cache[-messageBuffer.cache_size:]
        messageBuffer.message_event.set()
        messageBuffer.message_event.clear()

        return generate_response_data(‘200 OK‘, "", start_response)
    # serve to send available messages
    elif env[‘PATH_INFO‘] == ‘/update‘:
        cursor = escape(get_request_data("cursor", env))
        print "cursor: %s" %cursor

        # if message buffer is empty or no new messages, just wait
        if len(messageBuffer.cache) == 0 or messageBuffer.cache[-1]["id"] == cursor:
            messageBuffer.message_event.wait()

        for index, m in enumerate(messageBuffer.cache):
            if m[‘id‘] == cursor:
                return generate_response_data(‘200 OK‘, generate_json_data(messageBuffer.cache[index + 1:]), start_response)

        return generate_response_data(‘200 OK‘, generate_json_data(messageBuffer.cache), start_response)
    else:
        return generate_response_data(‘404 Not Found‘, b‘<h1>Not Found</h1>‘, start_response)

运行效果

通过下面两个图片可以看到运行效果。

长轮询也是长连接?

为了进一步看看长轮询的工作方式,基于上面的例子,通过wireshark抓取了一些数据包。

在服务器启动后,客户端发送了三条消息,并通过三次"/update"请求分别得到了这三条消息。

从截图中可以看到,三次请求并没有创建新的连接,而是重用了TCP连接;这是因为HTTP 1.1中会有一个"keep-alive"模式,服务器响应后并不会直接关闭TCP连接,而是看看客户端会不会有新的请求,从而重用已有的TCP连接。

对于客户端,由于每次收到消息后都会重新发送新的"/update"请求,所以可以一直重用TCP连接。

当客户端发出"/update"请求后,如果没有新的消息可以返回,服务器会一直保持这个请求。

为了保持住这条TCP连接,可以看到客户端会定期的发送"TCP Keep-Alive"包来维持TCP连接。

我的理解是,在使用HTTP的"keep-alive"模式中,长轮询中始终使用的是相同的TCP连接,其实这也是一种长连接方式。

总结

本文中,通过简单的例子试用了长轮询的方式来实现web实时通信。

长轮询的方式,使用起来相对容易,同时用能减少客户端和服务器之间的无用请求。

Ps:

通过此处可以下载例子的源码,需要安装Python和gevent才能正常运行。

时间: 2024-08-24 22:22:28

使用Ajax long polling实现简单的聊天程序的相关文章

从一个简单的聊天程序SimpleChat看VPN技术

SimpleVPN写好了以后,感觉比较简单,我觉得只有简单的东西才经得起折腾,才能全民折腾,所以说SimpleVPN还不够简单,本文来一个更加简单的,展示一个超级简单的点对点聊天程序,而且还带简单加密哦.顺便,我们再来看下,到底什么是VPN以及怎样实现它.       QQ如今才刚刚行过成年之礼,典型的90后00前,却早已到了后浪把前浪拍到岸边的砍儿,果不其然,被10后的微信给逆袭了...好在都是腾讯的,这就把竞争收敛到了公司内部,不然这将意味着一个巨人的倒下,太可怕了.多年前,很多人逆向过QQ

C#编写简单的聊天程序(转)

这是一篇基于Socket进行网络编程的入门文章,我对于网络编程的学习并不够深入,这篇文章是对于自己知识的一个巩固,同时希望能为初学的朋友提供一点参考.文章大体分为四个部分:程序的分析与设计.C#网络编程基础(篇外篇).聊天程序的实现模式.程序实现. 程序的分析与设计 1.明确程序功能 如果大家现在已经参加了工作,你的经理或者老板告诉你,“小王,我需要你开发一个聊天程序”.那么接下来该怎么做呢?你是不是在脑子里有个雏形,然后就直接打开VS2005开始设计窗体,编写代码了呢?在开始之前,我们首先需要

基于Java实现hello/hi简单网络聊天程序

目录 Socket简要阐述 Socket的概念 Socket原理 hello/hi的简单网络聊天程序实现 服务器端 客户端 程序执行结果 跟踪分析调用栈 & Linux API对比 创建ServerSocket 调用栈图示 源码分析 Socket绑定 调用栈图示 源码分析 Socket监听 调用栈图示 源码分析 Socket Accept 调用栈图示 源码分析 Java Socekt API与Linux Socket API 参考链接 Socket简要阐述 Socket的概念 Socket的英文

Java网络编程以及简单的聊天程序

网络编程技术是互联网技术中的主流编程技术之一,懂的一些基本的操作是非常必要的.这章主要讲解网络编程,UDP和Socket编程,以及使用Socket做一个简单的聊天软件. 全部代码下载:链接 1.网络编程简要概述: 网络编程实质实质就是两个(或多个)设备(例如计算机)之间的数据传输.而要实现两台计算机通过互联网连接进行数据传输,必输要满足计算机网络的5层协议(物理层,数据链路层,网络层,运输层,应用层):当然有划分可能不同,但现在大家比较容易接受理解的是五层模型.而其中前三层物理层,数据链路层以及

UDP&mdash;Socket,套接字聊天简单的聊天程序。

思路:(发送端) 1.既然需要聊天.就应该怎么建立聊天程序,,DatagramSocket对象http://www.w3cschool.cc/manual/jdk1.6/ DatagramSocket dgSocket = new DatagramSocket(); 2.那么发给谁?怎么打包数据.DatagramPacket. 代码如下DatagramPacket对象API文档链接http://www.w3cschool.cc/manual/jdk1.6/ 具体查看集体代码: //创建数据包 b

用c#开发安卓程序 (xamarin.android)系列之二 简单的聊天程序

networkcomm.net 网络通信框架来自于英国剑桥,其开源版本2.3.1 中自带了一个编写android的例子,可以很好的帮助我们入门. 此示例的功能,是在2个安卓手机上,输入对方的IP和端口,能够实现聊天功能. 把代码放上,供大家一览 using System; using Android.App; using Android.Content; using Android.Runtime; using Android.Views; using Android.Widget; using

简单的聊天程序

//QQ聊天程序的建立网络流类 import java.net.*; import java.io.*; public class Neter { private BufferedReader br; private PrintWriter pw; public Neter(Socket socket){ try{ InputStream is=socket.getInputStream(); InputStreamReader isr=new InputStreamReader(is); br

基于socket实现的简单的聊天程序

记得八年前第一次使用socket做的一个五子棋程序,需要序列化棋子对象,传递到对方的电脑上. 一个偶然的机会,第二次使用socket做点事情.先看聊天服务器端的实现: 服务器端要实现以下功能:      1.启动服务,开启监听      2.持续不断地接收消息      3.发送消息 启动服务,创建监听socket,绑定Ip和端口: 1 /// <summary> 2 /// 启动服务 3 /// </summary> 4 private void Start() 5 { 6 so

python 简单p2p聊天程序

目标是写一个python的p2p聊天的项目,这里先说一下python socket的基础课程 一.Python Socket 基础课程 Socket就是套接字,作为BSD UNIX的进程通信机制,取后一种意思.通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,可以用来实现不同虚拟机或不同计算机之间的通信.在Internet上的主机一 般运行了多个服务软件,同时提供几种服务.每种服务都打开一个Socket,并绑定到一个端口上,不同的端口对应于不同的服务.Socket正如其