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

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

传统AJAX技术

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

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

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

以上来自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+'
',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 demotitle>
 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

更多相关：

  • angularjs 滑块验证码 移动端_SliderCaptcha

    滑块式验证码用户通过拖动滑块行为来完成校验，支持PC端及移动端。可以将用户拖动行为的时间、精度，滑动轨迹等信息到服务器，然后进行后台算法验证。特别介绍Blazor 版本的滑块验证码 传送门在线演示效果图快速开始组件依赖 font-awesomeCSS将引入样式表的 标签复制并粘贴到 中，并放在所有其他样式表之前。JS将引入脚本的 用...

  • ktor框架用到了netty吗_教你如何构建异步服务器和客户端的 Kotlin 框架 Ktor

    Ktor 是一个使用 Kotlin 以最小的成本快速创建 Web 应用程序的框架。Ktor 是一个用于在连接系统(connected systems)中构建异步服务器和客户端的 Kotlin 框架。它由 Kotlin 团队创建，因此，它充分利用了 Kotlin 的语言特性，为开发者提供出色的体验和运行时性能。import io.kto...

  • vdi voi idv区别_VDI,IDV,VOI究竟有何不同

    l VDI (Virtual Desktop Infrastructure)VDI构架采用的“集中存储、集中运算”构架，所有的桌面以虚拟机的方式运行在服务器硬件的虚拟化层上，桌面以图像传输的方式发送到客户端。l IDV (Intelligent Desktop Virtualization) 由于VDI方案对服务器资源、网络带宽要求比...

  • ATS和闰秒那些事儿

    受昨晚闰秒问题影响，今天内网和线上的ATS服务器都出现了CPU负载增高的问题，参见下面的截图 下面是tsar监控到负载异常记录，从今天(20150701)早上8:05分开始： 我们内网和线上的服务器Linux kernel内核版本都是 经过实践摸索，发现如下规律： 1.如果已经开启ntpd，如果昨晚没有关闭n...

  • 在CentOS 6.3 64bit上为Apache Traffic Server 4.2.3挂载SSD并压测

    下面的安装假定是以root用户身份进行的，Linux服务器已经安装好系统，磁盘已经做好分区。 首先需要认识我们的Linux服务器的硬件配置和软件情况 硬件配置： DELL R720 2U服务器 CPU  8核 Intel(R) Xeon(R) CPU E5-2609 0 @ 2.40GHz 内存 32G 硬盘  系统盘 /...

  • 禁止缩放safari浏览器--阻止双击放大--阻止双指掐捏放大-

      /*禁止缩放safari浏览器*/ var scale = {disabledSafari: function () {/* 阻止双击放大*/var lastTouchEnd = 0;document.addEventListener("touchstart", function (event) {if (event.touch...

  • $g.$utils.实用工具类

      $g.$utils = {/**舒工Ajax-lite 1.0 -- 最精简的ajax自定义访问方法*/ajax: function (o) {var p = o.post, g = o.get, d = p.data, a = p.async, J = 'json', j = p[J], s = g.success, e =...

  • Sg.js框架核心概念

      Sg.js框架核心概念： 1）所有变量、方法、类对象全部都是从属于$g主树，由$g分支出很多$g.变量名、$g.方法、$g.对象id、$g.类；2）获取控件内部属性必须使用公开的get方法获取，禁止直接用访问内部变量方式来获取控件内部变量、属性值；3）修改控件内部属性、绑定方法等都必须使用公开的set方法来操作，禁止直接用访问...

  • mui ios中form表单中点击输入框头部导航栏被推起及ios中form表单中同时存在日期选择及输入框时，日历选择页面错乱bug...

     一、ios header导航栏被推起解决方法 1 设置弹出软键盘时自动改变webview的高度 plus.webview.currentWebview().setStyle({ softinputMode: "adjustResize" // 弹出软键盘时自动改变webview的高度 }); 2 增加样式 html...

  • jquery-ajax请求：超时设置，增加 loading 提升体验

    前端发送Ajax请求到服务器，服务器返回数据这一过程，因原因不同耗时长短也有差别，且这段时间内页面显示空白。如何优化这段时间内的交互体验，以及长时间内服务器仍未返回数据这一问题，是我们开发中不容忽视的重点。 常见的做法是： 1、设置超时时间，一旦时间超过设定值，便终止请求；2、页面内容加载之前，手动增加一个 loading 层。 代码...

  • 在Ubuntu 14.04 64bit上为Sublime text 3安装搜狗拼音输入法

    Sublime text 3不支持中文输入法，下面是我结合网上的各种资料摸索实践了一遍，为Sublime text 3成功添加了搜狗拼音输入法，特此记录以备参考。 前提条件： 事先安装并配置好搜狗拼音法和Sublime text 3编辑器，参考本博客相关文章。 1.安装相关依赖库 sudo apt-get install bui...

  • 利用人工智能（Magpie开源库）给一段中文的文本内容进行分类打标签

    当下人工智能是真心的火热呀，各种原来传统的业务也都在尝试用人工智能技术来处理，以此来节省人工成本，提高生产效率。既然有这么火的利器，那么我们就先来简单认识下什么是人工智能吧，人工智能是指利用语音识别、语义理解、图像识别、视觉处理、机器学习、大数据分析等技术实现机器智能自动化做出响应的一种模拟人行为的手段。而我们这里介绍的Magpie则...

  • selenium的基础知识点

    from selenium import webdriver from scrapy.selector import Selector#模拟登陆 browser = webdriver.Chrome(executable_path='Chromedriver.exe') #路径是Chromedriver.exe的存放位置，windo...

  • hadoop程序MapReduce之SingletonTableJoin

    需求：单表关联问题。从文件中孩子和父母的关系挖掘出孙子和爷奶关系 样板：child-parent.txt           xiaoming daxiong          daxiong alice          daxiong jack 输出：xiaoming alice         xiaoming jack 分析设...

  • Hadoop 统计单词字数的例子

     hadoop 的核心还是 Map-Reduce过程和 hadoop分布式文件系统   第一步：定义Map过程 /**  *  * Description:  *  * @author charles.wang  * @created Mar 12, 2012 1:41:57 PM  *   */ public class MyMa...

©2024 11GX.COM