Detailed example of implementing simple chat room function in PHP-PHP Tutorial-php.cn

Detailed example of implementing simple chat room function in PHP

PHPz

Release： 2018-10-23 14:15:59

forward

6371 people have browsed it

This article mainly introduces the implementation of simple chat room functions in PHP with examples. It has certain reference value. Interested friends can refer to it. I hope it will be helpful to you!

Front-end part:

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

Copy after login

Back-end part:

<?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();

Copy after login

For more related tutorials, please visit php programming from entry to master full set of video tutorials