ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解


Posted in PHP onApril 02, 2019

本文实例讲述了ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例。分享给大家供大家参考,具体如下:

ThinkPHP使用Swoole需要安装 think-swoole Composer包,前提系统已经安装好了Swoole PECL 拓展(相关文章:Linux下源码包安装使用Swoole扩展)

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

composer require topthink/think-swoole

ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解

安装成功:

ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解

话不多说,直接上代码:

新建WebSocket.php控制器:

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

<?php

namespace app\home\controller;
use think\swoole\Server;
class WebSocket extends Server
{
  protected $host = '0.0.0.0'; //监听所有地址
  protected $port = 9501; //监听9501端口
  protected $serverType = 'socket';
  protected $option = [ 
    'worker_num'=> 4, //设置启动的Worker进程数
    'daemonize'	=> false, //守护进程化(上线改为true)
    'backlog'	=> 128, //Listen队列长度
    'dispatch_mode' => 2, //固定模式,保证同一个连接发来的数据只会被同一个worker处理

    //心跳检测:每60秒遍历所有连接,强制关闭10分钟内没有向服务器发送任何数据的连接
    'heartbeat_check_interval' => 60,
    'heartbeat_idle_time' => 600
  ];

  //建立连接时回调函数
  public function onOpen($server,$req)
  {
    $fd = $req->fd;//客户端标识
    $uid = $req->get['uid'];//客户端传递的用户id
    $token = $req->get['token'];//客户端传递的用户登录token
    
    //省略token验证逻辑......
    if (!$token) {
      $arr = array('status'=>2,'message'=>'token已过期');
      $server->push($fd, json_encode($arr));
      $server->close($fd);
      return;
    }
    //省略给用户绑定fd逻辑......
    echo "用户{$uid}建立了连接,标识为{$fd}\n";
  }

  //接收数据时回调函数
  public function onMessage($server,$frame)
  {
    $fd = $frame->fd;
    $message = $frame->data;

    //省略通过fd查询用户uid逻辑......
    $uid = 666;
    $data['uid'] = $uid;
    $data['message'] = '用户'.$uid.'发送了:'.$message;
    $data['post_time'] = date("m/d H:i",time());
    $arr = array('status'=>1,'message'=>'success','data'=>$data);

    //仅推送给当前连接用户
    //$server->push($fd, json_encode($arr));
    
    //推送给全部连接用户
    foreach($server->connections as $fd) {
      $server->push($fd, json_encode($arr));
    } 
  }

  //连接关闭时回调函数
  public function onClose($server,$fd)
  {
    echo "标识{$fd}关闭了连接\n";
  }
}

前端演示页面:

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Chat</title>
<link rel="stylesheet" type="text/css" href="/static/liaotian/chat.css" rel="external nofollow" />
<script src="/static/liaotian/js/jquery.min.js"></script>
<script src="/static/liaotian/js/flexible.js"></script>
</head>
<body>
  <header class="header">
    <a class="back" href="javascript:history.back()" rel="external nofollow" ></a>
    <h5 class="tit">在线聊天</h5>
    <a href=""><div class=" rel="external nofollow" right">退出</div></a>
  </header>

  <!-- 聊天内容 start-->
	<div class="message"> </div>
  <!-- 聊天内容 end-->

  <!-- 底部 start-->
  <div class="footer">
    <img id="setbtn" src="/static/liaotian/images/hua.png" alt="" />
    <img src="/static/liaotian/images/xiaolian.png" alt="" />
    <input type="text" id="msg" value="" maxlength="300">
    <p style="background: rgb(17, 79, 142);" id="sendBtn">发送</p>
  </div>
  <!-- 底部 end-->
</body>
</html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
<script type="text/javascript">
$(function () {
  var uid = 666;//当前用户id
  var token = 'abcdefg';//用户token

  //判断浏览器是否支持WebSocket
  var supportsWebSockets = 'WebSocket' in window || 'MozWebSocket' in window;
  if (supportsWebSockets) {
    //建立WebSocket连接(ip地址换成自己主机ip)
    var ws = new WebSocket("ws://127.0.0.1:9501?uid="+uid+"&token="+token);
    ws.onopen = function () {
      layer.msg('服务器连接成功',{shade:0.1,icon:1,time:600});
    };
    ws.onerror = function () {
      layer.msg('服务器连接失败',{shade:0.1,icon:2,time:600});
    };
    ws.onmessage = function (evt) {
      var data = $.parseJSON(evt.data);
      //错误提示
      if(data.status != 1){
        layer.alert(data.message,{icon:2});
        return;
      }
      //消息返回
      if (data.status==1 && data.data.message!='') {
        var html = "";
        if (data.data.uid == uid) {
          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>";
        }else{
          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>";
        }
      }
      $(".message").append(html);
      setTimeout(function () {
        ($('.message').children("div:last-child")[0]).scrollIntoView();//向上滚动
      },100);
    };
    ws.onclose = function (res) {
      
    };
    //按钮发送
    $("#sendBtn").click(function () {
      var contents = $("#msg").val().trim();
      if(contents == null || contents == ""){
        layer.msg('内容为空',{shade:0.1,icon:2,time:600});      
        return false;
      }else{
      	ws.send(contents);
      	$("#msg").val("");
      }
    });
    //回车发送
    $("#msg").keydown(function (evel) {
      var that = $(this);
      if (evel.keyCode == 13) {
        evel.cancelBubble = true;
        evel.preventDefault();
        evel.stopPropagation();
        var contents = that.val().trim();
        if(contents == null || contents == ""){
          layer.msg('内容为空',{shade:0.1,icon:2,time:600});       
          return false;
        }else{
          ws.send(contents);
          that.val("");
        }
      }
    });
  }else{
    layer.alert("您的浏览器不支持 WebSocket!");
  }
});
</script>

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

php public/index.php Websocket/start

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

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

lsof -i:9501

ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解

 演示效果如下:

ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解

服务器监听如下:

ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解

用户每刷新重连一次,fd标识都会改变。

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

PHP 相关文章推荐
提问的智慧
Oct 09 PHP
PHP生成Flash动画的实现代码
Mar 12 PHP
PHP警告Cannot use a scalar value as an array的解决方法
Jan 11 PHP
将php数组输出html表格的方法
Feb 24 PHP
php多任务程序实例解析
Jul 19 PHP
php判断访问IP的方法
Jun 19 PHP
php表单处理操作
Nov 16 PHP
PHP实现websocket通信的方法示例
Aug 28 PHP
PHP模版引擎原理、定义与用法实例
Mar 29 PHP
Laravel统计一段时间间隔的数据方法
Oct 09 PHP
php报错502badgateway解决方法
Oct 11 PHP
PHP开发api接口安全验证操作实例详解
Mar 26 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
Apr 02 #PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
Apr 02 #PHP
phpStorm+XDebug+chrome 配置详解
Apr 01 #PHP
PHP+Oracle本地开发环境搭建方法详解
Apr 01 #PHP
phpstorm 配置xdebug的示例代码
Mar 31 #PHP
PHP文件后缀不强制为.php方法
Mar 31 #PHP
PHP中md5()函数的用法讲解
Mar 30 #PHP
You might like
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
IE bug table元素的innerHTML
2010/01/11 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
pycharm远程调试openstack代码
2017/11/21 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript