Feeds:
文章
留言

Archive for 十二月 14th, 2009

Chrome 的 WebSocket 測試

最後更新時間:2012/8/8

最近需要測試 WebSocket, 利用這篇文章來複習一下,我的環境為 Python2.7.2+Win7+Chrome 21.x+pywebsocket r656

取得 pywebsocket 目錄構如下

└─src
│ COPYING
│ MANIFEST.in
│ README
│ setup.py

├─build
│ └─lib
│ └─mod_pywebsocket
│ │ common.py
│ │ dispatch.py
│ │ extensions.py
│ │ headerparserhandler.py
│ │ http_header_util.py
│ │ memorizingfile.py
│ │ msgutil.py
│ │ mux.py
│ │ standalone.py
│ │ stream.py
│ │ util.py
│ │ _stream_base.py
│ │ _stream_hixie75.py
│ │ _stream_hybi.py
│ │ __init__.py
│ │
│ └─handshake
│ draft75.py
│ hybi.py
│ hybi00.py
│ _base.py
│ __init__.py

├─example
│ bench_wsh.py
│ close_wsh.py
│ console.html
│ echo_client.py
│ echo_wsh.py
handler_map.txt
│ origin_check_wsh.py
│ pywebsocket.conf

├─mod_pywebsocket
│ │ common.py
│ │ dispatch.py
│ │ extensions.py
│ │ headerparserhandler.py
│ │ http_header_util.py
│ │ memorizingfile.py
│ │ msgutil.py
│ │ mux.py
│ │ standalone.py
│ │ stream.py
│ │ util.py
│ │ _stream_base.py
│ │ _stream_hixie75.py
│ │ _stream_hybi.py
│ │ __init__.py
│ │
│ └─handshake
│ draft75.py
│ hybi.py
│ hybi00.py
│ _base.py
│ __init__.py

└─test ~ 略

執行方式如下圖

 

 

 

 

 

 

 

 

 

 

 

 

 

HTML測試程式沒有變動~

 

——–

今天看到消息才知道 Chrome 4.0.249.0 已經支援 WebSocket,所以稍微嘗鮮一下,我的測試環境是

  • Windows Vista
  • Python 2.6
  • Chrome 4.0.266.0

首先 取得支援 WebSocket 的 Server – pywebsocket

svn checkout http://pywebsocket.googlecode.com/svn/trunk/ pywebsocket-read-only

然後安裝

python setup.py install

啟動 WebSocket Server

python standalone.py -p 3344 -w ..\example

執行結果應該類似這樣

image

然後是 Javascript 測試程式如下:

<html>
<head>
  <title> Chrome WebSocket Test #1 </title>
  <meta name="author" content="Chui-Wen Chiu"/>
</head> 
<body>
    <script>
    var ws = new WebSocket("ws://localhost:3344/echo");  

    ws.onopen = function(){
        alert('open');
        ws.send("hello");
    };

    ws.onmessage = function (evt) {        
        var received_msg = evt.data; 
        alert('receive: '+ received_msg);
    };  

    ws.onclose = function() { 
        // websocket is closed. 
        alert('close');
    };  

  </script>
</body>
</html>

執行結果

image

第二個測試

<html>
 <head>
  <title> Chrome WebSocket Test #2 </title>
  <meta name="author" content="Chui-Wen Chiu"/>
 </head>

 <body>
    <script>
    var ws = new WebSocket("ws://localhost:3344/echo");  

    ws.onopen = function(){
        document.getElementById('btnSend').disabled = false;
    };

    ws.onmessage = function (evt) {         
        var received_msg = evt.data; 
        document.getElementById('result').innerHTML += '<div>' + received_msg + '</div>';
    };  

    ws.onclose = function() { 
        document.getElementById('btnSend').disabled = true;
        alert('close');

    };  

    function btnSend_click(){
        var v = document.getElementById('txt').value;
        if (v.length > 0){
            ws.send(v);
        }
    }
  </script>
  <div>Input: <input type="text" id="txt"><button id="btnSend" onclick="btnSend_click()" disabled>Send</button></div>
  Receive:<div id="result"></div>
 </body>
</html>

執行結果:

image

如果輸入 Goodbye 就會結束連線

image

Read Full Post »