WebSocket是 HTML5 開始提供的一種在單個 TCP 連接配接上進行全雙工通訊的協定。
以前的推送技術使用 Ajax 輪詢，浏覽器需要不斷地向伺服器發送http請求來擷取最新的資料，浪費很多的帶寬等資源。
使用webSocket通訊，用戶端和服務端隻需要一次握手建立連接配接，就可以互相發送消息，進行資料傳輸，更實時地進行通訊。
一次握手建立WebSocket連接配接
浏覽器先向伺服器發送個url以ws://開頭的http的GET請求，響應狀态碼101表示Switching Protocols切換協定，
伺服器根據請求頭中Upgrade:websocket
把
用戶端的請求切換到對應的協定，即websocket協定。
響應頭消息中包含Upgrade:websocket，表示它切換到的協定，即websocket協定。
響應101，握手成功，http協定切換成websocket協定了，連接配接建立成功，浏覽器和伺服器可以随時主動發送消息給對方了，并且這個連接配接一直持續到用戶端或伺服器一方主動關閉連接配接。
為了加深了解，用websocket實作簡單的線上聊天，先畫個時序圖，直覺感受下流程。
網上有websocket線上測試工具，可以直接使用還是挺友善的，http://www.blue-zero.com/WebSocket/
以下是實作的例子，可供參考
SocketService.php
<?php
/**
* Created by cywu
* Date: 2019/10/18
* Time: 14:33
*/
class SocketService
{
private $address = \'0.0.0.0\';
private $port = 8080;
private $_sockets;
public function __construct($address = \'\', $port=\'\')
{
if(!empty($address)){
$this->address = $address;
}
if(!empty($port)) {
$this->port = $port;
}
}
public function service(){
//擷取tcp協定号碼。
$tcp = getprotobyname("tcp");
$sock = socket_create(AF_INET, SOCK_STREAM, $tcp);
socket_set_option($sock, SOL_SOCKET, SO_REUSEADDR, 1);
if($sock < 0)
{
throw new Exception("failed to create socket: ".socket_strerror($sock)."\n");
}
socket_bind($sock, $this->address, $this->port);
socket_listen($sock, $this->port);
echo "listen on $this->address $this->port ... \n";
$this->_sockets = $sock;
}
public function run(){
$this->service();
$clients[] = $this->_sockets;
while (true){
$changes = $clients;
$write = NULL;
$except = NULL;
socket_select($changes, $write, $except, NULL);
foreach ($changes as $key => $_sock){
if($this->_sockets == $_sock){ //判斷是不是新接入的socket
if(($newClient = socket_accept($_sock)) === false){
die(\'failed to accept socket: \'.socket_strerror($_sock)."\n");
}
$line = trim(socket_read($newClient, 1024));
$this->handshaking($newClient, $line);
//擷取client ip
socket_getpeername ($newClient, $ip);
$clients[$ip] = $newClient;
echo "Client ip:{$ip} \n";
echo "Client msg:{$line} \n";
} else {
socket_recv($_sock, $buffer, 2048, 0);
$msg = $this->message($buffer);
//在這裡寫你的業務代碼
echo "{$key} clinet msg:",$msg,"\n";
fwrite(STDOUT, \'Please input a argument:\');
$response = trim(fgets(STDIN));
$this->send($_sock, $response);
echo "{$key} response to Client:".$response,"\n";
}
}
}
}
/**
* 處理握手
* @param $newClient socket
* @return int 接收到的資訊
*/
public function handshaking($newClient, $line){
$headers = array();
$lines = preg_split("/\r\n/", $line);
foreach($lines as $line)
{
$line = chop($line);
if(preg_match(\'/\A(\S+): (.*)\z/\', $line, $matches))
{
$headers[$matches[1]] = $matches[2];
}
}
$secKey = $headers[\'Sec-WebSocket-Key\'];
$secAccept = base64_encode(pack(\'H*\', sha1($secKey . \'258EAFA5-E914-47DA-95CA-C5AB0DC85B11\')));
$upgrade = "HTTP/1.1 101 Web Socket Protocol Handshake\r\n" .
"Upgrade: websocket\r\n" .
"Connection: Upgrade\r\n" .
"WebSocket-Origin: $this->address\r\n" .
"WebSocket-Location: ws://$this->address:$this->port/websocket/websocket\r\n".
"Sec-WebSocket-Accept:$secAccept\r\n\r\n";
return socket_write($newClient, $upgrade, strlen($upgrade));
}
/**
* 解析接收資料
* @param $buffer
* @return null|string
*/
public function message($buffer){
$len = $masks = $data = $decoded = null;
$len = ord($buffer[1]) & 127;
if ($len === 126) {
$masks = substr($buffer, 4, 4);
$data = substr($buffer, 8);
} else if ($len === 127) {
$masks = substr($buffer, 10, 4);
$data = substr($buffer, 14);
} else {
$masks = substr($buffer, 2, 4);
$data = substr($buffer, 6);
}
for ($index = 0; $index < strlen($data); $index++) {
$decoded .= $data[$index] ^ $masks[$index % 4];
}
return $decoded;
}
/**
* 發送資料
* @param $newClinet 新接入的socket
* @param $msg 要發送的資料
* @return int|string
*/
public function send($newClinet, $msg){
$msg = $this->frame($msg);
socket_write($newClinet, $msg, strlen($msg));
}
public function frame($s) {
$a = str_split($s, 125);
if (count($a) == 1) {
return "\x81" . chr(strlen($a[0])) . $a[0];
}
$ns = "";
foreach ($a as $o) {
$ns .= "\x81" . chr(strlen($o)) . $o;
}
return $ns;
}
/**
* 關閉socket
*/
public function close(){
return socket_close($this->_sockets);
}
}
$sock = new SocketService();
$sock->run(); 前端頁面：web.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">
<title>websocket</title>
</head>
<body>
<input id="text" value="">
<input type="submit" value="send" onclick="start()">
<input type="submit" value="close" onclick="close()">
<div id="msg"></div>
<script>
/**
0：未連接配接
1：連接配接成功，可通訊
2：正在關閉
3：連接配接已關閉或無法打開
*/
//建立一個webSocket 執行個體
var webSocket = new WebSocket("ws://192.168.31.152:8083");
webSocket.onerror = function (event){
onError(event);
};
// 打開websocket
webSocket.onopen = function (event){
onOpen(event);
};
//監聽消息
webSocket.onmessage = function (event){
onMessage(event);
};
webSocket.onclose = function (event){
onClose(event);
}
//關閉監聽websocket
function onError(event){
document.getElementById("msg").innerHTML = "<p>close</p>";
console.log("error"+event.data);
};
function onOpen(event){
console.log("open:"+sockState());
document.getElementById("msg").innerHTML = "<p>Connect to Service</p>";
};
function onMessage(event){
console.log("onMessage");
document.getElementById("msg").innerHTML += "<p>response:"+event.data+"</p>"
};
function onClose(event){
document.getElementById("msg").innerHTML = "<p>close</p>";
console.log("close:"+sockState());
webSocket.close();
}
function sockState(){
var status = [\'未連接配接\',\'連接配接成功，可通訊\',\'正在關閉\',\'連接配接已關閉或無法打開\'];
return status[webSocket.readyState];
}
function start(event){
console.log(webSocket);
var msg = document.getElementById(\'text\').value;
document.getElementById(\'text\').value = \'\';
console.log("send:"+sockState());
console.log("msg="+msg);
webSocket.send("msg="+msg);
document.getElementById("msg").innerHTML += "<p>request"+msg+"</p>"
};
function close(event){
webSocket.close();
}
</script>
</body>
</html>
以上是文章全部内容，有需要學習與經驗交流的友人請加入Swoole交流群學習與交流的咱們一起學習，有問題一起交流，一起進步！前提是你是學技術的。感謝閱讀！
點此加入該群