1.安装thinkphp5.0以上版本包含workerman框架
2.composer安装composer require workerman/phpsocket.io
3.vue中调用需要加载weapp.socket.io
4.注意问题
vue中尝试过用原生websocket连接(ws://IP:port)但编译成小程序或者app时并没有很好的兼容性由于各种问题 相比之下socketio的兼容性明显更好一些
phpsocketio和workerman可以直接集成在thinkphp5.0以上的版本中 workerman中有很多如定时器Timer之类的方法可以直接调用
新增启动服务文件server.php,在项目根目录
#!/usr/bin/env php <?php define('APP_PATH', __DIR__ . '/application/'); define('BIND_MODULE','socketio/Server/index'); // 加载框架引导文件 require __DIR__ . '/thinkphp/start.php';
创建服务控制器
├─application 应用目录
│ ├─socketio 新创建目录
│ │ ├─controller
│ │ │ ├─Psserver.php 启动文件
创建api触发socketio
public function api() { // 推送的url地址,使用自己的服务器地址 $push_api_url = "http://0.0.0.0:5880";//这里同样不需要更改IP。只是端口一定需要和server.php onworker的一样 $post_data = array( "type" => "publish", "content" => "这个是推送的测试数据", ); $ch = curl_init (); curl_setopt ( $ch, CURLOPT_URL, $push_api_url ); curl_setopt ( $ch, CURLOPT_POST, 1 ); curl_setopt ( $ch, CURLOPT_HEADER, 0 ); curl_setopt ( $ch, CURLOPT_RETURNTRANSFER, 1 ); curl_setopt ( $ch, CURLOPT_POSTFIELDS, $post_data ); curl_setopt ($ch, CURLOPT_HTTPHEADER, array("Expect:")); $return = curl_exec ( $ch ); curl_close ( $ch ); var_export($return); }
客户端
<input type="text" name="data" id="data"/> <button id="btn">发送</button> <script src='https://cdn.bootcss.com/socket.io/2.0.3/socket.io.js'></script> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <script> // 如果服务端不在本机,请把127.0.0.1改成服务端ip var socket = io('http://IP:2346'); // 当连接服务端成功时触发connect默认事件 socket.on('connect', function(){ console.log('connect success'); }); $('#btn').click(function(){ var data = $('#data').val(); // 触发服务端的chat message事件 socket.emit('chat message', data); // 服务端通过emit('chat message from server', $msg)触发客户端的chat message from server事件 socket.on('chat message from server', function(data){ console.log('get message:' + data + ' from server'); }); }); // 后端推送来在线数据时 socket.on('update_online_count', function(online_stat){ console.log(online_stat); }); // 后端推送来消息时 socket.on('new_msg', function(msg){ console.log("收到消息:"+msg); }); </script>
服务器端
namespace appsocketiocontroller; //use thinkworkerServer; use PHPSocketIOSocketIO; use WorkermanWorker; use WorkermanLibTimer; // 引入WM框架的类库 use thinkcachedriverRedis; use thinkDb;
class Psserver { public function index() { $io = new SocketIO(2346);//socket的端口 $io->on('connection', function ($socket) use ($io) { Timer::add(2, function ()use ($io){ $data = db('ws_test')->order(['addtime'=>'desc'])->find(); $io->emit('price',json_encode($redis_data)); }); }); Worker::runAll(); } }
php psio_server.php start php psio_server.php start 启动 php psio_server.php stop 停止 php psio_server.php restart 重启 php psio_server.php status 当前服务状态
php psio_server.php connections 当前连接用户连接信息
vue端接收
import io from 'weapp.socket.io'; export default { data() { return { text:'11111', }; }, onLoad: function(e) { this.send(); }, methods: { send() { const socket = (this.socket = io('http://IP:2346/')); // 连接成功 socket.on('connect', () => { console.log('连接成功'); }); // 连接错误 socket.on('connect_error', d => { console.log('连接失败', d); }); // 接受到新消息 socket.on('price', d => { let data = JSON.parse(d); this.text =data.price; console.log(data.price); }); } } }