swoole聊天室

二次信任 提交于 2019-11-26 14:13:18

服务端:

<?phpclass Chat{    const HOST = '0.0.0.0';//ip地址 0.0.0.0代表接受所有ip的访问    const PART = 8080;//端口号    private $server = null;//单例存放websocket_server对象    public $roles = [        '郭靖','杨过','洪七公','尹志平','赵志敬','丘处机','欧阳锋','一灯大师','黄药师'    ];    public function __construct()    {        //实例化swoole_websocket_server并存储在我们Chat类中的属性上,达到单例的设计        $this->server = new swoole_websocket_server(self::HOST, self::PART);        //监听连接事件        $this->server->on('open', [$this, 'onOpen']);        //监听接收消息事件        $this->server->on('message', [$this, 'onMessage']);        //监听关闭事件        $this->server->on('close', [$this, 'onClose']);        //设置允许访问静态文件        $this->server->set([            'document_root' => '/www/chat1',//这里传入静态文件的目录            'enable_static_handler' => true//允许访问静态文件        ]);        //开启服务        $this->server->start();    }    /**     * 连接成功回调函数     * @param $server     * @param $request     */    public function onOpen($server, $request)    {        echo $request->fd . '连接了' . PHP_EOL;//打印到我们终端        $server->push($request->fd,json_encode(['no' => $request->fd, 'msg' =>'']));    }    /**     * 接收到信息的回调函数     * @param $server     * @param $frame     */    public function onMessage($server, $frame)    {        $role = $this->getRole($frame->fd);        echo $role. '来了,说:' . $frame->data . PHP_EOL;//打印到我们终端        foreach ($server->connections as $fd) {//遍历TCP连接迭代器,拿到每个在线的客户端id            //将客户端发来的消息,推送给所有用户,也可以叫广播给所有在线客户端            $msg = $frame->data;            $server->push($fd, json_encode(['no' => $frame->fd,'role'=>$role, 'msg' => $msg]));        }    }    public function getRole($fd)    {        $roles = count($this->roles);        $role = ($fd < $roles) ? $this->roles[$fd] : $this->roles[$fd%$roles];        var_dump($role);        return $role;    }    /**     * 断开连接回调函数     * @param $server     * @param $fd     */    public function onClose($server, $fd)    {        echo $fd . '走了' . PHP_EOL;//打印到我们终端    }}$obj = new Chat();

  客户端

<!doctype html><html><head>    <meta charset="utf-8">    <title>聊天室</title>    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script></head><body><style>    .right {        color: blue;        display:block;        float:right;        width:100%;    }</style><div style="width: 500px; margin:0 auto;">    <div class="log" id='scrolldIV' style="height:500px;border: 2px solid #ccc;line-height: 1.5em;overflow:auto" >
        =======聊天室======    </div>    <!--<input type="button" value="连接" onClick="link()">-->    <input type="hidden" value="" id="fd">    <!--<input type="button" value="断开" onClick="dis()">-->    <div >        <input type="text" id="text">        <input type="button" value="发送" onClick="send()" id="submit">    </div></div><script>    $(document).keydown(function(event){        if(event.keyCode==13){            $("#submit").click();        }    });    $(function () {        $("#text").focus();        link();    })    function link() {        var url = 'ws://192.168.33.60:8080';        socket = new WebSocket(url);        socket.onopen = function (evt) {            log1('<div>连接成功</div>')        }        socket.onmessage = function (msg) {            var data = $.parseJSON(msg.data)            if(data.msg.length <= 0){                $("#fd").val(data.no);            } else {                log(data);            }      
     
        var div = document.getElementById('scrolldIV');        div.scrollTop = div.scrollHeight;
        }        socket.onclose = function () {            log1('<div>断开连接</div>')        }    }    function dis() {        socket.close();        socket = null;    }    function log1(data) {        $('.log').append(data);    }    function log(data) {        var nowFd = $("#fd").val();        console.log(data);        var role;        if(data['no'] == nowFd){            role ="我";            $('.log').append("<div class='right'>" + role+":"+ data['msg'] + '</div>');        } else {            $('.log').append("<div >" + data.role+": "+data['msg'] + '</div>');        }    }    function send() {        var text = $('#text').val();        if(text.length > 0){            socket.send(text);            $("#text").val('');        }        $("#text").focus();    }    function send2() {        var json = JSON.stringify({'type': 'php', 'msg': $('#text2').attr('value')})        socket.send(json);    }</script></body></html>

  

服务端 启动

php Chat.php

 

访问客户端的html 浏览器打开

 

 

 

参考 https://www.jianshu.com/p/ac77f05bee56

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!