Swoole ThinkPHP5.1实现图文直播推广功能

Swoole ThinkPHP5.1实现图文直播推广功能

通过前端ajax讲数据通过控制器发送到客户端

首先时Live.php接收数据

<?php
namespace app\admin\controller;
use app\common\lib\Util;
use app\common\lib\redis\Predis;
class Live
{
    public function push() {

        if(empty($_GET)) {
            return Util::show(config('code.error'), 'error');
        }  
        $teams = [
            1 => [
                'name' => '马刺',
                'logo' => '/live/imgs/team1.png',
            ],
            4 => [
                'name' => '火箭',
                'logo' => '/live/imgs/team2.png',
            ],
        ];

        $data = [
            'type' => intval($_GET['type']),
            'title' => !empty($teams[$_GET['team_id']]['name']) ?$teams[$_GET['team_id']]['name'] : '直播员',
            'logo' => !empty($teams[$_GET['team_id']]['logo']) ?$teams[$_GET['team_id']]['logo'] : '',
            'content' => !empty($_GET['content']) ? $_GET['content'] : '',
            'image' => !empty($_GET['image']) ? $_GET['image'] : '',
        ];
        // 获取连接的用户
        // 赛况的基本信息入库   2、数据组织好  push到直播页面
        $taskData = [
            'method' => 'pushLive',
            'data' => $data
        ];
        $_POST['ws_server']->task($taskData);
        return Util::show(config('code.success'), 'ok');
    }

}

通过taskData);服务端通过调度任务来发送信息

在ws.php中

    public function onTask($serv,$taskId,$workerId,$data){
        //分发task任务机制 不同的任务走不同的逻辑
        $obj = new app\common\lib\task\Task;
        $method = $data['method'];
        $flag = $obj->$method($data['data'],$serv);
        return $flag;
    }

实例$obj = new app\common\lib\task\Task;里的对应方法

Task.php文件如下

<?php
namespace app\common\lib\task;
use app\common\lib\ali\Sms;
use app\common\lib\redis\Predis;
use app\common\lib\Redis;
class Task {
    /**
     * 通过task机制发送赛况实时数据给客户端
     * @param $data
     * @param $serv swoole server对象
     */
    public function pushLive($data, $serv='false') {
        $clients = Predis::getInstance()->sMembers(config('redis.live_game_key'));
        foreach($clients as $fd) {
            $serv->push($fd,json_encode($data));
        }
    }
}

服务端通过push方法讲数据发送到客户端 客户端前端html代码通过引用live.js来实现数据接收

live.js文件代码如下

    var wsUrl = "ws://127.0.0.1:8812";      
    var websocket = new WebSocket(wsUrl);
    websocket.onopen = function(evt){
        console.log("con-swoole-success");
    }
    //实例化对象
    websocket.onmessage = function(evt){
        push(evt.data);
        console.log("onmessage()-con-swoole-return-data:"+evt.data);
    }
    //实例化clse时间
    websocket.onclose = function(evt){
        console.log("con-swoole-close");
    }
    websocket.onerror = function(evt,e){
        console.log("error:"+evt.data);
    }
    function push(data){
        data = JSON.parse(data);
        //定义一个数据结构
        html = '<div class="frame">';
        html += '<h3 class="frame-header">';
        html += '<i class="icon iconfont icon-shijian"></i>第'+data.type+'节 02:30';
        html += '</h3>';
        html += '<div class="frame-item">';
        html += '<span class="frame-dot"></span>';
        html += '<div class="frame-item-author">';
        if(data.logo){
            html += '<img src="'+data.logo+'" width="20px" height="20px" />';
        }
        html += data.title;
        html += '</div>';
        html += '<p>'+data.content+'</p>';
        if(data.image){
            html += '<img src="'+data.image+'" width="40%"/>';
        }
        html += '</div>';
        html += '</div>';
        $('#match-result').prepend(html);
    }