这两天花时间看了一下websocket,自己也跟着动手做了一个毕竟简单的实现 记录一下:
websocket分为 客户端 和 服务端 两部分
客户端代码
var ws = new WebSocket('ws://127.0.0.1:7777'); // 访问的是本地的服务器 function sendMsg() { let _file = document.querySelector('input[type=file]').files[0]; let text = document.getElementById('txtinput').value; if (ws.readyState == 1) { // 处理图片为base64格式 if (_file) { let reader = new FileReader(); reader.readAsDataURL(_file); // 转化为二进制流 reader.onload = () => { ws.send(reader.result); } } else { ws.send(text); } } } // 连接服务器 ws.onopen = function (e) { console.log('connect'); } // 接收服务器的消息 ws.onmessage = function(e) { if (e.data.indexOf('base64,') > 0) { let img = new Image(); img.src = e.data; document.getElementById('area').appendChild(img); } else { let text = document.createElement('div'); text.innerHTML = e.data; document.getElementById('area').appendChild(text); } } ws.onclose = e => { console.log('lost connect'); ws = 0; } ws.onerror = e => { console.log('error'); console.log(e); }
客户端第一次连接服务端的时候会有一个握手的步骤 客服端发送WebSocket-Key给服务端,服务端拿到之后 又加密返给客户端 双方都通过后 websocket连接建立成功
服务端代码(PHP实现)
class SocketController { public $master; public $sockets; private $len = 1024; public function __construct($ip, $port) { // 创建一个IPV4的套接字 $this->master = socket_create(AF_INET, SOCK_STREAM, SOL_TCP); socket_set_option($this->master, SOL_SOCKET, SO_REUSEADDR, 1); // 设置接收所有数据 // 绑定IP 端口 socket_bind($this->master, $ip, $port); //开启监听 socket_listen($this->master); // socket_set_nonblock($this->master); $this->sockets['master'] = $this->master; echo 'socket create' . PHP_EOL; } // 接收消息 public function run() { while (true) { $changes = $this->sockets; $write = $exception = [];
// 没处理异常的情况 关于第四个参数 null 表示等待客户端发消息或有新连接再往下走 会阻塞在这里 非null的情况没做尝试 socket_select($changes, $write, $exception, null); foreach ($changes as $k => $master) { // 说明有新的客户端进来 if ($master == $this->master) { $client = socket_accept($master); //获取客户端发送内容 $buffer = trim(socket_read($client,1024)); $this->hand($client, $buffer); // 握手 $key = uniqid(); echo 'new connect ' . $key . PHP_EOL; $this->sockets[$key] = $client; } else // 说明客户端发了信息过来 { $content = ''; $contentLength = 0; echo 'begin get content ' . $k . PHP_EOL; // 用do while 是因为socket_recv 会阻塞程序 消息接收完了也卡在这不往下走 do { $len = socket_recv($master, $subContent, $this->len, 0); $content .= $subContent; $contentLength += $len; }while($len == $this->len); if ($contentLength > 0) { // 把消息 给到其他连接 $this->sendMsg($content); } else { $this->unlinkSocket($k); // 关闭socket连接 } } } } } // 发送消息 public function sendMsg($content) { $fixedContent = self::encode($content); foreach ($this->sockets as $k => $socket) { if ($k == 'master') continue; socket_write($socket, $fixedContent, strlen($fixedContent)); } echo 'send msg' . PHP_EOL; } // 关闭套接字 public function unlinkSocket($connect) { echo 'lost connect' . $connect . PHP_EOL; @socket_shutdown($this->sockets[$connect]); socket_close($this->sockets[$connect]); unset($this->sockets[$connect]); } // 握手 public function hand($client, $buffer) { $buf = substr($buffer, strpos($buffer,'Sec-WebSocket-Key:') + 18); $key = trim(substr($buf, 0, strpos($buf, "\r\n"))); $newKey = base64_encode(sha1($key . "258EAFA5-E914-47DA-95CA-C5AB0DC85B11", true)); //按照协议组合信息进行返回 $newMessage = "HTTP/1.1 101 Switching Protocols\r\n"; $newMessage .= "Upgrade: websocket\r\n"; $newMessage .= "Sec-WebSocket-Version: 13\r\n"; $newMessage .= "Connection: Upgrade\r\n"; $newMessage .= "Sec-WebSocket-Accept: " . $newKey . "\r\n\r\n"; socket_write($client, $newMessage, strlen($newMessage)); } /** * https://www.cnblogs.com/zhangmingda/p/12678630.html 很好的解释了$masks $data为什么这样取值 * @param $buffer * @return string */ public function encode($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]; } // end // 这段的意思是 把数据分割成125个字节的长度大小 大于125个字节的 就分段返回 // $a = str_split($decoded, 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; // end // 这个就不分段了 $frame = array(); $frame[0] = '81'; $len = strlen($decoded); if ($len < 126) { $frame[1] = $len < 16 ? '0' . dechex($len) : dechex($len); } elseif ($len < 65025) { $s = dechex($len); $frame[1] = '7e' . str_repeat('0', 4 - strlen($s)) . $s; } else { $s=dechex($len); $frame[1]= '7f' . str_repeat('0',16 - strlen($s)) . $s; } $msg = ''; for ($i = 0; $i < $len; $i++) { $msg .= dechex(ord($decoded{$i})); } $frame[2] = $msg; $data = implode('', $frame); return pack("H*", $data); } } $sc = new SocketController('127.0.0.1', 7777); $sc->run();
刚写完服务端代码的时候并没有发送过来的数据做处理,以为是发送过来一个 ‘hello world’ 服务端拿到的就应该是一个明文的字符串 一眼就能看到懂那种,后来打印了之后才发现事情并没有这么简单,看了 https://www.cnblogs.com/zhangmingda/p/12678630.html 这个老哥的文章才知道数据在这个过程中是怎么传递的 牵扯到位运算及字符操作函数 对这方面也了解不深就不赘述了
上面已经基本上算是实现了聊天室的功能
每天都是不想努力的一天....