前言

websocket は HTML5 里一新的特性として一直受人注意、它真の非常に厳しいため、http "請(qǐng)求-響應(yīng)" の常規(guī)思維、實(shí)現(xiàn)了サービス務(wù)器から顧客への主動(dòng)推送メッセージ、本文介紹 PHP の使用法およびJS 應(yīng)用 websocket 實(shí)現(xiàn)一網(wǎng)頁(yè)實(shí)時(shí)聊天室；

以前に書いた一篇の文章は、ajax 時(shí)間聊天のjs と jQuery を使用する方法を説明していますが、保留中のすべては無(wú)料です，ウェブソケット才新しい趾です。

最近艱難地「擠」出了一點(diǎn)時(shí)間，完善了很早之前做的websocket「請(qǐng)求原樣返」服務(wù)器，用js完善了下客戶端機(jī)能，ハンドル過程和思路分享給大家，順便也普及一次websocket関連する知識(shí)は、當(dāng)然のことながら、Web ソケットの承認(rèn)に関する文章も特に多く、一部の合理的な意見は省略されており、參照文章に提供されています。

我は出典鏈接 - github - 枕邊書

ウェブソケット

はじめに

WebSocket はテクノロジーではなく、全く新しいプロトコルです。これは TCP の Socket (ソケット) を使用し、ネットワーク アプリケーションの新しい重要な機(jī)能、つまり全二重送信とクライアントとサーバー間の雙方向通信を定義します。 Java アプレット、XMLHttpRequest、Adobe Flash、ActiveXObject、およびさまざまな Comet テクノロジに続いて、サーバーがクライアント メッセージをプッシュするのは新しいトレンドです。

httpとの関係

ネットワーク層の観點(diǎn)から見ると、websocket と http プロトコルはどちらも tcp トランスポート層に基づいていますが、websocket は接続を確立するときに http の 101 スイッチ プロトコルを借用してプロトコル変換 (アップグレード) を行います。 HTTP プロトコルから WebSocket 通信プロトコルに切り替えるこのアクション プロトコルは「ハンドシェイク」と呼ばれます。

データ転送

Websocket にはフレームと呼ばれる獨(dú)自のデータ送信形式があります。次の図はデータ フレームの構(gòu)造です。単位はビットです。

PHPはWebSocketサーバーを?qū)g裝します

結(jié)果は次のようになります:

リーリー

サーバーソケットを作成する

リーリー

這樣，我們就得到一個(gè)服務(wù)器 socket，當(dāng)有客戶端連接到此 socket 上時(shí)，它將改變狀態(tài)為可讀，那就看接下來服務(wù)器的處理邏輯了。

服務(wù)器邏輯

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

select 函數(shù)使用傳統(tǒng)的 select 模型，可讀、寫、異常的 socket 會(huì)被分別放入 $socket, $write, $except 數(shù)組中,然后返回 狀態(tài)改變的 socket 的數(shù)目，如果發(fā)生了錯(cuò)誤，函數(shù)將會(huì)返回 false.

需要注意的是最后兩個(gè)時(shí)間參數(shù)，它們只有單位不同，可以搭配使用，用來表示 socket_select 阻塞的時(shí)長(zhǎng)，為0時(shí)此函數(shù)立即返回，可以用于輪詢機(jī)制。 為 NULL 時(shí)，函數(shù)會(huì)一直阻塞下去, 這里我們置 $tv_sec 參數(shù)為null，讓它一直阻塞，直到有可操作的 socket 返回。

下面是服務(wù)器的主要邏輯：

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

foreach ($sockets as $socket) {
        // 如果可讀的是服務(wù)器 socket, 則處理連接邏輯;            
        if ($socket == $this->master) {
            socket_accept($this->master);
            // socket_accept() 接受 請(qǐng)求 “正在 listen 的 socket（像我們的服務(wù)器 socket ）” 的連接, 并一個(gè)客戶端 socket, 錯(cuò)誤時(shí)返回 false;
             self::connect($client);
             continue;
            }
        // 如果可讀的是其他已連接 socket ,則讀取其數(shù)據(jù),并處理應(yīng)答邏輯
        } else {
            // 函數(shù) socket_recv() 從 socket 中接受長(zhǎng)度為 len 字節(jié)的數(shù)據(jù)，并保存在 $buffer 中。
            $bytes = @socket_recv($socket, $buffer, 2048, 0);

            if ($bytes < 9) {
                // 當(dāng)客戶端忽然中斷時(shí)，服務(wù)器會(huì)接收到一個(gè) 8 字節(jié)長(zhǎng)度的消息（由于其數(shù)據(jù)幀機(jī)制，8字節(jié)的消息我們認(rèn)為它是客戶端異常中斷消息），服務(wù)器處理下線邏輯，并將其封裝為消息廣播出去
                $recv_msg = $this->disconnect($socket);
            } else {
                // 如果此客戶端還未握手，執(zhí)行握手邏輯
                if (!$this->sockets[(int)$socket]['handshake']) {
                    self::handShake($socket, $buffer);
                    continue;
                } else {
                    $recv_msg = self::parse($buffer);
                }
            }

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

這里只是服務(wù)器處理消息的基礎(chǔ)代碼，日志記錄和異常處理都略過了，而且還有些數(shù)據(jù)幀解析和封裝的方法，各位也不一定看愛，有興趣的可以去 github 上支持一下我的源碼~~

此外，為了便于服務(wù)器與客戶端的交互，我自己定義了 json 類型的消息格式，形似：

$msg = [
    'type' => $msg_type, // 有普通消息，上下線消息，服務(wù)器消息
    'from' => $msg_resource, // 消息來源
    'content' => $msg_content, // 消息內(nèi)容
    'user_list' => $uname_list, // 便于同步當(dāng)前在線人數(shù)與姓名
    ];

客戶端

創(chuàng)建客戶端

前端我們使用 js 調(diào)用 Websocket 方法很簡(jiǎn)單就能創(chuàng)建一個(gè) websocket 連接，服務(wù)器會(huì)為幫我們完成連接、握手的操作，js 使用事件機(jī)制來處理瀏覽器與服務(wù)器的交互：

// 創(chuàng)建一個(gè) websocket 連接
var ws = new WebSocket("ws://127.0.0.1:8080");

// websocket 創(chuàng)建成功事件
ws.onopen = function () {
};

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

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

發(fā)送消息也很簡(jiǎn)單，直接調(diào)用 ws.send(msg) 方法就行了。

頁(yè)面功能

頁(yè)面部分主要是讓用戶使用起來方便，這里給消息框 textarea 添加了一個(gè)鍵盤監(jiān)控事件，當(dāng)用戶按下回車鍵時(shí)直接發(fā)送消息；

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

還有用戶打開客戶端時(shí)生成一個(gè)默認(rèn)唯一用戶名；

然后是一些對(duì)數(shù)據(jù)的解析構(gòu)造，對(duì)客戶端頁(yè)面的更新，這里就不再啰嗦了，感興趣的可以看源碼。

用戶名異步處理

這里不得不提一下用戶登陸時(shí)確定用戶名時(shí)的一個(gè)小問題，我原來是想在客戶端創(chuàng)建一個(gè)連接后直接發(fā)送用戶名到服務(wù)器，可是控制臺(tái)里報(bào)出了 “websocket 仍在連接中或已關(guān)閉” 的錯(cuò)誤信息。

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

考慮到連接可能還沒處理好，我就實(shí)現(xiàn)了 sleep 方法等了一秒再發(fā)送用戶名，可是錯(cuò)誤仍然存在。

后來忽然想到 js 的單線程阻塞機(jī)制，才明白使用 sleep 一直阻塞也是沒有用的，利用好 js 的事件機(jī)制才是正道：于是在服務(wù)器端添加邏輯，在握手成功后，向客戶端發(fā)送握手已成功的消息；客戶端先將用戶名存入一個(gè)全局變量，接收到服務(wù)器的握手成功的提醒消息后再發(fā)送用戶名，于是成功在第一時(shí)間更新用戶名。

小結(jié)

聊天室擴(kuò)展方向

簡(jiǎn)易聊天室已經(jīng)完成，當(dāng)然還要給它帶有希望的美好未來，希望有人去實(shí)現(xiàn)：

• 頁(yè)面美化（信息添加顏色等）
• 服務(wù)器識(shí)別 '@' 字符而只向某一個(gè) socket 寫數(shù)據(jù)實(shí)現(xiàn)聊天室的私聊；
• 多進(jìn)程（使用 redis 等緩存數(shù)據(jù)庫(kù)來實(shí)現(xiàn)資源的共享），可參考我以前的一篇文章： 初探PHP多進(jìn)程
• 消息記錄數(shù)據(jù)庫(kù)持久化（log 日志還是不方便分析）
• ...

總結(jié)

多讀些經(jīng)典書籍還是很有用的，有些東西真的是觸類旁通，APUE/UNP 還是要再多翻幾遍。此外互聯(lián)網(wǎng)技術(shù)日新月異，挑一些自己喜歡的學(xué)習(xí)一下，跟大家分享一下也是挺舒服的（雖然程序和博客加一塊用了至少10個(gè)小時(shí)...）。

參考：

websocket協(xié)議翻譯

刨根問底 HTTP 和 WebSocket 協(xié)議（下）

學(xué)習(xí)WebSocket協(xié)議—從頂層到底層的實(shí)現(xiàn)原理（修訂版）

嗯，持續(xù)更新。喜歡的可以點(diǎn)個(gè)推薦或關(guān)注，有錯(cuò)漏之處，請(qǐng)指正，謝謝。