Web跨浏览器进程通信(Web跨域)

　　在之前一篇文章里尝试了跨浏览器的数据共享，最后提到使用LocalConnection还可以实现跨浏览器消息交互的可行性。

　　花了两个晚上简略的研究了下，LocalConnection的单向通信非常的简单，不过要实现多个终端交互，必须自己实现一套消息机制，见智见仁了。

　　为了简单演示，本例使用了基于广播的观察者模式：每个终端可以订阅自己感兴趣的主题，也可以向广播发送消息，通知其他感兴趣的终端。

　　Demo: http://www.etherdream.com/FunnyScript/WebIPC/ （多开几个浏览器页面小窗口，即可测试）

　　比较遗憾的是最新版的Chrome浏览器仍然无法和其他浏览器进程交互:(

　　如果没有错误发生，应该就是如下的效果：

　　在任何一个页面上的操作，都会立即同步到其他页面里，只要Observe了感兴趣的主题。

　　为什么要使用观察者模式呢？因为跨进程的通信是比较耗资源的，所以不感兴趣的消息可以直接不订阅，而不是收到再放弃。

　　LocalConnection是为单一的通信设计的，虽然使用很简单，但可用的接口少之又少。想直接用它来广播事件，或者消息路由，门都没有。

　　因此底层的消息发送上没有太多可选余地，只能简单的点对点发送。我们必须创建多个LocalConnection，来实现消息的汇聚和分发。

　　LocalConnection真正能用的只有两个方法：

　　　　connect(name)　—— 创建管道（每个LocalConnection只能创建一个管道，每个管道名只能有一个）

　　　　send(name, ...)　—— 向管道发送数据

　　如果只有两个终端通信，那么一切都是那么简单。。。

　　

　　只需简单的将消息发送给对方即可。

　　不过有多个终端情况就大不相同了。由于我们是本地进程间通信，并没有第三方服务器主持，加上LocalConnection只能点对点的发送消息。意味着每次广播都要给其他所有的终端都发送一次，这样复杂度就大大增加了。

　　为了简化结构，我们模拟一个LocalConnection作为Host，在第一次启动时运行。其余的作为Client，每次广播消息都提交给Host，由它来调度。

　　

　　Host维护着一个回调列表。当Client对某个主题(subject)感兴趣时，可以发送<主题ID，自己的管道名>给Host来订阅。于是Host就把此Client的管道名添加到该主题的回调列表里。以后若有该主题的消息，即可根据回调列表通知订阅的Client。

　　为了能让Host和Client通信更简单，这里使用channel+ID的命名规则，来创建管道名。

　　Host的ID为空，于是Client发送数据只需send(channel)即可；

　　Client的ID从1~100，选一个没用被占用的作为管道名。Host回调时只需send(channel+id)就能通知对应的Client。

　　然而，这个Host服务仅仅是假象的。我们根本没法在页面之外运行一个第三方服务，一切只能在页面中实现！于是我们把第一次启动的页面作为Host。当这个页面关闭时，我们再通知第二个页面创建Host，以此类推。。。

　　

　　由于没有第三方服务器，每个Client都可以兼职做Host。到这里，你是不是想到了局域网游戏？由于没有服务器，第一个创建的玩家便是主机。当他退出时，主机就交给了第二个玩家。如果他没按正常步骤，强制退出了游戏，那就很有可以造成主机丢失，数据没来得及转移给下个玩家，导致游戏断线结束。

　　同样，当我们Host所在页面关闭时，会向所有Client发送一条退出消息。至于谁继承王位，不用关心，谁先得知谁做~~ 唯一值得注意的就是：很多浏览器不能正常触发window.unload事件，这意外着Host可能还没来得把回调列表移交给他的继承者就已匆匆离去，于是后人就无法接管了。为了不让这种情况出现，每当新的Host上任，就向所有的Client发送一个请求，让大家把各自关注的主题重新发送一遍（之前关注的都保存着，就为了这个时候用）。因此，即使新上任的Host一无所有，大家也会把现状告诉他，可立即投入工作中。

　　若是强制关闭了Host所在的页面进程，那么主机丢失后一切都将会挂起。这时所有Client发送的数据都将有去无回，只有等到之后出现数据发送失败，才得知Host已经挂了。这时谁先发现这个错误，谁就接管Host工作吧。

　　当然，还可以考虑加上心跳机制，即使Host没有挂掉，但其所在进程长时间占用CPU，导致LocalConnection无法响应消息事件，也可以考虑转移Host了。

　　由于时间限制，本例还有不少BUG，以后再慢慢完善。

　　想看代码可以浏览：http://code.google.com/p/webipc/source/browse/

　　事实上纯粹的本地通信意义并不大，只有配合远程服务进行消息的交互，才更有意义。例如用户开了多个微博页面，传统的模型必须为每个页面发起一个长连接，来保持实时的数据接收。如果使用跨浏览器通信，那么只需让Host发起一个连接即可，其余的Client订阅自己想要的主题，最终只需一个连接就可以。

赞 (0)

相关推荐

  • Ajax的内部实现机制、原理与实践小结

    一.Ajax是什么 AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术.作为创建交互式网页应用的网页开发技术,它有以下特点: 使用XHTML+CSS来表示信息 使用JavaScript操作DOM(Document Object Model)进行动态显示及交互 使用XML和XSLT进行数据交换及相关操作 使用XMLHttp

  • 浅谈Ajax的缓存机制

    Ajax的缓存机制和浏览器处理资源时的缓存机制是一样的. 三条简单规则: 只要是URL相同的GET请求,浏览器会使用缓存(当然还要看服务器的Cache-Control/Expires/Last-Modified/ETag头的设置). 只要是POST请求,浏览器都不会缓存. Https的请求,浏览器不会缓存(绝大数情况如此,但是也有例外,据说FF浏览器是例外). 补充: 在URL中拼入随机的查询字符串可以使浏览器认为这是一个新的请求,从而不使用缓存. 在Ajax的请求中设置Http头: If-Mo

  • 分享AjaxPro或者Ajax实现机制

    首先声明以下几点: 1.讲解如果感觉很初级的话,就算我装13了,不要"喷"我哦! 2.如果有那些地方不对,还希望大家能指正,一定虚心请教: 3.这只是一家之言,本人经验,无依无据,爱信不信. 下面开讲: 谈起ajax做过web开发的都很是熟悉,就是经由过程xmlhttp request与服务器端通信而避免页面按f5.也就是我们常说的"无刷新",至于这里面的原理我就不懂,哪个懂的话,教一下我啊,谢谢! 凡要使用ajaxpro,咱们大致要做以下工作: 1.在项目中添加引

  • AJAX机制详解以及跨域通信

    1.Ajax 1.1.Ajax简介   Ajax简介这一部分我们主要是谈一下ajax的起源,ajax是什么?因为这些是跟技术无关的.所以,大多细节都是一笔带过. Ajax的起源? Ajax一词源于2005年 Jesse James Garrett发表的一篇题为"Ajax:A new Approach to Web Applications".他在这篇文       章中介绍了一种新技术,用他的话说,就是Ajax :Asynchronous JavaScript +XML的缩写. Aja

  • JavaScript使用HTML5的window.postMessage实现跨域通信例子

    JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: 1.document.domain+iframe的设置,应用于主域相同而子域不同: 2.利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限 3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要 在同一客户端就行,跨应用程序, 可以跨域. window.name 保存数据以及跨域 iframe 静态代理动

  • 利用iframe实现ajax跨域通信的实现原理(图解)

    利用iframe实现ajax跨域通信的实现原理(图解)

    在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的资料说明这是为什么,我觉得应该是出于安全性的考虑吧.纵然如此,要实现跨域访问的话,方法还是有的,而且不只一种,在这里介绍其中一种解决方案:如何利用iframe完成ajax的跨域请求. 如下图所示:域a.com的页面request.html(即http://a.com/request.html)里面嵌

  • AJAX JavaScript反射机制的介绍

    什么是反射机制 反射机制指的是程序在运行时能够获取自身的信息.例如一个对象能够在运行时知道自己有哪些方法和属性. 在JavaScript中利用for(-in-)语句实现反射 在JavaScript中有一个很方便的语法来实现反射,即for(-in-)语句,其语法如下: for(var p in obj){ //语句 } 这里var p表示声明的一个变量,用以存储对象obj的属性(方法)名称,有了对象名和属性(方法)名,就可以使用方括号语法来调用一个对象的属性(方法): 复制代码 代码如下: for

  • Web跨浏览器进程通信(Web跨域)

    Web跨浏览器进程通信(Web跨域)

    在之前一篇文章里尝试了跨浏览器的数据共享,最后提到使用LocalConnection还可以实现跨浏览器消息交互的可行性. 花了两个晚上简略的研究了下,LocalConnection的单向通信非常的简单,不过要实现多个终端交互,必须自己实现一套消息机制,见智见仁了. 为了简单演示,本例使用了基于广播的观察者模式:每个终端可以订阅自己感兴趣的主题,也可以向广播发送消息,通知其他感兴趣的终端. Demo: http://www.etherdream.com/FunnyScript/WebIPC/ (多

  • JavaScript中的跨浏览器事件操作的基本方法整理

    绑定事件 EU.addHandler = function(element,type,handler){ //DOM2级事件处理,IE9也支持 if(element.addEventListener){ element.addEventListener(type,handler,false); } else if(element.attachEvent){ //type加'on' //IE9也可以这样绑定 element.attachEvent('on' + type,handler); } /

  • js事件处理程序跨浏览器解决方案

    本文实例为大家分享了js事件处理程序跨浏览器解决方案,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div> <input type="button" id="button1" va

  • Android IPC机制利用Messenger实现跨进程通信

    Android IPC机制利用Messenger实现跨进程通信

    写作原因:跨进程通信的实现和理解是Android进阶中重要的一环.下面博主分享IPC一些相关知识.操作及自己在学习IPC过程中的一些理解.这一章使用Messenger实现跨进程通信,其中bindService基础部分参见Android IPC机制绑定Service实现本地通信. 跨进程简介 在介绍使用Messenger跨进程通信之前先要了解以下问题:为什么需要跨进程通信?只有有了需求才有学习的价值.我个人将不同进程简单的理解为不同的应用程序(当然也有例外,比如可以在同一个应用程序中开启两个或多个

  • Android AIDL实现跨进程通信的示例代码

    AIDL是Android接口定义语言,它可以用于让某个Service与多个应用程序组件之间进行跨进程通信,从而可以实现多个应用程序共享同一个Service的功能. 实现步骤 例:用 A程序去访问 B程序的MyService.java服务 在B中建立AIDL文件MyAidlService.AIDL,在AIDL文件里写我们的接口方法 在MyService中写AIDL文件定义的方法的具体服务逻辑 在B的manifest文件中,为Service添加action "com.xyb.servicetest.

  • Android编程实现AIDL(跨进程通信)的方法详解

    Android编程实现AIDL(跨进程通信)的方法详解

    本文实例讲述了Android编程实现AIDL(跨进程通信)的方法.分享给大家供大家参考,具体如下: 一. 概述: 跨进程通信(AIDL),主要实现进程(应用)间数据共享功能. 二. 实现流程: 1. 服务器端实现: (1)目录结构,如下图: (2)实现*.aidl文件: A. IAIDLService.aidl实现: package com.focus.aidl; import com.focus.aidl.Person; interface IAIDLService { String getN

  • WinForm实现跨进程通信的方法

    本文实例展示了WinForm实现跨进程通信的方法,分享给大家供大家参考之用.具体方法如下: 主要功能代码如下: public class WinMessageHelper { private struct COPYDATASTRUCT { public IntPtr dwData; public int cbData; [MarshalAs(UnmanagedType.LPStr)] public string lpData; } //使用COPYDATA进行跨进程通信 public const

  • android使用AIDL跨进程通信（IPC）

    android使用AIDL跨进程通信（IPC）

    AIDL的作用 AIDL (Android Interface Definition Language) 是一种IDL 语言,用于生成可以在Android设备上两个进程之间进行进程间通信(interprocess communication, IPC)的代码.如果在一个进程中(例如Activity)要调用另一个进程中(例如Service)对象的操作,就可以使用AIDL生成可序列化的参数. AIDL IPC机制是面向接口的,像COM或Corba一样,但是更加轻量级.它是使用代理类在客户端和实现端传

  • Android AIDL实现两个APP间的跨进程通信实例

    本文为大家分享了Android AIDL实现两个APP间的跨进程通信实例,供大家参考,具体内容如下 1 Service端创建 首先需要创建一个Android工程然后创建AIDL文件,创建AIDL文件主要为了生成继承了Binder的Stub类,以便应用Binder进行进程间通信 servier端结构如下 AIDL代码如下 // IBookManager.aidl package com.example.bookserver.aidl; // Declare any non-default type

  • 分析CmProcess跨进程通信的实现

    分析CmProcess跨进程通信的实现

    一.基础知识准备 1.1.多进程 Android多进程概念:一般一个 app 只有一个进程,所有的 components 都运行在同一个进程中,进程名称就是 app 包名.但是每一个进程都有内存的限制,如果一个进程的内存超过了这个限制的时候就会报 OOM 错误.为了解决内存限制的问题,Android 引入了多进程的概念,将占用内存的操作放在一个单独的进程中分担主进程的压力. 多进程的好处: 分担主进程的内存压力. 常驻后台任务. 守护进程,主进程和守护进程相互监视,有一方被杀就重新启动它. 多么

随机推荐