php自學(xué)中心 2019-11-08 10:25:30

文章來自：laravel學(xué)院WebSocket 概述
在此之前，有必要對 WebSocket 的原理做簡單的說明，WebSocket 復(fù)用了 HTTP 協(xié)議來實(shí)現(xiàn)握手，然后通過請求報(bào)文中的 Upgrade 字段將 HTTP 協(xié)議升級到 WebSocket 協(xié)議來建立 WebSocket 通信連接，一旦 WebSocket 連接建立之后，就可以在這個(gè)長連接上通過 WebSocket 數(shù)據(jù)幀進(jìn)行雙向通信，客戶端和服務(wù)端可以在任何時(shí)候向?qū)Ψ桨l(fā)送報(bào)文，而不是 HTTP 協(xié)議那種服務(wù)端只有在客戶端發(fā)起請求后才能響應(yīng)，從而解決了在 Web 頁面實(shí)時(shí)顯示最新資源的問題。
與 HTTP 類似，WebSocket 協(xié)議對應(yīng)的 scheme 是 ws，如果是加密的 WebSocket 對應(yīng)的 scheme 是 wss。
在這篇教程中，我們將在服務(wù)端基于 Swoole 實(shí)現(xiàn)簡單的 WebSocket 服務(wù)器，然后在客戶端基于 JavaScript 實(shí)現(xiàn) WebSocket 客戶端。WebSocket 服務(wù)器
PHP 異步網(wǎng)絡(luò)通信引擎 Swoole 內(nèi)置了對 WebSocket 的支持，通過幾行 PHP 代碼就可以寫出一個(gè)異步非阻塞多進(jìn)程的 WebSocket 服務(wù)器：
on('open', function (SwooleWebSocketServer $server, $request) {
echo "server: handshake success with fd{$request->fd}n";
});
// 收到消息時(shí)觸發(fā)推送
$server->on('message', function (SwooleWebSocketServer $server, $frame) {
echo "receive from {$frame->fd}:{$frame->data},opcode:{$frame->opcode},fin:{$frame->finish}n";
$server->push($frame->fd, "this is server");
});
// 關(guān)閉 WebSocket 連接時(shí)觸發(fā)
$server->on('close', function ($ser, $fd) {
echo "client {$fd} closedn";
});
// 啟動(dòng) WebSocket 服務(wù)器
$server->start();
編寫完成后，將這段 PHP 代碼保存到本地 websocket_server.php 文件。WebSocket 客戶端
在客戶端，可以通過 JavaScript 調(diào)用瀏覽器內(nèi)置的 WebSocket API 實(shí)現(xiàn) WebSocket 客戶端，實(shí)現(xiàn)代碼和服務(wù)端差不多，無論服務(wù)端還是客戶端 WebSocket 都是通過事件驅(qū)動(dòng)的，我們在一個(gè) HTML 文檔中引入相應(yīng)的 JavaScript 代碼：
Chat Client
將這個(gè) HTML 文檔命名為 websocket_client.html。
WebSocket 通信演示
接下來，我們在命令行啟動(dòng) WebSocket 服務(wù)器：
php websocket.php
然后在瀏覽器中訪問 websocket_client.html，首先會(huì)提示我們輸入昵稱：

輸入之后點(diǎn)擊確定，JavaScript 代碼會(huì)繼續(xù)往下執(zhí)行，讓輸入框獲取焦點(diǎn)，然后初始化 WebSocket 客戶端并連接到服務(wù)器，這個(gè)時(shí)候通過開發(fā)者工具可以看到 Console 標(biāo)簽頁已經(jīng)輸出了連接已建立日志：

在 Network 里面也可以看到 WebSocket 握手請求和響應(yīng)：

這個(gè)時(shí)候我們在輸入框中輸入「你好，WebSocket！」并回車，即可觸發(fā)客戶端發(fā)送該數(shù)據(jù)到服務(wù)器，服務(wù)器接收到消息后會(huì)將其顯示出來：

同時(shí)將「This is server」消息推送給客戶端，客戶端通過 onmessage 回調(diào)函數(shù)將獲取到的數(shù)據(jù)顯示出來。在開發(fā)者工具的 Network->WS 標(biāo)簽頁可以查看 WebSocket 通信細(xì)節(jié)：

看起來，這個(gè)過程還是客戶端觸發(fā)服務(wù)器執(zhí)行推送操作，但實(shí)際上，在建立連接并獲取到這個(gè)客戶端的唯一標(biāo)識后，后續(xù)服務(wù)端資源有更新的情況下，仍然可以通過這個(gè)標(biāo)識主動(dòng)將更新推送給客戶端，而不需要客戶端發(fā)起拉取請求。WebSocket 服務(wù)器和客戶端在實(shí)際項(xiàng)目中的實(shí)現(xiàn)可能會(huì)更加復(fù)雜，但是基本原理是一致的。

總結(jié)

以上是生活随笔為你收集整理的websocket 更新点位 浏览器卡顿_我们来看看Swoole是如何实现WebSocket服务器及客户端的...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。