1.首先通过 composer 安装 think-worker、think-view
composer require topthink/think-worker
composer require topthink/think-view
安装成功后在项目的config目录会新增3个配置文件
2.修改woker.php中监听的端口
return [// 扩展自身需要的配置'host' => '127.0.0.1', // 监听地址'port' => 8000, // 监听端口'root' => '', // WEB 根目录 默认会定位public目录'app_path' => '', // 应用目录 守护进程模式必须设置(绝对路径)'file_monitor' => false, // 是否开启PHP文件更改监控(调试模式下自动开启)'file_monitor_interval' => 2, // 文件监控检测时间间隔(秒)'file_monitor_path' => [], // 文件监控目录 默认监控application和config目录// 支持workerman的所有配置参数'name' => 'thinkphp','count' => 4,'daemonize' => false,'pidFile' => '', ];
3.在项目根目录publick下新建文件 wokerman.php。
<?php// +----------------------------------------------------------------------// | ThinkPHP [ WE CAN DO IT JUST THINK ]// +----------------------------------------------------------------------// | Copyright (c) 2006-2019 http://thinkphp.cn All rights reserved.// +----------------------------------------------------------------------// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )// +----------------------------------------------------------------------// [ wokerman启动文件 和整个项目无关联]namespace think;use Workerman\Worker;require_once __DIR__ .'/../vendor/workerman/workerman/Autoloader.php';// 创建一个Worker监听8000端口,使用http协议通讯 $http_worker = new Worker("http://127.0.0.1:8000");// 启动4个进程对外提供服务 $http_worker->count= 4;$http_worker->onConnect = function ($connection) {echo 'connect success!';$connection->onWebSocketConnect = function ($connection) {$connection->maxLifetime = 1800;}; };// 接收到浏览器发送的数据时回复hello world给浏览器 $http_worker->onMessage =function($connection,$data) { // 向浏览器发送hello world$connection->send('服务端返回'.$data); };//断开链接 $http_worker->onClose = function () {echo 'connect closed!'; };// 运行worker Worker::runAll();
在cmd窗口运行php文件
4.新建一个路由测试前端连接
Route::get('wokerman', 'index/wokerman');
在Index控制器编写测试方法
public function wokerman(){return View::fetch();}
5.创建前端模板文件,目录为
模板文件代码如下;
<!DOCTYPE html> <html> <head><title>HTML5</title><meta charset="utf-8" /><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script>$(function() {var socket;var readyState = ["connecting", "connected", "closing", "closed"];/* 打开连接事件 */$("button:eq(0)").click(function() {try {/* 连接 */socket = new WebSocket("ws://127.0.0.1:8000");/* 绑定事件 */socket.onopen = function() {$("#msg").html("连接成功...");};socket.onmessage = function(e) {$("#msg").html($("#msg").html() + "<br />" + e.data);};socket.onclose = function() {$("#msg").html($("#msg").html() + "<br />关闭连接...");};} catch(exception) {$("#msg").html($("#msg").html() + "<br />有错误发生");}});/* 发送数据事件 */$("button:eq(1)").click(function() {/* 检查文本框是否为空 */if($("#data").val() == "") {alert("请输入数据!");return;}try {socket.send($("#data").val());$("#msg").html($("#msg").html() + "<br />发送数据:" + $("#data").val());} catch (exception) {$("#msg").html($("#msg").html() + "<br />发送数据出错");}/* 清空文本框 */$("#data").val("");});/* 断开连接 */$("button:eq(2)").click(function() {socket.close();});});</script> </head><body> <h1>WebSocket示例</h1> <input type="text" id="data" /> <button>打开连接</button> <button>发送数据</button> <button>关闭连接</button> <p id="msg"></p> </body> </html>
6.测试前端连接wokerman
前端:
后端: