服务端：

<?php
class 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

swoole聊天室的更多相关文章

  1. lnmp环境 swoole聊天室

    pecl install swoole 安装php扩展swooleservice php-fpm restart 重启php服务whereis php.ini 查看php.ini的位置 查看文件是否配 ...

  2. swoole 聊天室

    1:宝塔终端安装php 2:宝塔终端检测是否安装好 php-v 3:宝塔面板安装swoole扩展,终端检测 php -m  查看扩展 扩展已经安装完毕

  3. swoole中websoket创建在线聊天室（php）

    swoole中websoket创建在线聊天室(php) swoole现仅支持Linix,macos 创建websocket服务器 首先现在服务器创建一个websocket服务器 <?php // ...

  4. 简单的聊天室代码php+swoole

    php swoole+websocket 客户端代码 <!DOCTYPE html> <html> <head> <title></title&g ...

  5. 用swoole和websocket开发简单聊天室

    首先,我想说下写代码的一些习惯,第一,任何可配置的参数或变量都要写到一个config文件中.第二,代码中一定要有日志记录和完善的报错并记录报错.言归正传,swoole应该是每个phper必须要了解的, ...

  6. Swoole实现h5版聊天室笔记

    声明:该聊天室目前只有一对多,一对一的聊天功能,另外,因为没有使用到mysql,所以还存在比较多的缺陷地方,但知道原理就差不多了,这里主要分享下swoole简易的聊天室制作思路. 开发环境:cento ...

  7. 用Swoole+React 实现的聊天室

    前后端分离的项目,使用 Swoole+React 实现的聊天室,整个项目的框架结构可以进行参考,前端 react+react-redux+react-router+react-ant 等等,后台使用 ...

  8. swoole实验版聊天室

    “swoole实验版聊天室”是依据一堂swoole培训课内容改编的,结合了bootstrap前端框架.redis数据库.jquery框架等实现基本功能,只是体现了swoole的应用,并不是为了专门写个 ...

  9. 如何利用swoole搭建一個簡易聊天室

    <?php class Chat { const HOST = '0.0.0.0';//ip地址 0.0.0.0代表接受所有ip的访问 const PART = 82;//端口号 private ...

随机推荐

  1. APPSCAN使用外部浏览器的方法

    在使用appscan扫描时,自带浏览器可能存在兼容性问题(比如HTML5),故需要用到其他浏览器.在做139邮箱HTML5项目,需要使用chrome浏览器进行扫描.因此分享下如何使用外部浏览器,将之前 ...

  2. iOS 百度地图报私有api的解决方案

    1.Build Settings-->搜索other linker Flags-->将other linker Flags设置为-objc 2.用2.1.1的版本的百度地图 3.换高德地图

  3. web框架之MVC/MTV

    MVC框架 MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式 Model(模型)表示应用程序核心(比如数据库记录列表) Vi ...

  4. 将任意音频格式文件转换成16K采样率16bit的wav文件

    此转换需要使用ffmpeg 假设有目录 d:\录音 目录有 张三.m4a, 李四.m4a xxx.m4a(其他任意格式音频触类旁通可以把 *.m4a改成*.*).批量转换成采样率16K,有符号,16b ...

  5. LeetCode_198. House Robber

    198. House Robber Easy You are a professional robber planning to rob houses along a street. Each hou ...

  6. SSRS 2016 Forms Authentication

    SSRS 2016 comes with completely new report manager web interface and implementing form authenticatio ...

  7. linux下的进程间通信概述

    管道(PIPE) FIFO(有名管道) XSI消息队列 XSI信号量 XSI共享内存 POSIX信号量 域套接字(Domain Socket) 信号(Signal) 互斥量(Mutex) 其中信号(s ...

  8. git 提交大小超过100M

    #MsnDialog.ad, #MyMoveAd, #QQ_Full, #ad-SNSSplashAd, #ad6cn, #adBody07, #adLeftFloat, #adRightFloat, ...

  9. ByteDance面试

    1.HashMap.HashSet源码解读 2.Http状态码.包头内容有哪些 响应头 说明 示例 状态 Access-Control-Allow-Origin 指定哪些网站可以跨域源资源共享 Acc ...

  10. springboot集成elk 一： springboot + Elasticsearch

    1.ELK介绍 1> Elasticsearch是实时全文搜索和分析引擎, 提供搜集.分析.存储数据三大功能: 是一套开放REST和JAVA API等结构提供高效搜索功能,可扩展的分布式系统. ...