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
前端:
后端:
标签:function,socket,thinkphp6,connection,html,测试,msg,Workerman,data From: https://www.cnblogs.com/wjs2019/p/18289547