arrow link facebook search
2013-04-15 POSTED BY chris_lin

SOCKET SERVER- 網頁上的建置與應用

 

隨著網路的發達,網站提供給使用者的服務也越來越豐富多元,如線上聊天,Facebook的動態消息,Twitter等都具備了動態更新頁面上資訊的功能。然而要達成此功能的實作有下列幾種方式:Polling、Comet、Long Polling、WebSocket等。

目前Long Polling是最常見的即時更新方式;然而現階段的瀏覽器對於HTML5的支援度越來越高,若是使用WebSocket來建立SERVER跟CLIENT之間雙向的通道來溝通訊息,應是一種更為方便的方式。讓開發者在程式的撰寫上更為直覺,能專注在訊息傳遞的規則上。

因為公司內部的一個小專案有用到SOCKET的實作,在此分享一下建置上的過程。在測試過程中我們使用了兩種方式來建置Socket Server:

  1. NODE JS 的 Socket.IO
    Socket.IO需要在NODE JS架設的SERVER上執行,對WebSocket的支援非常完整,幫你處理了WebSocket各種版本的握手協議,使用上非常方便,有興趣者可以前往下列網址,故不再多做贅述。socket.io – http://socket.io/
  2. PHP 的 Socket Functions
    由於SOCKET SERVER的建置在網路上也不是什麼新鮮的東西,基本上已經有許多的說明以及文件可以參考;所以當初內部使用此一範例來做測試,並整理了一些問題及解決方式。

    • 線上聊天室 – http://code.google.com/p/php-websocket-server/此一程式提供了scoket server的建置,以及HTML5基本的client端對socket的連接和溝通。

      websocket 端,由於websocket的通訊協議到目前還未正式定案,所以在實作握手協議的時候會有不同版本的問題(連訊息的傳送方式也不同),此範例為第七版草案(之後的版本大多屬於功能上的擴充),所以有些舊瀏覽器 (像是iPhone4上的safari ) 使用之前的版本將會無法建立通道及溝通。

      舊版socket server – http://code.google.com/p/phpwebsocket/ ,此一程式為舊的scoket 握手協議的建置因此我們把其握手協議和訊息傳遞方式改寫入之前的聊天室程式裡;若是對於websocket各版本的握手協議或訊息溝通方式或功能有興趣,可以參考下列文件。http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-10

      在FLASH端的溝通我們使用了 https://github.com/Worlize/AS3WebSocket/ 此一資源做測試,此外當FLASH端連接到socket server時會向socket server 要 <policy-file-request/>,此時server端要返回 <?xml version=”1.0″ encoding=”UTF-8″?><cross-domain-policy xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”http://www.adobe.com/xml/schemas/PolicyFileSocket.xsd”><allow-access-from domain=”*” to-ports=”*” secure=”false” /><site-control permitted-cross-domain-policies=”master-only” /></cross-domain-policy> ,如此server 與 flash的通道才算建立完成。

 

在我們實作上的小專案上,執行起來目前看似沒有問題,不過因為測試樣本數太少,所以並不確定在多人及長時間的負載下,會不會出現一些不可預期的錯誤,希望大家也能實際建置起來玩玩。

其他參考資料
http://en.wikipedia.org/wiki/WebSocket
http://php.net/manual/en/book.sockets.php

 

↓↓↓ 內部測試的實作截圖,成品之後再分享出來~