ExtJs+php学习长连接comet技术开端。
傳統AJAX技術
?JavaScript 調用 XMLHttpRequest 對象發出 HTTP 請求，JavaScript 響應處理函數根據服務器返回的信息對 HTML 頁面的顯示進行更新。
使用 AJAX 實現“服務器推”與傳統的 AJAX 應用不同之處在于：
以上來自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技术开端。的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ASP操作MSQL类
- 下一篇： Win7下配置Apache+PHP+My