首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

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程序设计有所帮助。

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

- Author -

李维山

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
PHP学习之PHP变量
Oct 09 PHP
php 伪静态之IIS篇
Jun 02 PHP
php socket客户端及服务器端应用实例
Jul 04 PHP
PHP获得数组交集与差集的方法
Jun 10 PHP
WampServer搭建php环境时遇到的问题汇总
Jul 23 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
Aug 31 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
Dec 22 PHP
PHP接口并发测试的方法(推荐)
Dec 15 PHP
Yii2 加载css、js 载静态资源的方法
Mar 10 PHP
利用PHP如何统计Nginx日志的User Agent数据
Mar 06 PHP
详解PHP 二维数组排序保持键名不变
Mar 06 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
Feb 16 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
多线程(6) Sqlite(2) 多维数组(1) IDEA(2) Fragment(1) OpenLayer(1) Spring-Retry(1) EventBus(1) Spring Boot(5) android studio(3)
You might like
php preg_replace替换实例讲解
2013/11/04 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
javascript面向对象之二 命名空间
2011/02/08 Javascript
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
jquery 实现checkbox全选，反选，全不选等功能代码(奇数)
2012/10/24 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
JS delegate与live浅析
2013/12/21 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
python通过实例讲解反射机制
2019/10/17 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
python脚本后台执行方式
2019/12/21 Python
python实现三壶谜题的示例详解
2020/11/02 Python
python调用百度API实现人脸识别
2020/11/17 Python
Android interview questions
2016/12/25 面试题
中英双版中文教师求职信
2013/10/27 职场文书
注塑工厂厂长岗位职责
2013/12/02 职场文书
2014新年寄语
2014/01/20 职场文书
银行类自荐信
2014/02/04 职场文书
趣味活动策划方案
2014/02/08 职场文书
领导接待方案
2014/03/13 职场文书
领导班子整改方案
2014/10/25 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
财务工作失误检讨书
2015/02/19 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
经销商会议开幕词
2016/03/04 职场文书
python数字类型和占位符详情
2022/03/13 Python