前言

最近艱難地“擠”出了一點時間，完善了很早之前做的 websocket “請求-原樣返回”伺服器，用js完善了下客戶端功能，把過程和思路分享給大家，順便也普及一下 websocket 相關的知識，當然現在討論 websocket 的文章也特別多，有些理論性的東西我也就略過了，給出參考文章供大家選擇閱讀。

正文開始前，先貼一張聊天室的效果圖（請不要在意css渣的頁面）：

websocket

簡介

WebSocket 不是一門技術，而是一種全新的協議。它應用 TCP 的 Socket（套接字），為網路應用定義了一個新的重要的能力：客戶端和伺服器端的雙全工傳輸和雙向通訊。是繼 java applets、 XMLHttpRequest、 Adobe Flash,、ActiveXObject、 各類 Comet 技術之後，伺服器推送客戶端訊息的新趨勢。

與http的關係

在網路分層上，websocket 與 http 協議都是應用層的協議，它們都是基於 tcp 傳輸層的，但是 websocket 在建立連線時，是借用 http 的 101 switch protocol 來達到協議轉換（Upgrade）的，從 HTTP 協議切換成 WebSocket 通訊協議,這個動作協議中稱“握手”；

握手成功後，websocket 就使用自己的協議規定的方式進行通訊，跟 http 就沒有關係了。

握手

以下是一個我自己的瀏覽器傳送的典型的握手 http 頭：

伺服器收到握手請求後，提取出請求頭中的 “Sec-WebSocket-Key” 欄位，追回一個固定的字串 ‘258EAFA5-E914-47DA-95CA-C5AB0DC85B11'， 然後進行 sha1 加密，最後轉換為 base64 編碼，作為 key 以 “Sec-WebSocket-Accept” 欄位返回給客戶端，客戶端匹配此 key 後，便建立了連線，完成了握手；

資料傳輸

websocket 有自己規定的資料傳輸格式，稱為 幀（Frame），下圖是一個數據幀的結構，其中單位為bit：

  0                   1                   2                   3

  0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1

 +-+-+-+-+-------+-+-------------+-------------------------------+

 |F|R|R|R| opcode|M| Payload len |    Extended payload length    |

 |I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |

 |N|V|V|V|       |S|             |   (if payload len==126/127)   |

 | |1|2|3|       |K|             |                               |

 +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +

 |     Extended payload length continued,if payload len == 127  |

 + - - - - - - - - - - - - - - - +-------------------------------+

 www.cppcns.com;|                               |Masking-key,if MASK set to 1  |

 +-------------------------------+-------------------------------+

 | Masking-key (continued)       |          Payload Data         |

 +-------------------------------- - - - - - - - - - - - - - - - +

 :                     Payload Data continued ...                :

 + - - - - - - - - - - - - - - - http://www.cppcns.com- - - - - - - - - - - - - - - - +

 |                     Payload Data continued ...                |

 +---------------------------------------------------------------+

具體每個欄位是什麼意思，有興趣的可以看一下這篇文章 The WebSocket Protocol 5.資料幀 感覺自己對二進位制的操作還不是很靈活，也就沒有挑戰自己寫演算法解析資料了，下面的資料幀解析和封裝都是使用的網上的演算法。

不過，我工作中寫支付閘道器中還是會經常用到資料的進位制操作的，這個一定是要仔細研究總結一下的，嗯，先記下。

php 實現 websocket 伺服器

PHP 實現 websocket 的話，主要是應用 PHP 的 socket 函式庫：

PHP 的 socket 函式庫跟 C 語言的 socket 函式非常類似，以前翻過一遍 APUE,所以覺得還挺好理解。在 PHP 手冊中看一遍 socket 函式，我想大家也能對 php 的 socket 程式設計有一定的認識。

下面會在程式碼中對所用函式進行簡單的註釋。

檔案描述符

忽然提及'檔案描述符'，大家可能會有些奇怪。

但作為伺服器，是必須要對已經連線的 socket 進行儲存和識別的。每一個 socket 代表一個使用者，如何關聯和查詢使用者資訊與 socket 的對應就是一個問題了，這裡便應用了關於檔案描述符的一點小技巧。

我們知道 linux 是'萬物皆檔案'的，C 語言的 socket 的實現便是一個個的'檔案描述符‘ ，這個檔案描述符一般是開啟檔案的順序遞增的 int 數值，從 0 一直遞增（當然系統是有限制的）。每一個 socket 都對應一個檔案，讀寫 socket 都是操作對應的檔案，所以也能像檔案系統一樣應用 read 和 write 函式。

tips: linux 中， 標準輸入對應的是檔案描述符 0；標準輸出對應的檔案描述符是 1； 標準錯誤對應的檔案描述符是 2；所以我們可以使用 0 1 2對輸入輸出重定向。

那麼類似於 C socket 的 PHP socket 自然也繼承了這一點，它建立的 socket 也是型別於 int 值為 4 5 之類的資源型別。 我們可以使用 (int) 或 intval() 函式把 socket 轉換為一個唯一的ID，從而可以實現用一個 '類索引陣列‘ 來儲存 socket 資源和對應的使用者資訊；

結果類似：

$connected_sockets = array(
    (int)$socket => array(
        'resource' => $socket,'name' => $name,'ip' => $ip,'port' => $port,...
    )
)

建立伺服器socket

下面是一段建立伺服器 socket 的程式碼：

// 建立一個 TCP socket,此函式的可選值在官方文件中寫得十分詳細，這裡不再提了
$this->master = socket_create(AF_INET,SOCK_STREAM,SOL_TCP);
// 設定IP和埠重用,在重啟伺服器後能重新使用此埠;
socket_set_option($this->master,SOL_SOCKET,SO_REUSEADDR,1);
// 將IP和埠繫結在伺服器socket上;
socket_bind($thiswww.cppcns.com->master,$host,$port);
// listen函式使主動連線套介面變為被連線套介面，使得此 socket 能被其他 socket 訪問，從而實現伺服器功能。後面的引數則是自定義的待處理socket的最大數目，併發高的情況下，這個值可以設定大一點，雖然它也受系統環境的約束。
socket_listen($this->master,self::LISTEN_SOCKET_NUM);

這樣，我們就得到一個伺服器 socket，當有客戶端連線到此 socket 上時，它將改變狀態為可讀，那就看接下來伺服器的處理邏輯了。

伺服器邏輯

這裡著重講一下 socket_select($read,$write,$except,$tv_sec [,$tv_usec]):

select 函式使用傳統的 select 模型，可讀、寫、異常的 socket 會被分別放入 $socket,$except 陣列中,然後返回 狀態改變的 socket 的數目，如果發生了錯誤，函式將會返回 false.

需要注意的是最後兩個時間引數，它們只有單位不同，可以搭配使用，用來表示 socket_select 阻塞的時長，為0時此函式立即返回，可以用於輪詢機制。 為 NULL 時，函式會一直阻塞下去,這裡我們置 $tv_sec 引數為null，讓它一直阻塞，直到有可操作的 socket 返回。

下面是伺服器的主要邏輯：

$write = $except = NULL;
$sockets = array_column($this->sockets,'resource'); // 獲取到全部的 socket 資源
$read_num = socket_select($sockets,NULL);

foreach ($sockets as $socket) {
        // 如果可讀的是伺服器 socket,則處理連線邏輯;            
        if ($socket == $this->master) {
            socket_accept($this->master);
            // socket_accept() 接受 請求 “正在 listen 的 socket（像我們的伺服器 socket ）” 的連線,並一個客戶端 socket,錯誤時返回 false;
             self::connect($client);
             continue;
            }
        // 如果可讀的是其他已連線 socket,則讀取其資料,並處理應答邏輯
        } else {
            // 函式 socket_recv() 從 socket 中接受長度為 len 位元組的資料，並儲存在 $buffer 中。
            $bytes = @socket_recv($socket,$buffer,2048,0);

            if ($bytes < 9) {
                // 當客戶端忽然中斷時，伺服器會接收到一個 8 位元組長度的訊息（由於其資料幀機制，8位元組的訊息我們認為它是客戶端異常中斷訊息），伺服器處理下線邏輯，並將其封裝為訊息廣播出去
                $recv_msg = $this->disconnect($socket);
            } else {
                // 如果此客戶端還未握手，執行握手邏輯
                if (!$this->sockets[(int)$socket]['handshake']) {
                    self::handShake($socket,$buffer);
                    continue;
                } else {
                    $recv_msg = self::parse($buffer);
                }
            }

            // 廣播訊息
            $this->broadcast($msg);
        }
    }
}

這裡只是伺服器處理訊息的基礎程式碼，日誌記錄和異常處理都略過了，而且還有些資料幀解析和封裝的方法，各位也不一定看愛，有興趣的可以去 github 上支援一下我的原始碼~~

此外，為了便於伺服器與客戶端的互動，我自己定義了 json 型別程式設計客棧的訊息格式，形似：

$msg = [
    'type' => $msg_type,// 有普通訊息，上下線訊息，伺服器訊息
    'from' => $msg_resource,// 訊息來源
    'content' => $msg_content,// 訊息內容
    'user_list' => $uname_list,// 便於同步當前線上人數與姓名
    ];

客戶端

建立客戶端

前端我們使用 js 呼叫 Websocket 方法很簡單就能建立一個 websocket 連線，伺服器會為幫我們完成連線、握手的操作，js 使用事件機制來處理瀏覽器與伺服器的互動：

// 建立一個 websocket 連線
var ws = new WebSocket("ws://127.0.0.1:8080");

// websocket 建立成功事件
ws.onopen = function () {
};

// websocket 接收到訊息事件
ws.onmessage = function (e) {
    var msg = JSON.parse(e.data);
}

// websocket 錯誤事件
ws.onerror = function () {
};

傳送訊息也很簡單，直接呼叫 ws.send(msg) 方法就行了。

頁面功能

頁面部分主要是讓使用者使用起來方便，這裡給訊息框 textarea 添加了一個鍵盤監控事件，當用戶按下回車鍵時直接傳送訊息；

function confirm(event) {
    var key_num = event.keyCode;
    if (13 == key_num) {
        send();
    } else {
        return false;
    }
}

還有使用者開啟客戶端時生成一個預設唯一使用者名稱；

然後是一些對資料的解析構造，對客戶端頁面的更新，這裡就不再囉嗦了，感興趣的可以看原始碼。

使用者名稱非同步處理

這裡不得不提一下使用者登陸時確定使用者名稱時的一個小問題，我原來是想在客戶端建立一個連線後直接傳送使用者名稱到伺服器，可是控制檯裡報出了 “websocket 仍在連線中或已關閉” 的錯誤資訊。

Un程式設計客棧caught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.

考慮到連線可能還沒處理好，我就實現了 sleep 方法等了一秒再發送使用者名稱，可是錯誤仍然存在。

後來忽然想到 js 的單執行緒阻塞機制，才明白使用 sleep 一直阻塞也是沒有用的，利用好 js 的事件機制才是正道：於是在伺服器端新增邏輯，在握手成功後，向客戶端傳送握手已成功的訊息；客戶端先將使用者名稱存入一個全域性變數，接收到伺服器的握手成功的提醒訊息後再發送使用者名稱，於是成功在第一時間更新使用者名稱。

總結

聊天室擴充套件方向

簡易聊天室已經完成，當然還要給它帶有希望的美好未來，希望有人去實現

• 頁面美化（資訊新增顏色等）
• 伺服器識別 '@' 字元而只向某一個 socket 寫資料實現聊天室的私聊
• 多程序（使用 redis 等快取資料庫來實現資源的共享）
• 訊息記錄資料庫持久化（log 日誌還是不方便分析）

以上就是如何用PHP websocket實現網頁實時聊天的詳細內容，更多關於用PHP websocket實現網頁實時聊天的資料請關注我們其它相關文章！