html5中的消息通信简介 + 我的新网站开张

本文摘自勾三股四更早时期的不老歌博客。

随着网页时效性需求的增强和其所涉及范围的扩大，各种消息通信的运用越来越多。在html5中，有很一部分消息通信的新规范，旨在让这些工作更加方便实用。接下来会为大家介绍4个比较主要的通信方式：

* WebSocket
* Server-Sent Event
* Cross-Document Messaging
* Channel Messaging

WebSocket

这个技术已经被越来越多的人注意到了。长连接一直以来一直是web的一个盲区，而WebSocket让网页通过几个简单的js接口，就可以和服务器建立长连接；另外一个好处，也是长连接随之带来的，就是省掉了每次传统请求中的HTTP头、cookies等信息的冗余传输。

WebSocket的新知识分两部分：一部分是浏览器端的js接口定义，方便前端开发调用；另一部分是WebSocket协议，对浏览器相关js接口的底层实现和服务器端的配合提出了明确的要求，这部分主要是服务器开发和浏览器开发需要比较关注，对前端开发者影响不大。

WebSocket的大致js接口设计如下：

socket = new WebSocket(url[, protocols]);
socket.url;
socket.readyState; // CONNECTING|OPEN|CLOSING|CLOSED
socket.send(...); // string|arraybuffer|blob
socket.onmessage = function (e) {
    e.data;
};
socket.onopen = function (e) {...};
socket.onerror = function (e) {...};
socket.onclose = function (e) {...};

更详细的介绍可以移步到：http://www.w3.org/TR/websockets/

Server-Sent Event

顾名思义，这个新特性可以允许服务器更方便的主动发送信息给浏览器。从量级上看，这个比WebSocket更轻量级一些，但它的好处也很明显。首先，它不需要特殊的协议和特殊的服务器语言，现行的主流技术完全可以应付；第二，它强调的是服务器发送，而不是双向通信，这样开发和实现更简单，更有效率。一个很适用的场景就是微博页面的新微博、新评论、新私信的实时推送。

Server-Sent Event简称作SSE。SSE的使用方法也非常简单：

var source = new EventSource('./sse.php');
source.addEventListener('message', function (e) {e.data;...}, false);
source.addEventListener('add', function (e) {e.data;...}, false);
source.addEventListener('customEventType', function (e) {e.data;...}, false);

然后服务器端返回特定的格式：

echo "event:customEventType"; // 确定事件类型
echo "data:content string here..."; // 返回数据内容
echo "retry:5000" // 5秒之后请求第二次;

就可以配合工作了。

更详细的介绍可以移步到：http://dev.w3.org/html5/eventsource/

Cross-Document Messaging

这个技术主要运用在不同window/worker之间进行消息通信。运行环境比如iframe、webworker、window.open打开的新窗口等。不同网页之间的通信，可以让web元素更多元化的融合在一起。

Cross-Document Messaging的接口用法大致如下：

// on top
iframe.postMessage('hello');

// on iframe
window.onmessage = function (e) {e.data;...}

值得注意的是，这项技术可以解决跨域问题——当然，有个限制，就是被请求的页面通过head信息明确授权跨域访问。

Channel Messaging

这项技术就更加奇妙了，它允许js创建一个频道(channel)，每个频道有两个端口(port)对象，这两个端口对象的引用不论通过何种方式传递到何处，只要端口1调用postMessage(data)发个消息，端口2就会立刻收到onmessage事件，反之亦然。大概用法是这样的：

var channel = new MessageChannel();
var port1 = channel.port1;
var port2 = channel.port2;
port1.onmessage = function (e) {e.data;...};
port2.postMessage('Hello Port1!');

Channel Messaging给了我们很大的想象空间，做一些有趣的技术实现。

有关Cross-Document Messaging和Channel Messaging的更详细介绍请移步到：http://www.w3.org/TR/webmessaging/

更多的消息通信内容

希望关注html5消息通信这部分内容的朋友，可以进一步看看这几样东西：一个是WebWorker，以及随之而来的各种同步数据操作接口(之前的接口多半都是异步的，通过回调函数继续处理的，这样的代码比较不够直观，而在worker里不存在“界面卡死”一说，所以就没有必要了)，还有就是WebRTC技术，让客户端更加主导通信。

--------

Demo

这里制作了一个简单的demo，涵盖了除WebSocket之外的所有其它3项技术：Cross-Document Messaging、Channel Messaging、Server-Sent Event。目前webkit内核对这部分技术的支持还是比较完善的。另外SSE中的php部分代码很简单，我的php也很烂，拿不出手，就不公开代码了。
http://jiongks.name/demos/web-msg/

--------

我的新网站

好吧，既然新的demo已经分享给大家了，也就不瞒着大家了。我开启了又一个新网站：囧克斯，空间架设在sae上：http://jiongks.sinaapp.com/ 大家也可以通过 http://jiongks.name/ 直接访问，这个域名我前阵子刚买下来。

现在刚开始，里面东西并不多，我放了之前的demo和ppt充数，新网站的一些未来打算我也已经想到了一部分写上去了。另外不知道新设计的皮肤经不经得起大家的审美考验。欢迎大家参观留言助兴 :-)

今后不老歌会继续保持更新，但也会考虑把内容和访问量逐渐迁移引导过去。

恩，就是这么多了。