缘由：为了更好的体验swoole组件优良的协程Mysql客户端，实现更好的并发设计；写了一个小程序。
环境准备：
没有采用任何框架，只是使用了smarty模版，来渲染后端php响应的数据，在一个html文件中有如下实现
- html部分
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta http-equiv="Access-Control-Allow-Origin" content="*" /> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="generator" content="Jekyll v3.8.5"> <title>老板控制台</title> <link rel="canonical" href="https://v4ing.bootcss.com/docs/4.3/examples/dashboard/"> <!-- Bootstrap core CSS --> <link href="http://staticsrc.cn:8888/bootstrap.css" rel="stylesheet"> ......省略若干html代码 <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4"> <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3"> <h1 class="h2">添加新订单项目</h1><span id="hintword"></span> <div class="btn-toolbar mb-2 mb-md-0"> <div class="btn-group mr-2"> <button type="button" class="btn btn-sm btn-outline-secondary">Share</button> <button type="button" class="btn btn-sm btn-outline-secondary">Export</button> </div> <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle"> <span data-feather="calendar"></span> This week </button> </div> </div> <form> <div class="row"> <div class="col-md-4 mb-3"> <label for="item">项目编码(字母)</label> <input type="text" class="form-control" id="colname" placeholder="" value="" required> <div class="invalid-feedback"> Valid first name is required. </div> </div> <div class="col-md-4 mb-3"> <label for="colname">项目名称(中文描述)</label> <input type="text" class="form-control" id="comment" placeholder="" value="" required> <div class="invalid-feedback"> Valid last name is required. </div> </div> </div> <div class="row"> <div class="col-md-4 mb-3"> <label for="comment">明细分类</label> <select class="custom-select d-block w-100" id="mxname" required> <option value="incomedoc_mx">明细</option> <option value="incomedoc">表头</option> </select> <div class="invalid-feedback"> Please select a valid country. </div> </div> <div class="col-md-4 mb-3"> <label for="mxbz">分类标记</label> <select class="custom-select d-block w-100" id="mxbz" required> <option value="s">明细从表</option> <option value="m">明细主表</option> <option value="h">表头</option> </select> <div class="invalid-feedback"> Please provide a valid state. </div> </div> </div> <div class="row"> <div class="col-md-8 mb-3"> <label for="state"></label> <button class="btn btn-primary btn-lg btn-block" onclick="postclick();" type="button">提交</button> </div> </div> </form> <!-- <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas> --> </main> </div> </div> <script src="http://staticsrc.cn:8888/jquery-3.4.1.min.js"></script> <script src="../../jsconfig.js"></script> <script> function postclick() { $.getJSON("http://127.0.0.1:9501?jsoncallback=?", function(data) { $('#hintword').html(data); }); } </script> </body> </html>
原计划点击提交按钮后，由jquery函数postclick()将请求提交给一.php文件处理，这个php文件逻辑实现大致如下(伪代码)：
<?php go(function(){ //'若干逻辑实现.......' echo $request->get['jsoncallback'] //'若干逻辑实现.......' }); ?>
但是，非常不幸.......浏览器端接连提示500错误，但php文件单独执行，并没报错，看来swoole库无法通过这种常规的技术手段简单的嵌入html代码
- 正确的解决方案
受到一个小"骚"友的启发，（他用SwooleHttpServer实现了mysql的连接池），可我渴求成功的欲火难耐，于是准备试试SwooleHttpServer包裹Mysql客户端协程的处理方案
<?php require('../../../config.php'); use SwooleCoroutine as co; //echo $_POST['colname']; $result=''; $http = new SwooleHttpServer("http://ryanbackdb.com", 9501); $http->on('request', function ($request, $response) { //var_dump($request); $response->header('Access-Control-Allow-Origin', '*');#这行尤其重要，服务器必须允许跨域访问 $response->header('Content-Type', 'application/json'); $jsoncallback = htmlspecialchars($request->get['jsoncallback']);#获取jquery跨域路由中jsoncallback的部分 go(function () use($response,$jsoncallback){#逻辑部分可以根据实际业务需要编写 $json_data = '["customername1","customername2"]'; //$response->write($_callback."(".$data.")"); $response->write($jsoncallback . "(" . $json_data . ")");#返回处理后的结果 $response->end(); }); }); $http->start();
写好后就运行了，没错，这样一来，在9501端口上就运行了一个Swoolehttpserver服务器，我们根据实际需求可以继续丰富功能，例如根据路由的不同，编写不同的协程完成不同的功能，当然，这样一来就违反了同源策略，需要跨域处理
- 一个可以携带大量查询/提交参数的写法
<?php $http = new SwooleHttpServer("127.0.0.1",9501); $http->on('request',function ($request,$response){ $params = $request->get; var_dump($params); $response->header('Access-Control-Allow-Origin', '*'); $jsoncallbacks = htmlspecialchars($request->get['jsonpCallback']); echo "这里是回调函数的名字"; var_dump($jsoncallbacks); go(function () use($jsoncallbacks,$response){ $json_data = '["customername1","customername2"]'; $response->write($jsoncallbacks . "(" . $json_data . ")"); $response->end(); }); }); $http->start(); ?>
function postclick() { $.ajax({ method:"POST", url:"http://127.0.0.1:9501/", data:{'colname':$("#colname").val(),'comment':$("#comment").val(),'mxname':$("#mxname").val(),'mxbz':$("#mxbz").val()},//好像不支持formdata，浏览器控制台，后端日志不报错，但是后台程序无法获取提交的数据 dataType: "jsonp", jsonp: "jsonpCallback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback) jsonpCallback: "duwa",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名 success:data =>{ console.log("这里的data乃是回调函数的名字： "+data) }, error:error =>{ console.log(`error为${error.data}`) } }) }