天天看點

利用workman實作前端下單成功,背景彈出消息提醒功能

首先下載下傳workman 然後啟動 https://www.workerman.net/web-sender

輕按兩下下圖示注檔案

利用workman實作前端下單成功,背景彈出消息提醒功能

啟動成功如下圖

利用workman實作前端下單成功,背景彈出消息提醒功能

web端代碼 (我這裡用到了layui 的notice元件)

<script src='/admin/layuiadmin/socket.js'></script>
<script>
    layui.config({
        base: '/admin/layuiadmin/' //靜态資源所在路徑
    }).extend({
        index: 'lib/index' //主入口子產品
    }).use(['notice', 'index'],function () {
        var notice = layui.notice;
        var layer = layui.layer;
        var $ = layui.jquery;

        // 初始化配置,同一樣式隻需要配置一次,非必須初始化,有預設配置
        notice.options = {
            closeButton: true,//顯示關閉按鈕
            debug: false,//啟用debug
            positionClass: "toast-top-right",//彈出的位置,
            showDuration: "300",//顯示的時間
            hideDuration: "1000",//消失的時間
            timeOut: "2000",//停留的時間
            extendedTimeOut: "1000",//控制時間
            showEasing: "swing",//顯示時的動畫緩沖方式
            hideEasing: "linear",//消失時的動畫緩沖方式
            iconClass: 'toast-info', // 自定義圖示,有内置,如不需要則傳空 支援layui内置圖示/自定義iconfont類名
            onclick: null, // 點選關閉回調
        };

        // 連接配接服務端,workerman.net:2120換成實際部署web-msg-sender服務的域名或者ip
        var socket = io('127.0.0.1:2120'); //http://www.tp5_test.com換成自己的域名或者ip
        // uid可以是自己網站的使用者id,以便針對uid推送以及統計線上人數,這個ID可以随便寫
        uid = '{{admin_info()["id"]}}';
        // socket連接配接後以uid登入
        socket.on('connect', function () {
            socket.emit('login', uid);
        });
        <!-- 後端推送來消息時-->
        socket.on('new_msg', function (msg) {
            console.log(msg+'msg');

            notice.success("API調用發來的消息!");
        });
        // 後端推送來線上資料時
        socket.on('update_online_count', function (online_stat) {
            console.log(online_stat);
        });
    });
</script>
           

服務端代碼

public function send_workman($id)
    {
        $to_uid = ''; //和頁面的uid一緻,不填寫也可以
        // 推送的url位址,使用自己的伺服器位址
        $push_api_url = "127.0.0.1:2121";
        $post_data = array(
            "type" => "publish",
            "content" => $id,
            "to" => $to_uid,
        );
        $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);
    }
           

建立路由通路檢視效果

利用workman實作前端下單成功,背景彈出消息提醒功能

大概就是這個意思,描述的不是很清楚