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 可以访 问这里