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("/rn/", $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 Handshakern" . "Upgrade: websocketrn" . "Connection: Upgradern" . "WebSocket-Origin: $this->addressrn" . "WebSocket-Location: ws://$this->address:$this->port/websocket/websocketrn". "Sec-WebSocket-Accept:$secAcceptrnrn"; 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>