美文网首页
基于php swoole扩展写的超简单聊天室

基于php swoole扩展写的超简单聊天室

作者: antic | 来源:发表于2017-01-17 16:21 被阅读0次

实例图:

Paste_Image.png
  1. 服务端 Websocket.php
$ws_server = new swoole_websocket_server('192.168.238.129',9502);
//设置server运行时的参数
$ws_server->set(array(
    'daemonize' => true, //是否作为守护进程
    'log_file' => __DIR__ .'/logs/web_socket.log'
));
//监听WebSocket连接打开事件
$ws_server->on('open', function ($ws, $request) {
//    $ws->push($request->fd, $request->fd.' : '."Hello\n");
});

//监听WebSocket消息事件
$ws_server->on('message', function ($ws, $frame) {
    pushMessage($ws,$frame->data,$frame->fd);
});

//监听WebSocket连接关闭事件
$ws_server->on('close', function ($ws, $fd) {
    echo date('Y-m-d H:i:s').' 游客ID-'.$fd.' 退出了聊天室'."\r\n";
});

$ws_server->start();

//消息推送
function pushMessage($ws,$data,$fd){
    echo date('Y-m-d H:i:s').' 游客ID-'.$fd.':'.$data."\r\n";
    foreach($ws->connections as $dd){
        $ws->push($dd, $fd.' : '.$data);

    }
}

启动:
php websocket.php
重启机制:
先杀死进程,再重新启动
ps -eaf |grep "Websocket.php" | grep -v "grep"| awk '{print $2}'|xargs kill -9

2.客户端 websocket.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>基于php swoole扩展写的超简单聊天室</title>
    <script type="text/javascript" charset="utf-8" >
        if(window.WebSocket){
            var webSocket = new WebSocket("ws://192.168.238.129:9502");
            webSocket.onopen = function (event) {
            };
            webSocket.onmessage = function (event) {
                var content = document.getElementById('content');
                content.innerHTML = content.innerHTML.concat('<p >游客id-'+event.data+'</p>');
                content.scrollTop = content.scrollHeight;
                document.getElementById("message").value="";
            }
            var sendMessage = function(){
                var data = document.getElementById('message').value;
                webSocket.send(data);
            }
        }else{
            console.log("浏览器不支持WebSocket");
        }
    </script>
    <style >
        p {
            margin-left:20px;
            height:8px;
            line-height:20px;
        }
        #title {
            text-align: center;
            margin-bottom: 10px;
        }
        #room {
            width: 600px;
            border: 1px solid #ccc;
            margin:0 auto;
        }
        #content {
            overflow-y:auto;
            height:300px;
            border: 1px solid #ccc;
        }
        #talk {
            height:40px;
            margin-top:10px
        }
        #message {
            margin-left:10px;
            height:25px;
            width:450px;
        }
        #sendButton {
            margin-left:20px;
            height:30;
            width: 70px;
        }

    </style>
</head>
<body>
    <div id="title" >基于php swoole扩展写的超简单聊天室</div>
    <div id="room" > 
        <div id="content" ></div>
        <div id="talk" >
            <input type="text" id="message"  placeholder="说点什么吧...">
            <button id = "sendButton" onclick="sendMessage()" >发送</button>
        </div>
    </div>
</body>
</html>

开两个浏览器 访问

QQ图片20170117162053.png

相关文章

网友评论

      本文标题:基于php swoole扩展写的超简单聊天室

      本文链接:https://www.haomeiwen.com/subject/tebmbttx.html