PHP practice of building a simple chat room based on websocket_php example

The example in this article describes the practice of building a simple chat room in PHP based on websocket. Share it with everyone for your reference. The details are as follows:
1. Foreword

There is a simple chat room in the company's game. After learning about it, I realized that it was made by node+websocket. I thought about using PHP to make a simple chat room. So I collected various information, read documents, looked for examples, and wrote a simple chat room myself.

http connections are divided into short connections and long connections. Short connections can generally be implemented using ajax, and long connections are websockets. Short connections are relatively simple to implement, but consume too many resources. Websocket is efficient but has some issues with compatibility. websocket is a resource of html5

2. Front-end

Implementing websocket on the front end is very simple and straightforward

//连接websocket

var ws = new WebSocket("ws://127.0.0.1:8000");

//成功连接websoc的时候

ws.onopen = function(){}

//成功获取服务端输出的消息

ws.onmessage = function(e){}

//连接错误的时候
ws.onerror = function(){}

//向服务端发送数据

ws.send();

3.Backstage

The difficulty of websocket is mainly in the background

3.1websocket connection process
Websocket communication diagram This is a simple communication diagram between client and server. What PHP mainly does is to accept the encryption key and return it to complete the socket creation and handshake operation

The picture below is a detailed flow chart of websocket processing on the server side

3.2 Code Practice

The process done by the server is roughly:

1. Hang a socket process waiting for connection
2. Traverse the socket array after there is a socket connection
3. If there is no handshake, perform handshake operation. If there is a handshake, receive the data, parse it and write it into the buffer for output
   

The following is a sample code (I wrote a class, so the code is segmented according to functions). The bottom of the text gives the github address and some pitfalls I encountered
1. First, create the socket

//建立套接字
    public function createSocket($address,$port)
    {
      //创建一个套接字
      $socket= socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
      //设置套接字选项
      socket_set_option($socket, SOL_SOCKET, SO_REUSEADDR, 1);
      //绑定IP地址和端口
      socket_bind($socket,$address,$port);
      //监听套接字
      socket_listen($socket);
      return $socket;
    }

2. Put the socket into the array

public function __construct($address,$port)
    {
      //建立套接字
      $this->soc=$this->createSocket($address,$port);
      $this->socs=array($this->soc);

    }

3. The suspended process traverses the socket array, and the main operations are completed here

public function run(){
      //挂起进程
      while(true){
        $arr=$this->socs;
        $write=$except=NULL;
        //接收套接字数字 监听他们的状态
        socket_select($arr,$write,$except, NULL);
        //遍历套接字数组
        foreach($arr as $k=>$v){
          //如果是新建立的套接字返回一个有效的 套接字资源
          if($this->soc == $v){
            $client=socket_accept($this->soc);
            if($client <0){
              echo "socket_accept() failed";
            }else{
              // array_push($this->socs,$client);
              // unset($this[]);
              //将有效的套接字资源放到套接字数组
              $this->socs[]=$client;
            }
          }else{
            //从已连接的socket接收数据 返回的是从socket中接收的字节数
            $byte=socket_recv($v, $buff,20480, 0);
            //如果接收的字节是0
            if($byte<7)
              continue;
            //判断有没有握手没有握手则进行握手,如果握手了 则进行处理
            if(!$this->hand[(int)$client]){
              //进行握手操作
              $this->hands($client,$buff,$v);
            }else{
              //处理数据操作
              $mess=$this->decodeData($buff);
                //发送数据
              $this->send($mess,$v);
            }
          }
        }
      }
    }

4. Handshake. The process is to receive the websocket content, obtain the key from Sec-WebSocket-Key: and write it into the buffer through the encryption algorithm. The client will verify it (automatic verification does not require our processing)

public function hands($client,$buff,$v)
    {
      //提取websocket传的key并进行加密 （这是固定的握手机制获取Sec-WebSocket-Key:里面的key）
      $buf = substr($buff,strpos($buff,'Sec-WebSocket-Key:')+18);
      //去除换行空格字符
      $key = trim(substr($buf,0,strpos($buf,"\r\n")));
       //固定的加密算法
      $new_key = base64_encode(sha1($key."258EAFA5-E914-47DA-95CA-C5AB0DC85B11",true));
      $new_message = "HTTP/1.1 101 Switching Protocols\r\n";
      $new_message .= "Upgrade: websocket\r\n";
      $new_message .= "Sec-WebSocket-Version: 13\r\n";
      $new_message .= "Connection: Upgrade\r\n";
      $new_message .= "Sec-WebSocket-Accept: " . $new_key . "\r\n\r\n";
      //将套接字写入缓冲区
      socket_write($v,$new_message,strlen($new_message));
      // socket_write(socket,$upgrade.chr(0), strlen($upgrade.chr(0)));
      //标记此套接字握手成功
      $this->hand[(int)$client]=true;
    }

5. Parse the client data (I did not encrypt it here, you can encrypt it yourself if necessary)

//解析数据
    public function decodeData($buff)
    {
      //$buff 解析数据帧
      $mask = array(); 
      $data = ''; 
      $msg = unpack('H*',$buff); //用unpack函数从二进制将数据解码
      $head = substr($msg[1],0,2); 
      if (hexdec($head{1}) === 8) { 
        $data = false; 
      }else if (hexdec($head{1}) === 1){ 
        $mask[] = hexdec(substr($msg[1],4,2)); 
        $mask[] = hexdec(substr($msg[1],6,2)); 
        $mask[] = hexdec(substr($msg[1],8,2)); 
        $mask[] = hexdec(substr($msg[1],10,2)); 
          //遇到的问题 刚连接的时候就发送数据 显示 state connecting
        $s = 12; 
        $e = strlen($msg[1])-2; 
        $n = 0; 
        for ($i=$s; $i<= $e; $i+= 2) { 
          $data .= chr($mask[$n%4]^hexdec(substr($msg[1],$i,2))); 
          $n++; 
        }
        //发送数据到客户端
          //如果长度大于125 将数据分块
          $block=str_split($data,125);
          $mess=array(
            'mess'=>$block[0],
            );
        return $mess;          
      }

6. Write the socket to the buffer

//发送数据
    public function send($mess,$v)
    {
      //遍历套接字数组 成功握手的 进行数据群发
      foreach ($this->socs as $keys => $values) {
        //用系统分配的套接字资源id作为用户昵称
          $mess['name']="Tourist's socket:{$v}";
          $str=json_encode($mess);
          $writes ="\x81".chr(strlen($str)).$str;
          // ob_flush();
          // flush();
          // sleep(3);
          if($this->hand[(int)$values])
            socket_write($values,$writes,strlen($writes));
        }
    }

7. Operation method

github address git@github.com:rsaLive/websocket.git

①It is best to run server.php in the console

Go to the server.php script directory (you can first php -v to see if php is configured. If there is no Linux configuration, configure the path in bash windows)

php -f server.php

It will prompt if there is an error

②Access html files through the server

8. If you have stepped on the pitfalls, open the debugging work to easily check the errors

①server.php can print output in the suspended process. If there is a problem, you can add printing to the code to debug it

You can mark each judgment and check in the console which section the code is running in

But you need to re-run the script php server.php every time you modify the code

②If this error occurs, it may be

1. Send data when initializing the socket with the server (content cannot be sent during the first verification handshake with the server)

2. This situation will also occur if it has been verified but the client did not send it or the message sent is empty

So check the data of the connected socket

③Maybe the browser does not support it or the server does not open the socket. It is best to verify before starting

if (window.WebSocket){
  console.log("This browser supports WebSocket!");
} else {
  console.log("This browser does not support WebSocket.");
}

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope that everyone will support Script Home.