網頁實時聊天之PHP實現websocket

前言

websocket 做爲 HTML5 裏一個新的特性一直很受人關注，由於它真的很是酷，打破了 http 「請求-響應」的常規思惟，實現了服務器向客戶端主動推送消息，本文介紹如何使用 PHP 和 JS 應用 websocket 實現一個網頁實時聊天室；

之前寫過一篇文章講述如何使用ajax長輪詢實現網頁實時聊天，見連接： 網頁實時聊天之js和jQuery實現ajax長輪詢 ，可是輪詢和服務器的 pending 都是無謂的消耗，websocket 纔是新的趨勢。

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

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

而後固然是源碼： 我是源碼連接 - github - 枕邊書

---

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  |
 + - - - - - - - - - - - - - - - +-------------------------------+
 |                               |Masking-key, if MASK set to 1  |
 +-------------------------------+-------------------------------+
 | Masking-key (continued)       |          Payload Data         |
 +-------------------------------- - - - - - - - - - - - - - - - +
 :                     Payload Data continued ...                :
 + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
 |                     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($this->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, $write, $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, $write, $except, 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 仍在鏈接中或已關閉」 的錯誤信息。

Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.

考慮到鏈接可能還沒處理好，我就實現了 sleep 方法等了一秒再發送用戶名，但是錯誤仍然存在。

後來突然想到 js 的單線程阻塞機制，才明白使用 sleep 一直阻塞也是沒有用的，利用好 js 的事件機制纔是正道：因而在服務器端添加邏輯，在握手成功後，向客戶端發送握手已成功的消息；客戶端先將用戶名存入一個全局變量，接收到服務器的握手成功的提醒消息後再發送用戶名，因而成功在第一時間更新用戶名。

---

小結

聊天室擴展方向

簡易聊天室已經完成，固然還要給它帶有但願的美好將來，但願有人去實現：

• 頁面美化（信息添加顏色等）
• 服務器識別 '@' 字符而只向某一個 socket 寫數據實現聊天室的私聊；
• 多進程（使用 redis 等緩存數據庫來實現資源的共享），可參考我之前的一篇文章： 初探PHP多進程
• 消息記錄數據庫持久化（log 日誌仍是不方便分析）
• ...

總結

多讀些經典書籍仍是頗有用的，有些東西真的是舉一反三，APUE/UNP 仍是要再多翻幾遍。此外互聯網技術突飛猛進，挑一些本身喜歡的學習一下，跟你們分享一下也是挺舒服的（雖然程序和博客加一塊用了至少10個小時...）。

參考：

websocket協議翻譯

刨根問底 HTTP 和 WebSocket 協議（下）

學習WebSocket協議—從頂層到底層的實現原理（修訂版）

嗯，持續更新。喜歡的能夠點個推薦或關注，有錯漏之處，請指正，謝謝。