webkit HTML5 WebSocket 综合分析 2

                                                 csdn lidp  http://blog.csdn.net/perfectpdl

上一篇文章介绍了 websocket理论，本篇分析websocket协议客户端部分在webkit浏览器引擎上的实现。

websocket api 可以看这里， 协议可以看这里RFC 6455.

webkit上websocket实现代码在WebCore/websockets目录下

一下为webkit  WebSocket JavaScript idl  接口的定义（websocket.idl）：

module websockets {    interface [        Conditional=WEB_SOCKETS,        CustomConstructor,            EventTarget,        NoStaticTables    ] WebSocket {        readonly attribute DOMString URL;        // ready state        const unsigned short CONNECTING = 0;        const unsigned short OPEN = 1;        const unsigned short CLOSED = 2;        readonly attribute unsigned short readyState;        readonly attribute unsigned long bufferedAmount;        // networking        attribute EventListener onopen;        attribute EventListener onmessage;        attribute EventListener onclose;        [Custom] boolean send(in DOMString data)          raises(DOMException);        void close();        // EventTarget interface        [Custom] void addEventListener(in DOMString type,                                       in EventListener listener,                                       in boolean useCapture);        [Custom] void removeEventListener(in DOMString type,                                          in EventListener listener,                                          in boolean useCapture);        boolean dispatchEvent(in Event evt)            raises(EventException);    };}

其中 URL 属性代表 WebSocket 服务器的网络地址，协议通常是”ws”,send 方法就是发送数据到服务器端，close 方法就是关闭连接。除了这些方法，还有一些很重要的事件：onopen，onmessage，onerror 以及 onclose。

浏览器提供的js接口给web开发人员使用，下面面为客户端建立 WebSocket 连接的实例 JavaScript 代码

 var  wsServer = 'ws://localhost:8888/Demo';  var  websocket = new WebSocket(wsServer);  websocket.onopen = function (evt) { onOpen(evt) };  websocket.onclose = function (evt) { onClose(evt) };  websocket.onmessage = function (evt) { onMessage(evt) };  websocket.onerror = function (evt) { onError(evt) };  function onOpen(evt) {  console.log("Connected to WebSocket server.");  }  function onClose(evt) {  console.log("Disconnected");  }  function onMessage(evt) {  console.log('Retrieved data from server: ' + evt.data);  }  function onError(evt) {  console.log('Error occured: ' + evt.data);  } 




上面 javascript 代码 为客户端发起请求流程，首先是
创建WebSocket对象，指定服务器端url. 这里创建时即发起tcp请求给服务器，所以创建的过程相对来讲是个堵塞动作,webkit 内部实现在V8WebsocketCustom.cpp中，constructorCallback 函数为构造函数入口，解析url及protocol后 调用websocket类的connect 函数发起tcp请求
 webSocket->connect(url, toWebCoreString(protocol), ec);
void WebSocket::connect(const String& url, const Vector<String>& protocols, ExceptionCode& ec)（websocket.cpp）
函数首先会做一些语法检测，比如协议是否为ws或wss(安全的ws), 然后建立 WebSocketChannel，建议一个websocoket通道代表此连接实例(WebSocketChannel.cpp)，
最后调用 ~WebSocketChannel 提供的connect 函数内部先创建握手对象WebSocketHandshake用于保存握手信息，didCreateWebSocket -> didCreateWebSocketImpl发起tcp请求。
客户端在构造完websocket对象时已经发起连接请求，然后 指定服务器端事件回调，比如onopen 事件表示连接建立完成，onmessage标识服务器有消息发送。
想了解更多websocket 可以访问这里