PHPでの簡易チャットルーム機能の実装例-PHPチュートリアル-php.cn

PHPでの簡易チャットルーム機能の実装例

PHPz

リリース： 2018-10-23 14:15:59

転載

6347 人が閲覧しました

この記事では主に PHP での簡単なチャットルーム機能の実装を例とともに紹介します。興味のある方は参考にしていただければ幸いです。

フロントエンドパート:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
</head>
<style>
    #set_name{
        margin: auto;
        text-align: center;
    }
</style>
<body>
<h3 style="text-align: center">亮亮的聊天室</h3>
<div id="set_name">
姓名:<input name="name" id="name"><input type="button" onclick="set_name();" value="进入群聊">
</div>
<div id="chat" style="width: 600px; border: red 1px solid;margin: auto;display: none">
    <div id="sayContent" style="height: 300px;border-bottom: silver 1px dashed;">

    </div>
    <div style="height: 75px;margin-top: 10px">
        <textarea id="content" style="height: 50px;width: 480px;background-color: #00a0e9;float: left;"></textarea>
        <button id="submit" style="float: right;height: 55px;width:50px;margin-right:45px;display: block;" onclick="send_msg();">发送</button>
    </div>
</div>
<script>
    var name = ws = &#39;&#39; ;
    //执行websock
    function chat() {
        var wsserver = &#39;ws://47.94.11.195:443&#39;;
        //调用WebSocket对象建立连接
        //ws  wss: // ip:port(字符串)
        ws = new WebSocket(wsserver);
        //获取聊天内容展示窗口
        var sayContent = document.getElementById(&#39;sayContent&#39;);
        //onopen监听连接打开
        ws.onopen = function (v) {
            var user = new Object();
            user.name = name;
            user.type = 1;//对用户设置姓名
            var json = JSON.stringify(user);
            ws.send(json);//发送数据
        }
        //onmessage监听服务器数据推送
        ws.onmessage = function (v) {
            var html = sayContent.innerHTML;
            sayContent.innerHTML = html + "<br>"+v.data;
        }
        //监听连接关闭
        ws.onclose = function (v) {
            var html = sayContent.innerHTML;
            sayContent.innerHTML = html + "<br>聊天室已关闭!";
        }
    }
    //设置用户名
    function set_name() {
        name = document.getElementById(&#39;name&#39;).value;
        if(name == &#39;&#39;){
            alert(&#39;请输入用户名!&#39;);
            return false;
        }
        document.getElementById(&#39;set_name&#39;).style.display=&#39;none&#39;;
        document.getElementById(&#39;chat&#39;).style.display=&#39;block&#39;;
        chat();
    }
    function send_msg() {
        var content = document.getElementById(&#39;content&#39;);
        if(content.value == &#39;&#39;){
            alert(&#39;请输入聊天内容!&#39;);
            return false;
        }

        var msg = new Object();
        msg.content = content.value;
        msg.type = 2;
        var str = JSON.stringify(msg);
        ws.send(str);
    }
</script>
</body>
</html>

ログイン後にコピー

バックエンドパート:

<?php
$server = new swoole_websocket_server("0.0.0.0", 443);
$server->users = [];
$server->on(&#39;open&#39;, function (swoole_websocket_server $server, $request) {
    $server->users[$request->fd][&#39;id&#39;] = $request->fd;
});
$server->on(&#39;message&#39;, function (swoole_websocket_server $server, $frame) {
    $data = json_decode($frame->data,true);
    if($data[&#39;type&#39;] == 1){
        $server->users[$frame->fd][&#39;name&#39;]=$data[&#39;name&#39;];
        $server->push($frame->fd,&#39;欢迎您(&#39;.$data[&#39;name&#39;].&#39;)进入聊天室!&#39;);
    }else{
        foreach($server->users as $v){
            $server->push($v[&#39;id&#39;], $server->users[$frame->fd][&#39;name&#39;].&#39;说:&#39;.$data[&#39;content&#39;]);
        }
    }
});
$server->on(&#39;close&#39;, function ($ser, $fd) {
    file_put_contents(&#39;qq.txt&#39;,$server->users[$frame->fd],FILE_APPEND);
    unset($server->users[$frame->fd]);
});
$server->start();

ログイン後にコピー

その他の関連チュートリアルについては、php プログラミングの入門からマスターまでのビデオチュートリアルのフルセットをご覧ください