ExtJs+php学习长连接comet技术开端。

传统AJAX技术

　　 JavaScript 调用 XMLHttpRequest 对象发出 HTTP 请求，JavaScript 响应处理函数根据服务器返回的信息对 HTML 页面的显示进行更新。

使用 AJAX 实现“服务器推”与传统的 AJAX 应用不同之处在于：

服务器端会阻塞请求直到有数据传递或超时才返回。
客户端 JavaScript 响应处理函数会在处理完服务器返回的信息后，再次发出请求，重新建立连接。
当客户端处理接收的数据、重新建立连接时，服务器端可能有新的数据到达；这些信息会被服务器端保存直到客户端重新建立连接，客户端会一次把当前服务器端所有的信息取。

以上来自IDM DW
理解起来可能很费劲，我做了一下总结，相对比较容易理解。

做了一个简单的及时通讯程序，总结一下各方面。
首先我选用的是ExtJs框架，这个框架无所谓，什么框架都行，但是你要知道你用框架干什么了，其实很简单，就是实现ajax交互，用ajax想后台发送请求。

那么怎么做到长连接：
　　传统的轮询：
　　　　首先客户端定时向服务器发送请求询问服务器有没有新消息，服务器得到新消息之后马上返回消息。
　　　　客户端得到消息，刷新（注意不是全页面刷新，而是ajax动态写入HTML元素让页面局部刷新（ajax=页面局部刷新技术））

上面的方法打个比方就是你定时让一个人去考察市场，然后考察完毕马上回来，你来做相应的处理。结果是你不能在市场发生变更的第一时间得到市场消息。

　　长连接方式：
　　　　页面加载的时候向服务器发送请求，询问是否有新消息。
　　　　服务器查询最新消息，进行判断：
　　　　　　　　　　如果有新消息，发送到客户端。
　　　　　　　　　　如果没有最新消息，阻塞连接。
　　　　页面得到消息之后刷新到页面，然后马上继续与服务器建立连接（长连接更应该说是与服务器建立连接）。

这个方法就好像，你安排一个人在市场，让他在市场发生变化的时候马上回来通知你，然后马上回去继续考察。

下面是我用Ext+PHP自己做的例子，算是一个入门。

Ext版本：4.0

定义类ChatWin

 1 Ext.define('Leaves.im.ChatWin', {
 2     extend : 'Ext.window.Window',
 3     timestamp : 0,
 4     mainWindow : null,
 5
 6     initComponent : function() {
 7         this.createWindow(this);
 8     },
 9
10     createWindow : function(me) {
11         me.display = Ext.create('Ext.container.Container', {
12             width : '100%',
13             height : 200,
14             html:''
15         });
16
17         var editor = Ext.create('Ext.form.field.HtmlEditor', {
18             xtype : 'htmleditor',
19             enableColors : false,
20             enableAlignments : false,
21             width : '100%'
22         });
23
24         var mainPanel = Ext.create('Ext.panel.Panel', {
25             frame : true,
26             height : '100%',
27             width : '100%',
28             layout : 'vbox',
29             items : [ me.display, editor ],
30             buttons : [ {
31                 text : '发送',
32                 handler : function() {
33                     me.sendMessage(editor.getValue());
34                     editor.setValue();
35                     editor.focus();
36                 }
37             } ]
38         });
39
40         me.mainWindow = Ext.create('Ext.window.Window', {
41             title : '聊天室',
42             height : 500,
43             width : 600,
44             layout : 'fit',
45             items : [ mainPanel ]
46         });
47     },
48
49     /**
50      * 获取消息 timestamp 最后一次获取消息时间
51      */
52     getMessage : function(timestamp) {
53         var me = this;
54         Ext.Ajax.request({
55             url : 'comet.php',
56             success : function(response) {
57                 var text = response.responseText;
58                 var jsonObj = Ext.JSON.decode(text);
59
60                 me.display.update(me.display.html+jsonObj.msg+'<br/>',true);
61
62
63                 timestamp = jsonObj.timestamp;
64                 me.getMessage(jsonObj.timestamp);
65             },
66             failure : function(response) {
67                 var text = response.responseText;
68                 var jsonObj = Ext.JSON.decode(text);
69                 me.getMessage(jsonObj.timestamp);
70             },
71             params : {
72                 timestamp : timestamp
73             }
74         });
75     },
76     /**
77      * 发送消息 message 要发送的消息
78      */
79     sendMessage : function(message) {
80         Ext.Ajax.request({
81             url : 'comet.php',
82             params : {
83                 msg : message
84             }
85         });
86     },
87
88     showChatWin : function(y, x, title) {
89         this.mainWindow.title = title;
90         this.mainWindow.y = y;
91         this.mainWindow.x = x;
92         this.getMessage(this.timestamp);
93         this.mainWindow.show();
94     }
95 }, function() {
96     Ext.Ajax.timeout = 900000;
97 });

启动类comet.js

 1 Ext.Loader.setConfig({
 2             enabled : true,
 3             paths : {
 4                 'Leaves.im.ChatWin' : 'ChatWin.js'
 5             }
 6         });
 7 Ext.onReady(function() {
 8             var charWin = Ext.create('Leaves.im.ChatWin');
 9             charWin.showChatWin(100,100,'我的聊天框');
10         });

主页面

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>Comet demo</title>
 6 <link href="../ExtJs/resources/css/ext-all.css" rel="stylesheet"
 7     type="text/css">
 8 <script type="text/javascript" src="../ExtJs/ext-all-debug.js"></script>
 9 <script type="text/javascript" src="comet.js"></script>
10 </head>
11 <body>
12
13 </body>
14 </html>

服务器PHP脚本

 1 <?php
 2 $filename = dirname ( __FILE__ ) . '/data.txt';
 3 $msg = isset ( $_POST ['msg'] ) ? $_POST ['msg'] : '';
 4
 5 if ($msg != '') {
 6     file_put_contents ( $filename, $msg );
 7     die ();
 8 }
 9
10 set_time_limit ( 0 );
11 $lastmodif = isset ( $_POST ['timestamp'] ) ? $_POST ['timestamp'] : 0;
12 // 取得文件最后修改时间
13 $currentmodif = filemtime ( $filename );
14
15 while ( $currentmodif <= $lastmodif ) {
16     // 有释放CPU占用率的作用
17     usleep ( 100000 );
18     // 清除文件缓存信息
19     clearstatcache ();
20     $currentmodif = filemtime ( $filename );
21 }
22
23 $response = array ();
24 $response ['msg'] = file_get_contents ( $filename );
25 $response ['timestamp'] = $currentmodif;
26 echo json_encode ( $response );
27 ob_flush ();
28 flush ();
29 ?>

转载于:https://www.cnblogs.com/mrye/archive/2012/04/20/coment.html

ExtJs+php学习长连接comet技术开端。相关推荐

知乎技术分享：知乎千万级并发的高性能长连接网关技术实践
本文来自知乎官方技术团队的"知乎技术专栏",感谢原作者faceair的无私分享. 1.引言实时的响应总是让人兴奋的,就如你在微信里看到对方正在输入,如你在王者峡谷里一呼百应,如你 ...
Comet：基于 HTTP 长连接的“服务器推”技术 (实例)
"服务器推"技术的应用传统模式的 Web 系统以客户端发出请求.服务器端响应的方式工作.这种方式并不能满足很多现实应用的需求,譬如: 1. 监控系统:后台硬件热插拔.LED.温度 ...
Comet：基于HTTP长连接的“服务器推”技术
作者:周婷 (zhouting@cn.ibm.com), 软件工程师, IBM 中国软件开发技术实验室来源:http://www.ibm.com/developerworks/cn/web/wa- ...
[转载] Comet：基于 HTTP 长连接的“服务器推”技术
转载自http://www.ibm.com/developerworks/cn/web/wa-lo-comet/ "服务器推"技术的应用传统模式的 Web 系统以客户端发出请求. ...
cnpm 网络不能连接_Android 架构之长连接技术
读者好,很久没见,近期恢复更新啦,内容以Android技术.大前端.程序猿技术成长.跳槽内推等为主,欢迎继续关注. 上一篇文章<Android 架构之网络框架(上)>中,我们谈过了网络框架 ...
python长连接框架_python之websocket【长连接的实现】
websocket技术简单来说就是实现了长连接的技术,相对于传统的ajax或者轮询,websocket主要实现了双通信,并且减少了长轮询的多次请求的时间.总的来说,在很多应用上面能够发挥更好的作用,比 ...
不要小看 WebSocket！长连接、有状态、双向、全双工都是王炸技能
MQTT 是一种长连接的技术,所谓的长连接,就是保持长久的连接,每次连接可以传输多次数据,并且连接双方有保活机制维持连接.就好比异地办公室一样,有台设备一直保持在线,有问题需要沟通的时候,通过这台一直 ...
Comet：基于 HTTP 长连接的“服务器推”技术解析
一.背景介绍传统web请求,是显式的向服务器发送http Request,拿到Response后显示在浏览器页面上.这种被动的交互方式不能满足对信息实时性要求高的应用,譬如聊天室.股票交易行情.在线 ...
使用 .NET 实现 Ajax 长连接 (Part 1 - Comet Web Service)
Ajax的长连接,或者有些人所说的Comet,就是指以XMLHttpRequest的方式连接服务器,连接后服务器并非即时写入相应并返回.服务器会保持连接并等待一个需要通知客户端的事件,该事件发生后马上 ...

ExtJs+php学习长连接comet技术开端。

ExtJs+php学习长连接comet技术开端。相关推荐

最新文章

热门文章