您现在的位置是:网站首页>>PHP>>php

PHP 使用swoole实现实时通讯

发布时间:2019-01-21 13:15:11作者:wangjian浏览量:493点赞量:0

    PHP端(server.php):

    <?php
    //创建websocket服务器对象,监听0.0.0.0:9502端口
    $ws = new swoole_websocket_server("0.0.0.0", 9501,SWOOLE_BASE);
    //监听WebSocket连接打开事件
    $ws->on('open', function ($ws, $request) {
        var_dump($request->fd, $request->get, $request->server);
        $ws->push($request->fd, "hello, welcome\n");
    });
    //监听WebSocket消息事件
    $ws->on('message', function ($ws, $frame) {
        echo "Message: {$frame->data}\n";
        $ws->push($frame->fd, "server: {$frame->data}");
    });
    //监听WebSocket连接关闭事件
    $ws->on('close', function ($ws, $fd) {
        echo "client-{$fd} is closed\n";
    });
    $ws->start();

    客户端js(client.html)

    <script type="text/javascript">
            var wsServer = 'ws://127.0.0.1:9501';
            var websocket = new WebSocket(wsServer);
            //连接WebSocket
            websocket.onopen = function (event) {
                    console.log("Connected to WebSocket server.");
            };
            //关闭WebSocket
            websocket.onclose = function (event) {
                   console.log('Disconnected');
            };
            //WebSocket服务器传递来的消息
            websocket.onmessage = function (event) {
                    console.log(event.data);
            };
            //WebSocket服务器连接失败
            websocket.onerror = function (event, e) {
                    console.log('Error occured: ' + event.data);
            };
    </script>

    使用swoole实现简单聊天室(参考:http://zixuephp.net/article-463.html):

    php代码:

    <?php
    //server.php
    //创建websocket服务器对象,监听0.0.0.0:9501端口
    $ws = new swoole_websocket_server("0.0.0.0", 9501,SWOOLE_BASE);
     
    //监听WebSocket连接打开事件
    $ws->on('open', function ($ws, $request) {
        var_dump($request->fd);
        //var_dump($request->get);
        //var_dump($request->server);
        //$ws->push($request->fd, $request->fd);
    });
    //监听WebSocket消息事件
    $ws->on('message', function ($ws, $frame) {
        $message = '';
        $message = $frame->data;
        print_r($message);
        $person = count($ws->connections);
        foreach($ws->connections as $fd){
            if($fd == $frame->fd){
                $message = json_decode($message,true);
                $message['self'] =1;
                $message['time'] =date('Y-m-d H:i:s',time());
                $message['person'] = $person;
                $message = json_encode($message);
                $ws->push($fd,$message);
            }else{
                $message = json_decode($message,true);
                $message['self'] =0;
                $message['time'] =date('Y-m-d H:i:s',time());
                $message['person'] = $person;
                $message = json_encode($message);
                $ws->push($fd, $message);
            }
        }
        //echo "message:".$message."\n";
    });
     
    //监听WebSocket连接关闭事件
    $ws->on('close', function ($ws, $fd) {
        //echo "client-{$fd} is closed\n";
    });
    $ws->start();

    前端代码:

    <link rel="stylesheet" href="http://zixuephp.net/static/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="http://zixuephp.net/static/css/style.css" />
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <style type="text/css">
        .chat { margin:10px 0px; }
        .chat .chatwin { width:100%; padding:10px; }
        .chat .chatwin .chatmain { clear:both; width:100%; height:550px; background:#EDEDED; border:1px solid #ff8400; }
        .chat .chatwin .chatmain .chattitle { background:#ff8400; text-align: center; font-size:16px; height:50px; line-height:50px;  }
        .chat .chatwin .chatmain .chatinfo { width:25%; padding:10px; background:#42A085; height:500px; line-height:2;}
        .chat .chatwin .chatmain .chatinfo h4 { margin-top:20px; font-size:16px; }
        .chat .chatwin .chatmain .chatlists { width:75%; height:498px; overflow:hidden; background:#fff;}
        .chat .chatwin .chatmain .chatlists .chatdetails { width:100%; height:400px; padding:20px; overflow: hidden; overflow-y:auto; }
        .chat .chatwin .chatmain .chatlists .chatdetails .chatmessage { width:100%; margin-bottom:15px; }
        .chat .chatwin .chatmain .chatlists .chatdetails .chatmessage .chatnametime { }
        .chat .chatwin .chatmain .chatlists .chatdetails .chatmessage .chatimgcon { }
        .chat .chatwin .chatmain .chatlists .chatdetails .chatmessage .chatimgcon img { width:5%; margin-left:10px; margin-right:10px; margin-top:5px; display: block; width:50px; height:50px; border-radius:100%; }
        .chat .chatwin .chatmain .chatlists .chatdetails .chatmessage .chatimgcon .chcon { background:#fff; width:90%; padding:10px; margin-top:8px; border-radius:10px; border:1px solid green; overflow:hidden; word-wrap:break-word;}
        .chat .chatwin .chatmain .chatlists .chatdetails .chatmessage .chatnametime.rrn { text-align: right; }
        .chat .chatwin .chatmain .chatlists .chatcontent { width:100%; height:98px; overflow:hidden; background:#F5F5F5; border-top:1px solid #ff8400;}
        .chat .chatwin .chatmain .chatlists .chatcontent textarea { resize:none; display:inline-block;width:85%; height:98px; overflow-y:auto; background:#f5f5f5; border:0px; padding:5px; }
        .chat .chatwin .chatmain .chatlists .chatcontent .chatbtn { border-left:1px solid #ff8400; height:98px; width:15%; }
        .chat .chatwin .chatmain .chatlists .chatcontent .chatbtn button {display:block; margin:30px auto;}
    </style>
    <div class="clearfix chat">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                   <div class="chatwin">
                        <div class="clearfix chatmain">
                            <div class="chattitle">聊天室</div>
                            <div class="fl chatinfo">
                                <h4 class="person">在线人数:<span class="persion1"></span>人</h4>                            
                                <p class="wsname">昵称:<br/><span style="margin-left:10px;" class="wsname1">游客-20547</span></p>
                            </div>
                            <div class="fl chatlists">
                                <div class="chatdetails">
                                </div>
                                <div class="chatcontent">
                                    <textarea class="fl" placeholder="请再次输入你的聊天内容..."></textarea>
                                    <div class="fl chatbtn">
                                        <button class="btn btn-default chatsend">发送</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                   </div>
                </div>
            </div>
        </div>
    </div>
    <script>
    </script><script src="http://res.layui.com/layui/release/layer/dist/layer.js?v=3111"></script>
    <script type="text/javascript">
        $(function(){
            var wsname = $('.wsname1').text();
            var wsimg = $('.chatheadimg').attr('src');
            var wsServer = 'ws://127.0.0.1:9501';
            var websocket = new WebSocket(wsServer);
            websocket.onopen = function (event) {
                layer.msg('聊天室连接成功!');
                websocket.send('{"type":"1","name":"'+wsname+'","msg":"上线了!","self":"0","img":"'+wsimg+'"}');
            };
            websocket.onclose = function (event) {
                websocket.send('{"type":"3","name":"'+wsname+'","msg":"下线了!","self":"0","img":"'+wsimg+'"}');
            };
            websocket.onmessage = function (event) {
                var chatmessage = JSON.parse(event.data);
                console.log(chatmessage)
                if(chatmessage){
                    var ctype = chatmessage['type'];
                    var cself = chatmessage['self'];
                    var cname = chatmessage['name'];
                    var ctime = chatmessage['time'];
                    var cmsg = chatmessage['msg'];
                    var person = chatmessage['person'];
                    console.log(cmsg + '111')
                    if(ctype == 1){
                        //上线提示
                        if( cself== 0){
                            layer.msg('【'+cname+'】'+cmsg);
                        }
                        $('.persion1').text(person);
                    }else if (ctype == 2){
                        var html ='';
                        if( cself == 1){
                            //本人发送
                            html = "<div class=\"clearfix chatmessage\">\n"
                            +"<div class=\"chatnametime rrn\">\n" 
                            +"<span>"+cname+"</span>&nbsp;&nbsp;\n" 
                            +"<span>"+ctime+"</span>\n" 
                            +"</div>\n" 
                            +"<div class=\"chatimgcon\">\n" 
                            +"<div class=\"fr\">\n" 
                            +"</div>\n" 
                            +"<div class=\"fr chcon\">"+cmsg+"</div>\n" 
                            +"</div>\n" 
                            +"</div>";
                        }else{
                            //其他人发送
                            html = "<div class=\"clearfix chatmessage\">\n" 
                            +"<div class=\"chatnametime\">\n" 
                            +"<span>"+cname+"</span>&nbsp;&nbsp;\n" 
                            +"<span>"+ctime+"</span>\n" 
                            +"</div>\n" 
                            +"<div class=\"chatimgcon\">\n" 
                            +"<div class=\"fl\">\n" 
                            +"</div>\n" 
                            +"<div class=\"fl chcon\">"+cmsg+"</div>\n" 
                            +"</div>\n" 
                            +"</div>";
                        }
                        $('.chatdetails').append(html);
                        $('.persion1').text(person);
                        $(".chatdetails").animate({scrollTop:$('.chatdetails')[0].scrollHeight},200);
                    }else if(ctype == 3){
                        //下线提示
                        $('.persion1').text(person);
                        layer.msg('【'+cname+'】'+cmsg);
                    }
                }
            };
            websocket.onerror = function (event, e) {
                layer.msg('聊天室错误'+event.data);
            };
            $(".chatsend").click(function(){
                var chatcon = '';
                chatcon = $('.chatcontent textarea').val();
                websocket.send('{"type":"2","name":"'+wsname+'","msg":"'+chatcon+'","self":"0","img":"'+wsimg+'"}');
            });
            window.onunload = function() {
                websocket.send('{"type":"3","name":"'+wsname+'","msg":"下线了!","self":"0","img":"'+wsimg+'"}');
            }
        });
    </script>
    </body>
    </html>


0 +1