swoole 简单的聊天室

php页面
    //监听WebSocket连接打开事件
    <?php
    $ws = new swoole_websocket_server("0.0.0.0", 9503);
    $ws->on('open', function ($ws, $request) {
     //   var_dump($request->fd, $request->get, $request->server);
        $ws->push($request->fd, '与服务器连接成功,我是用户'.$request->fd);
    });

    //监听WebSocket消息事件
    $ws->on('message', function ($ws, $frame) {
         $data=$frame->data;
         $data=json_decode($data,true);
        foreach($ws->connections as $fd) {
            if($fd!=$frame->fd) {
                $ws->push($fd, $data['data']);
            }
        }
    });

    //监听WebSocket连接关闭事件
    $ws->on('close', function ($ws, $fd) {
        echo "client-{$fd} is closed\n";
    });

    $ws->start();

html 页面

<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>workerman-chat PHP聊天室 Websocket(HTLM5/Flash)+PHP多进程socket实时推送技术</title>

    <script type="text/javascript" src="/js/jquery.min.js"></script>

    <script type="text/javascript">

        // 连接服务端
        // 连接服务端
        var websocket;
        function connect() {

            var wsServer = 'ws://119.23.35.137:9503';
             websocket = new WebSocket(wsServer);

            websocket.onopen = function (evt) {
               console.log('连接成功');
            };
            websocket.onmessage = function (evt) {
                var input = document.getElementById("shoudao").value;
                console.log(evt);
                console.log('接受的消息: ' + evt.data);
                document.getElementById("shoudao").value=input+'\n'+evt.data;
               ;
            };

        }


        // 提交对话
        function onSubmit() {

            var input = document.getElementById("textarea").value;
            var login_data = JSON.stringify({data:input})
            console.log("websocket握手成功,发送登录数据:"+login_data);
            websocket.send(login_data);

        }



    </script>
</head>
<body "connect();">
<div class="container">
    <div class="row clearfix">
        <div class="col-md-1 column">
        </div>
        <div class="col-md-6 column">
            <div class="thumbnail">
                <div class="caption" id="dialog"></div>
            </div>
            <form onsubmit="onSubmit(); return false;">

                <textarea class="textarea thumbnail" id="textarea" style="font-size:30px;width:300px;height:200px"></textarea>
                <div class="say-btn">
                    <input type="submit" class="btn btn-default" value="发表" />
                </div>
                <textarea class="textarea thumbnail" id="shoudao" style="font-size:30px;width:300px;height:200px"></textarea>
            </form>
        </div>

    </div>
</div>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_43632766/article/details/86525982
今日推荐