집 > 기사 > 백엔드 개발 > PHP로 채팅방 기능을 구현하는 방법

PHP로 채팅방 기능을 구현하는 방법

藏色散人원래의: 2021-07-22 09:54:583999검색

PHP에서 채팅방 기능을 구현하는 방법: 먼저 프런트 엔드 코드를 만든 다음 "비공개 함수 initSocket(){...}" 및 기타 메서드를 만들어 PHP 백엔드 파일에서 채팅방 기능을 구현합니다. .

이 기사의 운영 환경: windows7 시스템, PHP7.1 버전, DELL G3 컴퓨터

PHP에서 채팅방 기능을 구현하는 방법은 무엇입니까?

1. 함수 인터페이스

PHP로 채팅방 기능을 구현하는 방법 2. 구체적인 코드 구현

1. 프론트엔드 코드는 다음과 같습니다 PHP로 채팅방 기능을 구현하는 방법

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>websocket聊天室</title>
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600" rel="stylesheet">
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/style.css">
    <style>
        .message img {
            float: left;
            width: 40px;
            height: 40px;
            margin-right: 12px;
            border-radius: 50%;
        }
        .you {
            margin-left: 60px;
            margin-top: -39px;
        }
        .me-header {
            float: right !important;
            margin-right: 0 !important;
        }
        .me {
            margin-right: 60px;
            margin-top: -39px;
        }
        .active-chat::-webkit-scrollbar, .left::-webkit-scrollbar {
            width: 2px;
        }
    </style>
</head>
<body>
<div>
    <div>
        <div>
            <div style="padding: 20px 29px;height: auto;">
                <div class="" style="font: 400 13.3333px Arial;font-weight: 400;">在线人数：<span id="numbers">0</span> 人
                </div>
            </div>
            <ul>
            </ul>
        </div>
        <div>
            <div><span>Tips: <span>PHP之websocket聊天室</span></span></div>
            <div class="chat active-chat" data-chat="person1"
                 style="height: auto;border-width: 0px;padding: 10px;height: 483px; padding: 10px;overflow-y: auto;scrollTop: 100px">
            </div>
            <div>
                <a href="javascript:;" class="write-link attach"></a>
                <input type="text" id="input-value" onkeydown="confirm(event)"/>
                <a href="javascript:;" class="write-link smiley"></a>
                <a href="javascript:;" class="write-link send" onclick="send()"></a>
            </div>
        </div>
    </div>
</div>
<script src="js/index.js"></script>
<script>
    var uname = prompt(&#39;请输入用户名&#39;, &#39;user&#39; + uuid(8, 16));
    var avatar = [&#39;bo-jackson.jpg&#39;, &#39;dog.png&#39;, &#39;drake.jpg&#39;, &#39;louis-ck.jpeg&#39;, &#39;michael-jordan.jpg&#39;, &#39;thomas.jpg&#39;];
    if (avatar[Math.round(Math.random() * 10)]) {
        var headerimg = "img/" + avatar[Math.round(Math.random() * 10)];
    } else {
        var headerimg = "img/" + avatar[0];
    }
    // 创建一个 websocket 连接
    var ws = new WebSocket("ws://127.0.0.1:1238");
    // websocket 创建成功事件
    ws.onopen = function () {
        var data = "系统消息：建立连接成功";
        console.log(data);
    };
    // websocket 接收到消息事件
    ws.onmessage = function (e) {
        var data = JSON.parse(e.data);
        switch (data.type) {
            case &#39;handShake&#39;:
                console.log(data.msg);
                //发送用户登录
                var user_info = {&#39;type&#39;: &#39;login&#39;, &#39;msg&#39;: uname, &#39;headerimg&#39;: headerimg};
                sendMsg(user_info);
                break;
            case &#39;login&#39;:
                userList(data.user_list);
                systemMessage(&#39;系统消息: &#39; + data.msg + &#39; 已上线&#39;);
                break;
            case &#39;logout&#39;:
                userList(data.user_list);
                if (data.msg.length > 0) {
                    systemMessage(&#39;系统消息: &#39; + data.msg + &#39; 已下线&#39;);
                }
                break;
            case &#39;user&#39;:
                messageList(data);
                break;
            case &#39;system&#39;:
                systemMessage();
                break;
        }
    }
    // websocket 错误事件
    ws.onerror = function () {
        var data = "系统消息 : 出错了,请退出重试.";
        alert(data);
    };
    function confirm(event) {
        var key_num = event.keyCode;
        if (13 == key_num) {
            send();
        } else {
            return false;
        }
    }
    function systemMessage(msg) {
        var html = `<div>
            <span>` + msg + `</span>
        </div>`;
        var active_chat = document.querySelector(&#39;div.active-chat&#39;);
        var oldHtml = active_chat.innerHTML;
        active_chat.innerHTML = oldHtml + html;
        active_chat.scrollTop = active_chat.scrollHeight;
    }
    function send() {
        var msg = document.querySelector("input#input-value").value;
        var reg = new RegExp("\r\n", "g");
        msg = msg.replace(reg, "");
        sendMsg({type: "user", msg: msg});
        document.querySelector("input#input-value").value = "";
    }
    function sendMsg(msg) {
        var data = JSON.stringify(msg);
        ws.send(data);
    }
    function userList(user) {
        var html = &#39;&#39;;
        for (var i = 0; i < user.length; i++) {
            html += `<li data-chat="person1">
                    <img src="` + user[i].headerimg + `" alt=""/>
                    <span>` + user[i].username + `</span>
                    <span>` + user[i].login_time + `</span>
                    <span style="color: green;font-size: 7px;">在线</span>
                </li>`;
        }
        document.querySelector(&#39;ul.people&#39;).innerHTML = html;
        document.querySelector(&#39;span#numbers&#39;).innerHTML = user.length;
    }
    function messageList(data) {
        if (data.from == uname) {
            var html = `<div>
                    <img src="` + data.headerimg + `" alt=""/>
                    <div class="bubble me">` + data.msg + `</div>
                </div>`;
        } else {
            var html = `<div>
                    <img src="` + data.headerimg + `" alt=""/>
                    <div class="bubble you">` + data.msg + `</div>
                </div>`;
        }
        var active_chat = document.querySelector(&#39;div.active-chat&#39;);
        var oldHtml = active_chat.innerHTML;
        active_chat.innerHTML = oldHtml + html;
        active_chat.scrollTop = active_chat.scrollHeight;
    }
    /**
     * 生产一个全局唯一ID作为用户名的默认值;
     *
     * @param len
     * @param radix
     * @returns {string}
     */
    function uuid(len, radix) {
        var chars = &#39;0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz&#39;.split(&#39;&#39;);
        var uuid = [], i;
        radix = radix || chars.length;
        if (len) {
            for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
        } else {
            var r;
            uuid[8] = uuid[13] = uuid[18] = uuid[23] = &#39;-&#39;;
            uuid[14] = &#39;4&#39;;
            for (i = 0; i < 36; i++) {
                if (!uuid[i]) {
                    r = 0 | Math.random() * 16;
                    uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                }
            }
        }
        return uuid.join(&#39;&#39;);
    }
</script>
</body>
</html>

2. 추천 학습은 다음과 같습니다. : "

PHP 비디오 튜토리얼

위 내용은 PHP로 채팅방 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：PHP에서 색상 공간 변환을 달성하는 방법다음 기사：PHP에서 색상 공간 변환을 달성하는 방법