목차
特点
PHP实现websocket
实现web聊天室
实现聊天室
这是一个php socket实现的web聊天室
백엔드 개발 PHP 튜토리얼 PHP+Socket 시리즈는 웹소켓 채팅방을 구현합니다.

PHP+Socket 시리즈는 웹소켓 채팅방을 구현합니다.

Feb 02, 2023 pm 04:39 PM
php websocket socket

이 글에서는 PHP+소켓에 대한 관련 지식을 제공합니다. 주로 PHP 네이티브 소켓을 사용하여 간단한 웹 채팅방을 구현하는 방법을 소개합니다. 관심 있는 친구들은 아래를 살펴보시면 모두에게 도움이 되길 바랍니다. OPhp 네이티브 소켓은 WebSocket 채팅방을 구현합니다.

머리말

이 문서에서는 간단한 웹 채팅방을 구현하기 위해 PHP 네이티브 소켓을 사용하는 방법을 구현했으며 최종 코드는 문서 하단에 있습니다.

이 글이 이 글 시리즈의 마지막 글이 되어야 할 텐데, 이 글을 쓸 때는 아주 간단한 일이라고 생각했는데, 이 글 몇 편을 쓰고 나니 코드를 거의 다 읽어보게 되었습니다. Workerman, 그러니 너무 자만하지 마십시오. 당신이 정말로 무언가를 이해하고 있음을 증명하기 위해 직접 시도해야 합니다. 가급적이면 직접 작성해 보세요.

websocket 소개

webSocket 프로토콜은 2008년에 시작하여 2011년에 국제 프로토콜이 되었습니다. 표준

RFC6455

은 통신 표준을 정의하며 이제 모든 브라우저에서 지원됩니다. webSocket은 HTML5가 제공하기 시작한 단일 TCP 연결에서의 전이중 통신을 위한 프로토콜입니다. 서버는 클라이언트에 메시지를 적극적으로 푸시할 수 있고, 클라이언트도 서버에 적극적으로 메시지를 보낼 수 있습니다. webSocket은 통신 프로토콜의 사양을 규정합니다. 핸드셰이크 메커니즘을 통해 클라이언트(브라우저)와 서버(웹서버) 간에 TCP와 같은 연결이 설정될 수 있으므로 CS 통신이 용이해집니다.

웹소켓이 필요한 이유

HTTP 프로토콜은 무상태, 비연결, 단방향 애플리케이션 계층 프로토콜입니다. 요청=>응답 모델을 채택합니다. 통신 요청은 클라이언트에 의해서만 시작될 수 있으며 서버는 요청에 응답합니다. 이 통신 모델에는 서버가 사전에 전송할 수 없다는 단점이 있습니다. 클라이언트에 메시지를 보냅니다. 클라이언트가 메시지를 시작합니다. 기존 HTTP 요청의 동시성 기능은 동시에 서버에 액세스하기 위해 여러 TCP 연결을 시작하여 달성됩니다. Websocket을 사용하면 A 요청이 전송되고 A 응답이 발생한 후 ws 연결에서 동시에 여러 요청을 발행할 수 있습니다. 도착하지 않았습니다. B 요청을 계속 발행할 수 있습니다. TCP의 느린 시작 기능과 연결 자체의 핸드셰이크 손실로 인해 웹소켓 프로토콜의 이 기능은 효율성을 크게 향상시켰습니다.

http 대 웹소켓 비교请求 => 响应 模型,通信请求仅能由客户端发起,服务端对请求做出应答处理,这种通信模型有一个弊端:无法实现服务端主动向客户端发起消息。传统的 HTTP 请求,其并发能力都是依赖同时发起多个 TCP 连接访问服务器实现的而 websocket 则允许我们在一条 ws 连接上同时并发多个请求,即在 A 请求发出后 A 响应还未到达,就可以继续发出 B 请求。由于 TCP 的慢启动特性,以及连接本身的握手损耗,都使得 websocket 协议的这一特性有很大的效率提升。

PHP+Socket 시리즈는 웹소켓 채팅방을 구현합니다.

特点

  • 建立在 TCP 协议之上,服务端的实现相对比较容易

  • 与 HTTP 协议有良好的兼容性,默认端口也是 80 和 443,并且握手阶段采用 HTTP 协议,因此握手时不容易被屏蔽,能通过各种 HTTP 代理服务器。

  • 数据格式比较轻量,性能开销小,通信高效。

  • 可以发送文本,也可以发送二进制数据。

  • 没有同源限制,客户端可以与任意服务器进行通信。

  • 协议标识符是 ws(如果加密则为 wss),服务地址就是 URL。

PHP实现websocket

客户端与服务端握手

websocket 协议在连接前需要握手[^2],通常握手方式有以下几种方式

  • 基于 flash 的握手协议(不建议)

  • 基于 md5 加密方式的握手协议

    较早的握手方法,有两个 key,使用 md5 加密

  • 基于 sha1 加密方式的握手协议

    当前主要的握手协议,本文将以此协议为主

    • 获取客户端上报的 Sec-WebSocket-key

    • 拼接 key + 258EAFA5-E914-47DA-95CA-C5AB0DC85B11

    • 对字符串做 SHA1 计算,再把得到的结果通过 base64

      기능
      • 는 TCP 프로토콜을 기반으로 구축되었으며 서버 구현이 비교적 쉽습니다

    • HTTP와의 호환성이 좋습니다. 프로토콜은 기본적으로 포트도 80과 443이며 핸드셰이크 단계에서 HTTP 프로토콜을 사용하므로 핸드셰이크 중에 쉽게 차단되지 않고 다양한 HTTP 프록시 서버를 통과할 수 있습니다.

  • 데이터 형식은 비교적 가볍고 성능 오버헤드가 낮으며 통신이 효율적입니다.

  • 텍스트 또는 바이너리 데이터를 보낼 수 있습니다.

  • 동일한 출처 제한이 없으며 클라이언트는 모든 서버와 통신할 수 있습니다.
  • 프로토콜 식별자는 ws(또는 암호화된 경우 wss)이고 서비스 주소는 URL입니다.

    PHP는 websocket을 구현합니다클라이언트와 서버 핸드셰이크

    🎜웹소켓 프로토콜은 연결하기 전에 핸드셰이크가 필요합니다[^2]. 일반적으로 핸드셰이크 방법에는 다음과 같은 방법이 있습니다🎜
    • 🎜플래시 핸드셰이크 기반 프로토콜 (권장하지 않음)🎜🎜
    • 🎜md5 암호화 방식을 기반으로 한 핸드셰이크 프로토콜🎜🎜초기 핸드셰이크 방식, 두 개의 키, md5 암호화 사용🎜🎜
    • 🎜sha1 암호화 방식을 기반으로 한 핸드셰이크 프로토콜🎜🎜 현재 메인 핸드셰이크 이 문서에서는 이 프로토콜에 중점을 둘 것입니다🎜
      • 🎜클라이언트가 보고한 Sec-WebSocket-key 가져오기 🎜🎜🎜key + 258EAFA5-E914-47DA-95CA-C5AB0DC85B11🎜🎜
      • 🎜SHA1를 문자열 계산에 연결한 다음 base64를 통해 결과를 암호화하고 최종적으로 클라이언트에 반환합니다. 🎜🎜🎜🎜🎜🎜클라이언트 요청 정보는 다음과 같습니다. 🎜
        GET /chat HTTP/1.1Host: server.example.com
        Upgrade: websocket
        Connection: Upgrade
        Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==Origin: http://example.com
        Sec-WebSocket-Protocol: chat, superchat
        Sec-WebSocket-Version: 13
        로그인 후 복사
        🎜클라이언트는 다음 데이터를 반환해야 합니다. 🎜
        HTTP/1.1 101 Switching Protocols
        Upgrade: websocket
        Sec-WebSocket-Version: 13Connection: Upgrade
        Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
        로그인 후 복사
        🎜us 다음 프로토콜에 따라 PHP를 통해 구현됩니다. 🎜
        <?php
        
        $socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
        socket_set_option($socket, SOL_SOCKET, SO_REUSEADDR, true);
        socket_bind($socket, 0, 8888);
        socket_listen($socket);
        
        while (true) {
            $conn_sock = socket_accept($socket);
            $request = socket_read($conn_sock, 102400);
        
            $new_key = getShaKey($request);
        
            $response = "HTTP/1.1 101 Switching Protocols\r\n";
            $response .= "Upgrade: websocket\r\n";
            $response .= "Sec-WebSocket-Version: 13\r\n";
            $response .= "Connection: Upgrade\r\n";
            $response .= "Sec-WebSocket-Accept: {$new_key}\r\n\r\n";
        
            socket_write($conn_sock, $response);
        }
        
        function getShaKey($request)
        {
            // 获取 Sec-WebSocket-key
            preg_match("/Sec-WebSocket-Key: (.*)\r\n/", $request, $match);
        
            // 拼接 key + 258EAFA5-E914-47DA-95CA-C5AB0DC85B11
            $new_key = trim($match[1]) . &#39;258EAFA5-E914-47DA-95CA-C5AB0DC85B11&#39;;
        
            // 对字符串做 `SHA1` 计算,再把得到的结果通过 `base64` 加密
            return base64_encode(sha1($new_key, true));
        }
        로그인 후 복사
        🎜관련 구문 설명은 🎜이전 기사🎜에서 찾을 수 있으며, 이 기사에서는 자세히 소개하지 않습니다. 🎜🎜프런트 엔드 테스트를 사용하여 브라우저 콘솔(콘솔)을 열고 다음 내용을 입력합니다. 반환된 websocket 객체의 ReadyState는 1이며 이는 핸드셰이크가 성공했음을 의미합니다. 자세한 내용은 🎜루키 튜토리얼🎜을 참고해주세요: 🎜
        console.log(new WebSocket(&#39;ws://192.162.2.166:8888&#39;));
        // 运行后返回:
        WebSocket {
            binaryType: "blob"
            bufferedAmount: 0
            extensions: ""
            onclose: null
            onerror: null
            onmessage: null
            onopen: null
            protocol: ""
            readyState: 1
            url: "ws://192.162.2.166:8888/"}
        로그인 후 복사
        🎜🎜🎜🎜데이터 보내기 및 받기🎜🎜

        使用 websocket 协议传输协议需要遵循特定的格式规范,详情请参考 datatracker.ietf.org/doc/html/rfc6...

        PHP+Socket 시리즈는 웹소켓 채팅방을 구현합니다.

        为了方便,这里直接贴出加解密代码,以下代码借鉴与 workermansrc/Protocols/Websocket.php 文件:

        // 解码客户端发送的消息
        function decode($buffer)
        {
            $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);
                }
            }
            $dataLength = \strlen($data);
            $masks = \str_repeat($masks, \floor($dataLength / 4)) . \substr($masks, 0, $dataLength % 4);
            return $data ^ $masks;
        }
        
        // 编码发送给客户端的消息
        function encode($buffer)
        {
            if (!is_scalar($buffer)) {
                throw new \Exception("You can&#39;t send(" . \gettype($buffer) . ") to client, you need to convert it to a string. ");
            }
            $len = \strlen($buffer);
        
            $first_byte = "\x81";
        
            if ($len <= 125) {
                $encode_buffer = $first_byte . \chr($len) . $buffer;
            } else {
                if ($len <= 65535) {
                    $encode_buffer = $first_byte . \chr(126) . \pack("n", $len) . $buffer;
                } else {
                    $encode_buffer = $first_byte . \chr(127) . \pack("xxxxN", $len) . $buffer;
                }
            }
        
            return $encode_buffer;
        }
        로그인 후 복사

        我们修改刚才 客户端与服务端握手 阶段的代码,修改后全代码全文如下,该段代码实现了将客户端发送的消息转为大写后返回给客户端(当然只是为了演示):

        <?php
        
        $socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
        socket_set_option($socket, SOL_SOCKET, SO_REUSEADDR, true);
        socket_bind($socket, 0, 8888);
        socket_listen($socket);
        
        while (true) {
            $conn_sock = socket_accept($socket);
            $request = socket_read($conn_sock, 102400);
        
            $new_key = getShaKey($request);
        
            $response = "HTTP/1.1 101 Switching Protocols\r\n";
            $response .= "Upgrade: websocket\r\n";
            $response .= "Sec-WebSocket-Version: 13\r\n";
            $response .= "Connection: Upgrade\r\n";
            $response .= "Sec-WebSocket-Accept: {$new_key}\r\n\r\n";
        
            // 发送握手数据
            socket_write($conn_sock, $response);
        
            // 新增内容,获取客户端发送的消息并转为大写还给客户端
            $msg = socket_read($conn_sock, 102400);
            socket_write($conn_sock, encode(strtoupper(decode($msg))));
        }
        
        function getShaKey($request)
        {
            // 获取 Sec-WebSocket-key
            preg_match("/Sec-WebSocket-Key: (.*)\r\n/", $request, $match);
        
            // 拼接 key + 258EAFA5-E914-47DA-95CA-C5AB0DC85B11
            $new_key = trim($match[1]) . &#39;258EAFA5-E914-47DA-95CA-C5AB0DC85B11&#39;;
        
            // 对字符串做 `SHA1` 计算,再把得到的结果通过 `base64` 加密
            return base64_encode(sha1($new_key, true));
        }
        
        function decode($buffer)
        {
            $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);
                }
            }
            $dataLength = \strlen($data);
            $masks = \str_repeat($masks, \floor($dataLength / 4)) . \substr($masks, 0, $dataLength % 4);
            return $data ^ $masks;
        }
        
        function encode($buffer)
        {
            if (!is_scalar($buffer)) {
                throw new \Exception("You can&#39;t send(" . \gettype($buffer) . ") to client, you need to convert it to a string. ");
            }
            $len = \strlen($buffer);
        
            $first_byte = "\x81";
        
            if ($len <= 125) {
                $encode_buffer = $first_byte . \chr($len) . $buffer;
            } else {
                if ($len <= 65535) {
                    $encode_buffer = $first_byte . \chr(126) . \pack("n", $len) . $buffer;
                } else {
                    $encode_buffer = $first_byte . \chr(127) . \pack("xxxxN", $len) . $buffer;
                }
            }
        
            return $encode_buffer;
        }
        로그인 후 복사

        使用 在线测试工具 进行测试,可以看到消息已经可以正常发送接收,接下来的文章将继续优化代码,实现简易聊天室,敬请关注:

        PHP+Socket 시리즈는 웹소켓 채팅방을 구현합니다.

        实现web聊天室

        我们紧接着上文的代码继续优化,以实现简易的web聊天室

        多路复用

        其实就是加一下 socket_select() 函数 PHP+Socket 시리즈는 웹소켓 채팅방을 구현합니다. ,本文就不写原理与语法了,详情可参考 之前的文章,以下代码修改自前文 PHP+Socket 시리즈는 웹소켓 채팅방을 구현합니다.

        ...
        
        socket_listen($socket);
        
        +$sockets[] = $socket;
        +$user = [];
        while (true) {
        +   $tmp_sockets = $sockets;
        +   socket_select($tmp_sockets, $write, $except, null);
        
        +   foreach ($tmp_sockets as $sock) {
        +       if ($sock == $socket) {
        +           $sockets[] = socket_accept($socket);
        +           $user[] = [&#39;socket&#39; => $socket, &#39;handshake&#39; => false];
        +       } else {
        +           $curr_user = $user[array_search($sock, $user)];
        +           if ($curr_user[&#39;handshake&#39;]) { // 已握手
        +               $msg = socket_read($sock, 102400);
        +               echo &#39;客户端发来消息&#39; . decode($msg);
        +               socket_write($sock, encode(&#39;这是来自服务端的消息&#39;));
        +           } else {
        +               // 握手
        +           }
        +       }
        +   }
        
        -   $conn_sock = socket_accept($socket);
        -   $request = socket_read($conn_sock, 102400);
        
        ...
        로그인 후 복사

        实现聊天室

        最终成果演示

        PHP+Socket 시리즈는 웹소켓 채팅방을 구현합니다.

        我们将上述代码改造成类,并在类变量储存用户信息,添加消息处理等逻辑,最后贴出代码,建议保存下来自己尝试一下,也许会有全新的认知,后端代码:

        <?php
        
        new WebSocket();
        
        class Websocket
        {
            /**
             * @var resource
             */
            protected $socket;
        
            /**
             * @var array 用户列表
             */
            protected $user = [];
        
            /**
             * @var array 存放所有 socket 资源
             */
            protected $socket_list = [];
        
            public function __construct()
            {
                $this->socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
                socket_set_option($this->socket, SOL_SOCKET, SO_REUSEADDR, true);
                socket_bind($this->socket, 0, 8888);
                socket_listen($this->socket);
        
                // 将 socket 资源放入 socket_list
                $this->socket_list[] = $this->socket;
        
                while (true) {
                    $tmp_sockets = $this->socket_list;
                    socket_select($tmp_sockets, $write, $except, null);
        
                    foreach ($tmp_sockets as $sock) {
                        if ($sock == $this->socket) {
                            $conn_sock = socket_accept($sock);
                            $this->socket_list[] = $conn_sock;
                            $this->user[] = [&#39;socket&#39; => $conn_sock, &#39;handshake&#39; => false, &#39;name&#39; => &#39;无名氏&#39;];
                        } else {
                            $request = socket_read($sock, 102400);
                            $k = $this->getUserIndex($sock);
        
                            if (!$request) {
                                continue;
                            }
        
                            // 用户端断开连接
                            if ((\ord($request[0]) & 0xf) == 0x8) {
                                $this->close($k);
                                continue;
                            }
        
                            if (!$this->user[$k][&#39;handshake&#39;]) {
                                // 握手
                                $this->handshake($k, $request);
                            } else {
                                // 已握手
                                $this->send($k, $request);
                            }
                        }
                    }
                }
            }
        
            /**
             * 关闭连接
             *
             * @param $k
             */
            protected function close($k)
            {
                $u_name = $this->user[$k][&#39;name&#39;] ?? &#39;无名氏&#39;;
                socket_close($this->user[$k][&#39;socket&#39;]);
                $socket_key = array_search($this->user[$k][&#39;socket&#39;], $this->socket_list);
                unset($this->socket_list[$socket_key]);
                unset($this->user[$k]);
        
                $user = [];
                foreach ($this->user as $v) {
                    $user[] = $v[&#39;name&#39;];
                }
                $res = [
                    &#39;type&#39; => &#39;close&#39;,
                    &#39;users&#39; => $user,
                    &#39;msg&#39; => $u_name . &#39;已退出&#39;,
                    &#39;time&#39; => date(&#39;Y-m-d H:i:s&#39;)
                ];
                $this->sendAllUser($res);
            }
        
            /**
             * 获取用户索引
             *
             * @param $socket
             * @return int|string
             */
            protected function getUserIndex($socket)
            {
                foreach ($this->user as $k => $v) {
                    if ($v[&#39;socket&#39;] == $socket) {
                        return $k;
                    }
                }
            }
        
            /**
             * 握手
             * @param $k
             * @param $request
             */
            protected function handshake($k, $request)
            {
                preg_match("/Sec-WebSocket-Key: (.*)\r\n/", $request, $match);
                $key = base64_encode(sha1($match[1] . &#39;258EAFA5-E914-47DA-95CA-C5AB0DC85B11&#39;, true));
        
                $response = "HTTP/1.1 101 Switching Protocols\r\n";
                $response .= "Upgrade: websocket\r\n";
                $response .= "Connection: Upgrade\r\n";
                $response .= "Sec-WebSocket-Accept: {$key}\r\n\r\n";
                socket_write($this->user[$k][&#39;socket&#39;], $response);
                $this->user[$k][&#39;handshake&#39;] = true;
            }
        
            /**
             * 接收并处理消息
             *
             * @param $k
             * @param $msg
             */
            public function send($k, $msg)
            {
                $msg = $this->decode($msg);
                $msg = json_decode($msg, true);
        
                if (!isset($msg[&#39;type&#39;])) {
                    return;
                }
        
                switch ($msg[&#39;type&#39;]) {
                    case &#39;login&#39;: // 登录
                        $this->user[$k][&#39;name&#39;] = $msg[&#39;name&#39;] ?? &#39;无名氏&#39;;
                        $users = [];
                        foreach ($this->user as $v) {
                            $users[] = $v[&#39;name&#39;];
                        }
                        $res = [
                            &#39;type&#39; => &#39;login&#39;,
                            &#39;name&#39; => $this->user[$k][&#39;name&#39;],
                            &#39;msg&#39; => $this->user[$k][&#39;name&#39;] . &#39;: login success&#39;,
                            &#39;users&#39; => $users,
                        ];
                        $this->sendAllUser($res);
                        break;
                    case &#39;message&#39;: // 接收并发送消息
                        $res = [
                            &#39;type&#39; => &#39;message&#39;,
                            &#39;name&#39; => $this->user[$k][&#39;name&#39;] ?? &#39;无名氏&#39;,
                            &#39;msg&#39; => $msg[&#39;msg&#39;],
                            &#39;time&#39; => date(&#39;H:i:s&#39;),
                        ];
                        $this->sendAllUser($res);
                        break;
                }
            }
        
            /**
             * 发送给所有人
             *
             */
            protected function sendAllUser($msg)
            {
                if (is_array($msg)) {
                    $msg = json_encode($msg);
                }
        
                $msg = $this->encode($msg);
        
                foreach ($this->user as $k => $v) {
                    socket_write($v[&#39;socket&#39;], $msg, strlen($msg));
                }
            }
        
            /**
             * 解码
             *
             * @param $buffer
             * @return string
             */
            protected function decode($buffer)
            {
                $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);
                    }
                }
                $dataLength = \strlen($data);
                $masks = \str_repeat($masks, \floor($dataLength / 4)) . \substr($masks, 0, $dataLength % 4);
                return $data ^ $masks;
            }
        
            protected function encode($buffer)
            {
                if (!is_scalar($buffer)) {
                    throw new \Exception("You can&#39;t send(" . \gettype($buffer) . ") to client, you need to convert it to a string. ");
                }
                $len = \strlen($buffer);
        
                $first_byte = "\x81";
        
                if ($len <= 125) {
                    $encode_buffer = $first_byte . \chr($len) . $buffer;
                } else {
                    if ($len <= 65535) {
                        $encode_buffer = $first_byte . \chr(126) . \pack("n", $len) . $buffer;
                    } else {
                        $encode_buffer = $first_byte . \chr(127) . \pack("xxxxN", $len) . $buffer;
                    }
                }
        
                return $encode_buffer;
            }
        }
        로그인 후 복사

        前端代码如下(前端内容不在本文讨论范围之内,具体可参考 菜鸟教程):

        <!doctype html>
        <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport"
                  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>
        </head>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            h3 {
                display: flex;
                justify-content: center;
                margin: 30px auto;
            }
            .but-box {
                border-radius: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 10px;
            }
            #box {
                display: flex;
                margin: 5px auto;
                border-radius: 5px;
                border: 1px #ccc solid;
                height: 400px;
                width: 700px;
                overflow-y: auto;
                overflow-x: hidden;
                position: relative;
            }
            #msg-box {
                width: 480px;
                margin-right: 111px;
                height: 100%;
                overflow-y: auto;
                overflow-x: hidden;
            }
            #user-box {
                width: 110px;
                overflow-y: auto;
                overflow-x: hidden;
                float: left;
                border-left: 1px #ccc solid;
                height: 100%;
                background-color: #F1F1F1;
            }
            button {
                float: right;
                width: 80px;
                height: 35px;
                font-size: 18px;
            }
            input {
                width: 100%;
                height: 30px;
                padding: 2px;
                line-height: 20px;
                outline: none;
                border: solid 1px #CCC;
            }
            .but-box p {
                margin-right: 160px;
            }
        </style>
        <body>
        
        <h3 id="这是一个php-nbsp-socket实现的web聊天室">这是一个php socket实现的web聊天室</h3>
        
        <div id="box">
            <div id="msg-box"></div>
            <div id="user-box"></div>
        </div>
        
        <div>
        
            <p><textarea cols="60" rows="3" style="resize:none;pedding: 10px"    id="content"> </textarea></p>
            <button id="send">发送</button>
        </div>
        <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
        <script>
            let ws = new WebSocket(&#39;ws://124.222.85.67:8888&#39;);
        
            ws.onopen = function (event) {
                console.log(&#39;连接成功&#39;);
        
                var name = prompt(&#39;请输入用户名:&#39;);
        
                ws.send(JSON.stringify({
                    type: &#39;login&#39;,
                    name: name
                }));
        
                if (!name) {
                    alert(&#39;好你个坏蛋,竟然没有输入用户名&#39;);
                }
            };
            ws.onmessage = function (event) {
                let data = JSON.parse(event.data);
                console.log(data);
        
                switch (data.type) {
                    case &#39;close&#39;:
                    case &#39;login&#39;:
                        $("#user-box").html(&#39;&#39;);
                        data.users.forEach(function (item) {
                            $("#user-box").append(`<p style="color: grey;">${item}</p>`);
                        });
                        if (data.msg) {
                            $("#msg-box").append(`<p style="color: grey;">${data.msg}</p>`);
                        }
                        break;
                    case &#39;message&#39;:
                        $("#msg-box").append(`<p><span style="color: #0A89FF">${data.time}</span><span style="color: red">${data.name}</span>${data.msg}</p>`);
                        break;
                }
            };
        
            ws.onclose = function (event) {
                alert(&#39;连接关闭&#39;);
            };
        
            document.onkeydown = function (event) {
                if (event.keyCode == 13) {
                    send();
                }
            }
        
            $("#send").click(function () {
                send();
            });
        
            function send() {
                let content = $("#content").val();
                $("#content").val(&#39;&#39;);
                if (!content) {
                    return;
                }
                ws.send(JSON.stringify({
                    type: &#39;message&#39;,
                    msg: content
                }));
            }
        </script>
        </body>
        </html>
        로그인 후 복사

        [^1]:是通讯传输的一个术语。 通信允许数据在两个方向上同时传输,它在能力上相当于两个单工通信方式的结合
        [^2]:  为了建立 websocket 连接,需要通过浏览器发出请求,之后服务器进行回应,这个过程通常称为“握手”(Handshaking)

        推荐学习:《PHP视频教程》                                            

위 내용은 PHP+Socket 시리즈는 웹소켓 채팅방을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Ubuntu 및 Debian용 PHP 8.4 설치 및 업그레이드 가이드 Ubuntu 및 Debian용 PHP 8.4 설치 및 업그레이드 가이드 Dec 24, 2024 pm 04:42 PM

PHP 8.4는 상당한 양의 기능 중단 및 제거를 통해 몇 가지 새로운 기능, 보안 개선 및 성능 개선을 제공합니다. 이 가이드에서는 Ubuntu, Debian 또는 해당 파생 제품에서 PHP 8.4를 설치하거나 PHP 8.4로 업그레이드하는 방법을 설명합니다.

이전에 몰랐던 후회되는 PHP 함수 7가지 이전에 몰랐던 후회되는 PHP 함수 7가지 Nov 13, 2024 am 09:42 AM

숙련된 PHP 개발자라면 이미 그런 일을 해왔다는 느낌을 받을 것입니다. 귀하는 상당한 수의 애플리케이션을 개발하고, 수백만 줄의 코드를 디버깅하고, 여러 스크립트를 수정하여 작업을 수행했습니다.

PHP 개발을 위해 Visual Studio Code(VS Code)를 설정하는 방법 PHP 개발을 위해 Visual Studio Code(VS Code)를 설정하는 방법 Dec 20, 2024 am 11:31 AM

VS Code라고도 알려진 Visual Studio Code는 모든 주요 운영 체제에서 사용할 수 있는 무료 소스 코드 편집기 또는 통합 개발 환경(IDE)입니다. 다양한 프로그래밍 언어에 대한 대규모 확장 모음을 통해 VS Code는

JWT (JSON Web Tokens) 및 PHP API의 사용 사례를 설명하십시오. JWT (JSON Web Tokens) 및 PHP API의 사용 사례를 설명하십시오. Apr 05, 2025 am 12:04 AM

JWT는 주로 신분증 인증 및 정보 교환을 위해 당사자간에 정보를 안전하게 전송하는 데 사용되는 JSON을 기반으로 한 개방형 표준입니다. 1. JWT는 헤더, 페이로드 및 서명의 세 부분으로 구성됩니다. 2. JWT의 작업 원칙에는 세 가지 단계가 포함됩니다. JWT 생성, JWT 확인 및 Parsing Payload. 3. PHP에서 인증에 JWT를 사용하면 JWT를 생성하고 확인할 수 있으며 사용자 역할 및 권한 정보가 고급 사용에 포함될 수 있습니다. 4. 일반적인 오류에는 서명 검증 실패, 토큰 만료 및 대형 페이로드가 포함됩니다. 디버깅 기술에는 디버깅 도구 및 로깅 사용이 포함됩니다. 5. 성능 최적화 및 모범 사례에는 적절한 시그니처 알고리즘 사용, 타당성 기간 설정 합리적,

PHP에서 HTML/XML을 어떻게 구문 분석하고 처리합니까? PHP에서 HTML/XML을 어떻게 구문 분석하고 처리합니까? Feb 07, 2025 am 11:57 AM

이 튜토리얼은 PHP를 사용하여 XML 문서를 효율적으로 처리하는 방법을 보여줍니다. XML (Extensible Markup Language)은 인간의 가독성과 기계 구문 분석을 위해 설계된 다목적 텍스트 기반 마크 업 언어입니다. 일반적으로 데이터 저장 AN에 사용됩니다

문자열로 모음을 계산하는 PHP 프로그램 문자열로 모음을 계산하는 PHP 프로그램 Feb 07, 2025 pm 12:12 PM

문자열은 문자, 숫자 및 기호를 포함하여 일련의 문자입니다. 이 튜토리얼은 다른 방법을 사용하여 PHP의 주어진 문자열의 모음 수를 계산하는 방법을 배웁니다. 영어의 모음은 A, E, I, O, U이며 대문자 또는 소문자 일 수 있습니다. 모음이란 무엇입니까? 모음은 특정 발음을 나타내는 알파벳 문자입니다. 대문자와 소문자를 포함하여 영어에는 5 개의 모음이 있습니다. a, e, i, o, u 예 1 입력 : String = "Tutorialspoint" 출력 : 6 설명하다 문자열의 "Tutorialspoint"의 모음은 u, o, i, a, o, i입니다. 총 6 개의 위안이 있습니다

PHP에서 늦은 정적 결합을 설명하십시오 (정적 : :). PHP에서 늦은 정적 결합을 설명하십시오 (정적 : :). Apr 03, 2025 am 12:04 AM

정적 바인딩 (정적 : :)는 PHP에서 늦은 정적 바인딩 (LSB)을 구현하여 클래스를 정의하는 대신 정적 컨텍스트에서 호출 클래스를 참조 할 수 있습니다. 1) 구문 분석 프로세스는 런타임에 수행됩니다. 2) 상속 관계에서 통화 클래스를 찾아보십시오. 3) 성능 오버 헤드를 가져올 수 있습니다.

php magic 방법 (__construct, __destruct, __call, __get, __set 등)이란 무엇이며 사용 사례를 제공합니까? php magic 방법 (__construct, __destruct, __call, __get, __set 등)이란 무엇이며 사용 사례를 제공합니까? Apr 03, 2025 am 12:03 AM

PHP의 마법 방법은 무엇입니까? PHP의 마법 방법은 다음과 같습니다. 1. \ _ \ _ Construct, 객체를 초기화하는 데 사용됩니다. 2. \ _ \ _ 파괴, 자원을 정리하는 데 사용됩니다. 3. \ _ \ _ 호출, 존재하지 않는 메소드 호출을 처리하십시오. 4. \ _ \ _ get, 동적 속성 액세스를 구현하십시오. 5. \ _ \ _ Set, 동적 속성 설정을 구현하십시오. 이러한 방법은 특정 상황에서 자동으로 호출되어 코드 유연성과 효율성을 향상시킵니다.

See all articles