swoole+redis(websocket聊天室demo)

　　websocket是不同于http的另外一种网络通信协议，能够进行双向通信，基于此，可开发出各种实时通信产品，我简单做了个聊天室demo，顺便分享一下。

　　PHP的swoole扩展，正如作者所说，是PHP的异步、并行、高性能网络通信引擎，使用纯C语言编写，提供了PHP语言的异步多线程服务器，异步TCP/UDP网络客户端，异步MySQL，异步Redis，数据库连接池，AsyncTask，消息队列，毫秒定时器，异步文件读写，异步DNS查询。 Swoole内置了Http/WebSocket服务器端/客户端、Http2.0服务器端。

　　本demo用swoole来做server端，client端使用html5 websocket api，使用redis set数据结构存储连接标识。具体代码如下：

　　1，websocket.php：

<?php
/**
 * Created by PhpStorm.
 * User: purelightme
 * Date: 2017/7/30
 * Time: 15:24
 */
$ws_server = new swoole_websocket_server('0.0.0.0', 9502);

$redis = new Redis();
$redis->connect('127.0.0.1', 6379);
//$redis->flushAll();exit;

$ws_server->on('open', function ($ws, $request) use ($redis) {
    $redis->sAdd('fd', $request->fd);
});

$ws_server->on('message', function ($ws, $frame) use ($redis) {
    global $redis;
    $fds = $redis->sMembers('fd');
    foreach ($fds as $fd){
        $ws->push($fd,$frame->fd.'--'.$frame->data);
        //发送二进制数据：
        $ws->push($fd,file_get_contents('http://imgsrc.baidu.com/imgad/pic/item/267f9e2f07082838b5168c32b299a9014c08f1f9.jpg'),WEBSOCKET_OPCODE_BINARY);
    }
});

//监听WebSocket连接关闭事件
$ws_server->on('close', function ($ws, $fd) use ($redis) {
    $redis->sRem('fd',$fd);
});

$ws_server->start();

　　2，websocket.html：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <script type="text/javascript">
        if(window.WebSocket){
            var webSocket = new WebSocket("ws://0.0.0.0:9502");
            webSocket.onopen = function (event) {
                //webSocket.send("Hello,WebSocket!");
            };
            webSocket.onmessage = function (event) {
                var content = document.getElementById('content');
                if(event.data instanceof Blob) {
                    var img = document.createElement("img");
                    img.src = window.URL.createObjectURL(event.data);
                    content.appendChild(img);
                }else {
                    content.innerHTML = content.innerHTML.concat('<p style="margin-left:20px;height:20px;line-height:20px;">用户id-'+event.data+'</p>');
                }
            };

            var sendMessage = function(){
                var data = document.getElementById('message').value;
                webSocket.send(data);
                document.getElementById('message').value = '';
            }
        }else{
            console.log("您的浏览器不支持WebSocket");
        }
    </script>
</head>
<body>
<div style="600px;margin:0 auto;border:1px solid #ccc;">
    <div id="content" style="overflow-y:auto;height:300px;"></div>
    <hr/>
    <div style="height:40px">
        <input type="text" id="message" style="margin-left:10px;height:25px;450px;">
        <button onclick="sendMessage()" style="height:28px;75px;">发送</button>
    </div>
</div>
</body>
</html>

　　效果大概如下图，感兴趣的可以自己研究研究。。。