Community Learn Tools Library Leisure
search
English
Home > php教程 > php手册 > Practice of building a simple chat room with php+websocket

Practice of building a simple chat room with php+websocket

WBOY
Release： 2016-10-24 00:00:00
Original
1948 people have browsed it

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

　If you want to know more about the principle of websocket long connection, please see https://www.zhihu.com/question/20215561.

　This article mainly introduces the implementation steps of a simple websocket chat room. In-depth knowledge points of specific parts will be given links or trouble readers to collect information by themselves.

2. Front-end

Implementing websocket on the front end is very simple and straightforward

　 //Connect websocket

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

　 //When successfully connected to websoc

　ws.onopen = function(){}

　 //Successfully obtained the message output by the server

　ws.onmessage = function(e){}

//When there is a connection error
　ws.onerror = function(){}

//Send data to the server

　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 as follows:

　　①. Suspend a socket process waiting for connection

　②. After there is a socket connection, traverse the socket array

　　③. If there is no handshake, perform the handshake operation. If there is a handshake, the data will be parsed and written 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

<span style="color: #008000;">//</span><span style="color: #008000;">建立套接字</span>
        <span style="color: #0000ff;">public</span> <span style="color: #0000ff;">function</span> createSocket(<span style="color: #800080;">$address</span>,<span style="color: #800080;">$port</span><span style="color: #000000;">)
        {
            </span><span style="color: #008000;">//</span><span style="color: #008000;">创建一个套接字</span>
            <span style="color: #800080;">$socket</span>= socket_create(AF_INET, SOCK_STREAM,<span style="color: #000000;"> SOL_TCP);
            </span><span style="color: #008000;">//</span><span style="color: #008000;">设置套接字选项</span>
            socket_set_option(<span style="color: #800080;">$socket</span>, SOL_SOCKET, SO_REUSEADDR, 1<span style="color: #000000;">);
            </span><span style="color: #008000;">//</span><span style="color: #008000;">绑定IP地址和端口</span>
            socket_bind(<span style="color: #800080;">$socket</span>,<span style="color: #800080;">$address</span>,<span style="color: #800080;">$port</span><span style="color: #000000;">);
            </span><span style="color: #008000;">//</span><span style="color: #008000;">监听套接字</span>
            socket_listen(<span style="color: #800080;">$socket</span><span style="color: #000000;">);
            </span><span style="color: #0000ff;">return</span> <span style="color: #800080;">$socket</span><span style="color: #000000;">;
        }</span>
Copy after login

2. Put the socket into the array 

<span style="color: #0000ff;">public</span> <span style="color: #0000ff;">function</span>  __construct(<span style="color: #800080;">$address</span>,<span style="color: #800080;">$port</span><span style="color: #000000;">)
        {
            </span><span style="color: #008000;">//</span><span style="color: #008000;">建立套接字</span>
            <span style="color: #800080;">$this</span>->soc=<span style="color: #800080;">$this</span>->createSocket(<span style="color: #800080;">$address</span>,<span style="color: #800080;">$port</span><span style="color: #000000;">);
            </span><span style="color: #800080;">$this</span>->socs=<span style="color: #0000ff;">array</span>(<span style="color: #800080;">$this</span>-><span style="color: #000000;">soc);

        }</span>
Copy after login

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

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

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 us to handle it) 

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

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

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

6. Write the socket to the buffer

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

 

7、运行方法

github地址git@github.com:rsaLive/websocket.git

①最好在控制台运行server.php

转到server.php脚本目录(可以先php -v 看下有没有配置php如果没有Linux配置下bash windows 配置下path)

php -f server.php

如果有错误会提示

②通过服务器访问html文件

 

 8、踩过的坑，打开调试工作方便查看错误

①server.php 挂起的进程中可以打印输出的，如果出现问题可以在代码中加入打印来调试 

可以在各个判断里面做标记在控制台查看代码运行在哪个区间

不过每次修改完代码之后需要重新运行脚本 php server.php

②

如果出现这种错误可能是

　　1、在与服务器初始套接字的时候发送数据 （在第一次与服务器验证握手的时候不能发送内容）

　　2、如果已经验证过了但是客户端没有发送或者发送的消息为空也会出现这样的情况

　　　　所以要检验已连接的套接字的数据

③可能浏览器不支持或者服务端没有开启socket开始之前最好验证下

<span style="color: #000000;">if (window.WebSocket){
    console.log("This browser supports WebSocket!");
} else {
    console.log("This browser does not support WebSocket.");
}</span>
Copy after login

 

如有不正欢迎指出

 

Related labels：
php+websocket搭建简易聊天室实践
source：php.cn
Previous article：thinkphp paging class php general paging class v1.1 Next article：Method overloading (rewriting)/method coverage, magic function implementation
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2257
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2392
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
2005
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1892
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1958
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template