zoukankan      html  css  js  c++  java
  • Swoole跟thinkphp5结合开发WebSocket在线聊天通讯系统



    ThinkPHP使用Swoole需要安装 think-swoole Composer包,前提系统已经安装好了Swoole PECL 拓展*

    tp5的项目根目录下执行composer命令安装think-swoole:

    composer require topthink/think-swoole

    话不多说,直接上代码:

    新建WebSocket.php控制器

    (监听端口要确认服务器放行,宝塔环境还需要添加安全组规则)

     1 <?php
     2  
     3 namespace apphomecontroller;
     4 use thinkswooleServer;
     5 class WebSocket extends Server
     6 {
     7     protected $host = '0.0.0.0'; //监听所有地址
     8     protected $port = 9501; //监听9501端口
     9     protected $serverType = 'socket';
    10     protected $option = [ 
    11         'worker_num'=> 4, //设置启动的Worker进程数
    12         'daemonize'    => false, //守护进程化(上线改为true)
    13         'backlog'    => 128, //Listen队列长度
    14         'dispatch_mode' => 2, //固定模式,保证同一个连接发来的数据只会被同一个worker处理
    15  
    16         //心跳检测:每60秒遍历所有连接,强制关闭10分钟内没有向服务器发送任何数据的连接
    17         'heartbeat_check_interval' => 60,
    18         'heartbeat_idle_time' => 600
    19     ];
    20  
    21     //建立连接时回调函数
    22     public function onOpen($server,$req)
    23     {
    24         $fd = $req->fd;//客户端标识
    25         $uid = $req->get['uid'];//客户端传递的用户id
    26         $token = $req->get['token'];//客户端传递的用户登录token
    27         
    28         //省略token验证逻辑......
    29         if (!$token) {
    30             $arr = array('status'=>2,'message'=>'token已过期');
    31             $server->push($fd, json_encode($arr));
    32             $server->close($fd);
    33             return;
    34         }
    35         //省略给用户绑定fd逻辑......
    36         echo "用户{$uid}建立了连接,标识为{$fd}
    ";
    37     }
    38  
    39     //接收数据时回调函数
    40     public function onMessage($server,$frame)
    41     {
    42         $fd = $frame->fd;
    43         $message = $frame->data;
    44  
    45         //省略通过fd查询用户uid逻辑......
    46         $uid = 666;
    47         $data['uid'] = $uid;
    48         $data['message'] = '用户'.$uid.'发送了:'.$message;
    49         $data['post_time'] = date("m/d H:i",time());
    50         $arr = array('status'=>1,'message'=>'success','data'=>$data);
    51  
    52         //仅推送给当前连接用户
    53         //$server->push($fd, json_encode($arr));
    54         
    55         //推送给全部连接用户
    56         foreach($server->connections as $fd) {
    57             $server->push($fd, json_encode($arr));
    58         } 
    59     }
    60  
    61     //连接关闭时回调函数
    62     public function onClose($server,$fd)
    63     {
    64         echo "标识{$fd}关闭了连接
    ";
    65     }
    66 }

    前端演示页面:

    (省略控制器判断登录状态、分配数据逻辑......)

     

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4 <meta charset="UTF-8" />
      5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
      7 <title>Chat</title>
      8 <link rel="stylesheet" type="text/css" href="/static/liaotian/chat.css" />
      9 <script src="/static/liaotian/js/jquery.min.js"></script>
     10 <script src="/static/liaotian/js/flexible.js"></script>
     11 </head>
     12 <body>
     13     <header class="header">
     14         <a class="back" href="javascript:history.back()"></a>
     15         <h5 class="tit">在线聊天</h5>
     16         <a href=""><div class="right">退出</div></a>
     17     </header>
     18  
     19     <!-- 聊天内容 start-->
     20     <div class="message"> </div>
     21     <!-- 聊天内容 end-->
     22  
     23     <!-- 底部 start-->
     24     <div class="footer">
     25         <img id="setbtn" src="/static/liaotian/images/hua.png" alt="" />
     26         <img src="/static/liaotian/images/xiaolian.png" alt="" />
     27         <input type="text" id="msg" value="" maxlength="300">
     28         <p style="background: rgb(17, 79, 142);" id="sendBtn">发送</p>
     29     </div>
     30     <!-- 底部 end-->
     31 </body>
     32 </html>
     33 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
     34 <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
     35 <script type="text/javascript">
     36 $(function () {
     37     var uid = 666;//当前用户id
     38     var token = 'abcdefg';//用户token
     39  
     40     //判断浏览器是否支持WebSocket
     41     var supportsWebSockets = 'WebSocket' in window || 'MozWebSocket' in window;
     42     if (supportsWebSockets) {
     43         //建立WebSocket连接(ip地址换成自己主机ip)
     44         var ws = new WebSocket("ws://127.0.0.1:9501?uid="+uid+"&token="+token);
     45         ws.onopen = function () {
     46             layer.msg('服务器连接成功',{shade:0.1,icon:1,time:600});
     47         };
     48         ws.onerror = function () {
     49             layer.msg('服务器连接失败',{shade:0.1,icon:2,time:600});
     50         };
     51         ws.onmessage = function (evt) {
     52             var data = $.parseJSON(evt.data);
     53             //错误提示
     54             if(data.status != 1){
     55                 layer.alert(data.message,{icon:2});
     56                 return;
     57             }
     58             //消息返回
     59             if (data.status==1 && data.data.message!='') {
     60                 var html = "";
     61                 if (data.data.uid == uid) {
     62                     html += "<div style='word-break:break-all' class="show"><div class="time">"+data.data.post_time+"</div><div class="msg"><img src=""+data.data.head_img+"" alt="" /><p><i clas="msg_input"></i>"+data.data.message+"</p></div></div>";
     63                 }else{
     64                     html += "<div style='word-break:break-all' class="send"><div class="time">"+data.data.post_time+"</div><div class="msg"><img src=""+data.data.head_img+"" alt="" /><p><i clas="msg_input"></i>"+data.data.message+"</p></div></div>";
     65                 }
     66             }
     67             $(".message").append(html);
     68             setTimeout(function () {
     69                 ($('.message').children("div:last-child")[0]).scrollIntoView();//向上滚动
     70             },100);
     71         };
     72         ws.onclose = function (res) {
     73             
     74         };
     75         //按钮发送
     76         $("#sendBtn").click(function () {
     77             var contents = $("#msg").val().trim();
     78             if(contents == null || contents == ""){
     79                 layer.msg('内容为空',{shade:0.1,icon:2,time:600});            
     80                 return false;
     81             }else{
     82                 ws.send(contents);
     83                 $("#msg").val("");
     84             }
     85         });
     86         //回车发送
     87         $("#msg").keydown(function (evel) {
     88             var that = $(this);
     89             if (evel.keyCode == 13) {
     90                 evel.cancelBubble = true;
     91                 evel.preventDefault();
     92                 evel.stopPropagation();
     93                 var contents = that.val().trim();
     94                 if(contents == null || contents == ""){
     95                     layer.msg('内容为空',{shade:0.1,icon:2,time:600});              
     96                     return false;
     97                 }else{
     98                     ws.send(contents);
     99                     that.val("");
    100                 }
    101             }
    102         });
    103     }else{
    104         layer.alert("您的浏览器不支持 WebSocket!");
    105     }
    106 });
    107 </script>
    108  

    服务器移到项目根目录开启服务:

    php public/index.php Websocket/start

    这里的路径,是因为我绑定了home模块为默认模块,tp5默认情况是:php public/index.php index/Websocket/start)

     

    开启成功,查看端口已经被监听:

    lsof -i:9501

    phper在进阶的时候总会遇到一些问题和瓶颈,业务代码写多了没有方向感,不知道该从那里入手去提升,对此我整理了一些资料,包括但不限于:分布式架构、高可扩展、高性能、高并发、服务器性能调优、TP6,laravel,YII2,Redis,Swoole、Kafka、Mysql优化、shell脚本、Docker、微服务、Nginx等多个知识点高级进阶干货需要的可以免费分享给大家,需要的(点击→)我的官方群677079770

  • 相关阅读:
    TCP/IP Checksum 吐槽
    RHEL安装时加载第三方raid驱动
    RHEL Channel Bonding
    关于case语句中声明变量并初始化的注意事项
    Allocators与Criterion的相同点及区别
    BitSet构造函数的两种特例
    Bitset<>用于unordered container时的默认hash函数
    C++ Stream
    C++Exception知识整理
    C++String知识整理
  • 原文地址:https://www.cnblogs.com/a609251438/p/11794399.html
Copyright © 2011-2022 走看看