Comment implémenter la fonction de salle de discussion en php-Problème PHP-php.cn

Comment implémenter la fonction de salle de discussion en php

藏色散人

Libérer： 2023-03-11 18:20:02

original

4065 Les gens l'ont consulté

Comment implémenter la fonction de salle de discussion en PHP : créez d'abord le code front-end ; puis implémentez la fonction de salle de discussion dans le fichier back-end PHP en créant "fonction privée initSocket(){...}" et d'autres méthodes .

Comment implémenter la fonction de salle de discussion en php

L'environnement d'exploitation de cet article : système windows7, version PHP7.1, ordinateur DELL G3

Comment implémenter la fonction chat room en php ?

1. Interface de fonction

Comment implémenter la fonction de salle de discussion en php

2. Implémentation du code spécifique

1. Le code front-end est le suivant

<!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>

Copier après la connexion

2. : "

Tutoriel vidéo PHP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!