tp5框架整合gatewayworker,gatewayclient推送数据进行网页数据交互

官方文档地址:http://doc2.workerman.net/work-with-other-frameworks.html

看着文档一步一步做是没问题的,但是官方文档真正的打通任督二脉还得理解一下其中的原理

我的上一篇博客详细的介绍了gatewayworker的安装方式,以及我遇到的各种坑,填坑的过程真是刺激,哈哈哈

1.首先:安装了gatewayworker的直接安装gatewayclient,我是通过composer安装的,真的很是方便

composer安装命令:进入到项目的根目录,输入下面的命令,回车,等待下载。

composer require workerman/gatewayclient

 2.其次:安装完成以后,在服务器中启动start.php

进入项目的根目录输入如下命令:start.php &    ( 后面加入取地址符,表示在后台运行),或者还可以输入  start.php -d (守护进程)

3.接着:启动后,按照官方文档编辑后台服务代码:这个是我将两个方法整合放在了一个类文件里面

<?php
//加载GatewayClient。关于GatewayClient参见本页面底部介绍
//require_once '/../../../vendor/workerman/GatewayClient/Gateway.php';
// GatewayClient 3.0.0版本开始要使用命名空间
namespace app\admin\controller;

use GatewayClient\Gateway;
use think\Controller;
use app\admin\controller\Bigscreengetdata;

class Gatewayserver extends Controller{

    public function _initialize()
    {
        // 设置GatewayWorker服务的Register服务ip和端口,请根据实际情况改成实际值(ip不能是0.0.0.0)
        Gateway::$registerAddress = '127.0.0.1:1238';
    }

    /*绑定页面请求的client_id*/
    public function bind(){
        $param = input('param.');
        $client_id = $param['client_id'];
        // client_id与uid绑定
        Gateway::bindUid($client_id, $param['uid']);
        // 加入某个群组(可调用多次加入多个群组)
        // Gateway::joinGroup($client_id, $param['groupid']);
        $user_num = Gateway::getUidByClientId($client_id);
        $this -> success('绑定成功!','',$user_num);
    }

   /*发送数据,注意,这里是要转成json字符串,才可以发送成功的,不转是发送不成功的哦*/
    public function sendmessage(){
        //获取数据
        $bigscreen = new Bigscreengetdata();
        $data = $bigscreen -> firstgetdata();
        $message = json_encode($data);
        //发送数据
        Gateway::sendToAll($message);
//        // 向任意uid的网站页面发送数据
//        Gateway::sendToUid($uid, $message);
//        // 向任意群组的网站页面发送数据
//        Gateway::sendToGroup($group, $message);
    }

}

4.紧接着:服务文件编写好以后,编写前端HTML以及js代码

要注意的是:前端代码中实例化WebSocket时,用的是ws,后台startgateway.php中的协议应该是

websocket,而不是tcp,前后端要一致,这样才能连通。

 下面是前端代码,可以直接复制的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket客户2</title>
</head>
<body>
<div class="content"></div>
<script src="__JS__/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">

    var webSocket = null;
    //初始化
    initSocket();
    function initSocket() {
        if (!"WebSocket" in window) {
            console.log("您的浏览器不支持 WebSocket!");
            return;
        }
        //实例化websocket
        webSocket = new WebSocket("ws://"+document.domain+":8282");
        webSocket.onopen = handleSend;
        webSocket.onmessage = handleMessage;
        webSocket.onclose = handleClose;
        webSocket.onerror = handleError;
    }

    // 向服务器端发送数据
    function handleSend() {
        // Web Socket 已连接上,使用 send() 方法发送数据
        webSocket.send('大家好,这是一条广播');
    }

    // 处理服务器端发送过来的数据
    function handleMessage(evt) {
        // json数据转换成js对象44
        var data,type;
         data = eval("("+evt.data+")");
         type = data.type || '';
        console.log(data);
        //用户信息
        var userid='member_1647232';
        var ajaxUrl="{:url('Gatewayserver/bind')}";
        var groupid='30';

        switch(type){
            // Events.php中返回的init类型的消息,将client_id发给后台进行uid绑定
            case 'init':
                // 利用jquery发起ajax请求,将client_id发给后端进行uid绑定
                $.post(ajaxUrl, {uid:userid,client_id:data.client_id,groupid:groupid,type:'member'}, function(res){
                    console.log(res) ;
                }, 'json');
                break;
            // 当mvc框架调用GatewayClient发消息时将数据显示出来
            default :
                $('.content').text(data.message);
        }
    }

    // 处理后台服务连接关闭事件
    function handleClose() {
        console.log("连接已关闭...");
    }

    // 处理WebSocket错误
    function handleError() {
        console.log("WebSocketError!");
    }

    //连接测试用
    function testing() {
        //每隔3秒钟向服务器发送数据,此处仅用于测试
        var items = ['张三','李四','小二黑','阿杜','单工','大理寺','花荣','刘备','诸葛亮'];
        setInterval(function () {
            var item = items[Math.floor(Math.random()*items.length)];
            webSocket.send(item);
        },3000);
    }

</script>
</body>
</html>

5.接着:代码写好后,上传服务器,通过url访问页面,要是访问时连接不了,看看阿里云的实例,安全组中有没有对你要的端口开放,要是没有开放,将端口号加入安全组,接着访问,谷歌浏览器F12,看看,出现如下,说明连接成功

6.连接成功后,利用gatewayclient连接gatewayworker,主动推送数据给前端页面。

再具体点就是浏览器访问那会写好的server类文件中的发送数据方法,将数推送到前端页面。

7.访问推送成功后,写定时任务,让变成自动推送的,这个方法有很多,具体看自己的业务需求,我们的做的是大屏展示,需要几秒钟更新一次,所以我选择了写执行脚本,脚本如下:

#! /bin/sh

while :
do
curl http://********/Gatewayserver/sendmessage  //写上自己的方法访问路径

sleep 5
done
 

8.编辑好脚本后,将权限改为可执行权限,命令执行这个文件,就会实现每隔5秒推送数据至前台页面

从上图中可以看出,每次推送的数据都不一样,将推送过来的数据显示在页面上,好了,截至现在为止,这个主动推送功能已经完成。

为了避免服务器重启,将下面的命令加入开机启动文件中,以后就后顾无忧啦 !

nohup /home/wwwroot/highway/websocket1.sh >/dev/null 2>&1&
 

猜你喜欢

转载自blog.csdn.net/hechenhongbo/article/details/102567497