实战！Nginx+Kafka实现页面采集

头像
爱编码的coder
    阅读 5 分钟

    0.架构简介

    模拟线上的实时流，比如用户的操作日志，采集到数据后，进行处理，暂时只考虑数据的采集，使用Html+Jquery+Nginx+Ngx_kafka_module+Kafka来实现，其中Ngx_kafka_module 是开源的专门用来对接Nginx和Kafka的一个组件。

    1.需求描述

    1.1 用html和jquery 模拟用户请求日志

    其中包括下面下面几项：

    用户id:user_id, 访问时间:act_time, 操作: (action,包括click,job_collect,cv_send,cv_upload)

    企业编码job_code

    1.2 用Nginx接受1.1中的请求

    1.3 接受完请求后，使用ngx_kafka_module将数据发送到Kafka的主题tp_individual 中。

    1.4 在kafka中使用一个消费者消费该主题，观察

    2.搭建步骤

    2.1 Kafka安装

    由于使用现成的已安装好的docker-kafka镜像，所以直接启动即可.

    2.2 安装Nginx，并启动

    $ cd /usr/local/src
$ git clone git@github.com:edenhill/librdkafka.git
# 进入到librdkafka，然后进行编译
$  cd librdkafka
$  yum install -y gcc gcc-c++ pcre-devel zlib-devel
$  ./configure
$  make && make install

$ yum -y install make zlib-devel gcc-c++ libtool openssl openssl-devel
$ cd /opt/hoult/software
# 1.下载
$ wget http://nginx.org/download/nginx-1.18.0.tar.gz
# 2.解压
$ tar -zxf nginx-1.18.0.tar.gz -C /opt/hoult/servers
# 3\. 下载模块源码
$ cd /opt/hoult/software
$ git clone git@github.com:brg-liuwei/ngx_kafka_module.git
# 4\. 编译
$ cd /opt/hoult/servers/nginx-1.18.0
$ ./configure --add-module=/opt/hoult/software/ngx_kafka_module/
$ make && make install 
# 5.删除Nginx安装包
$ rm /opt/hoult/software/nginx-1.18.0.tar.gz
# 6.启动nginx
$ cd /opt/hoult/servers/nginx-1.18.0
$ nginx

    3.相关配置

    3.1 nginx配置nginx.conf

    #pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    kafka;
    kafka_broker_list linux121:9092;

    server {
        listen       9090;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        #------------kafka相关配置开始------------
        location = /kafka/log {
                #跨域相关配置
                add_header 'Access-Control-Allow-Origin' $http_origin;
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

                kafka_topic tp_individual;
        }

        #error_page  404              /404.html;
    }

}

    3.2 启动kafka 生产者和消费者

    # 创建topic
kafka-topics.sh --zookeeper linux121:2181/myKafka --create --topic tp_individual --partitions 1 --replication-factor 1
# 创建消费者
kafka-console-consumer.sh --bootstrap-server linux121:9092 --topic tp_individual --from-beginning
# 创建生产者测试
kafka-console-producer.sh --broker-list linux121:9092 --topic tp_individual 
复制代码

    3.3 编写Html + Jquery代码

    <!DOCTYPE html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
        <title>index</title>
        <!-- jquery cdn, 可换其他 -->
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    </head>
    <body>
        <input id="click" type="button" value="点击" onclick="operate('click')" />
        <input id="collect" type="button" value="收藏" onclick="operate('job_collect')" />
        <input id="send" type="button" value="投简历" onclick="operate('cv_send')" />
        <input id="upload" type="button" value="上传简历" onclick="operate('cv_upload')" />
    </body>

    <script>

        function operate(action) {

            var json = {'user_id': 'u_donald', 'act_time': current().toString(), 'action': action, 'job_code': 'donald'};

            $.ajax({
                url:"http://linux121:8437/kafka/log",
                type:"POST" ,
                crossDomain: true,
                data: JSON.stringify(json),
                // 下面这句话允许跨域的cookie访问
                xhrFields: {
                    withCredentials: true
                },
                success:function (data, status, xhr) {

                    // console.log("操作成功：'" + action)
                },
                error:function (err) {

                    // console.log(err.responseText);
                }
            });
        };

        function current() {
            var d   = new Date(),
                str = '';
            str += d.getFullYear() + '-';
            str += d.getMonth() + 1 + '-';
            str += d.getDate() + ' ';
            str += d.getHours() + ':';
            str += d.getMinutes() + ':';
            str += d.getSeconds();
            return str;
        }
    </script>

</html>

    将a.html放在nginx的目录下，浏览器访问192.168.18.128:9090

    4.演示

    • 4.1 首先启动zk集群，kafka集群
    • 4.2 然后创建topic, 创建消费者，创建生产者，测试topic
    • 4.3 启动nginx访问页面，进行点击，观察消费者状态

    整个过程如下图：

    查看个人资料，可以关注更多。

    作者：Hoult丶吴邪
    链接：https://juejin.cn/post/690304...
    来源：掘金

    最后

    喜欢文章的小伙伴可以点个赞哦~，最后，照旧安利一波我们的公众号：「终端研发部」，目前每天都会推荐一篇优质的技术相关的文章，主要分享java相关的技术与面试技巧， 学习java不迷路。

    javakafkanginx程序员编程
    本文系转载，阅读原文
    https://juejin.cn/post/6903046665821749256
    爱编码的coder
    1.2k 声望78 粉丝
    « 上一篇
    27条好赚钱副业的忠告：自己也能月入2万+！
    下一篇 »
    腾讯 Code Review 规范出炉！你还敢乱写代码？？

    引用和评论

    推荐阅读
    头像
    Github重磅教程！从0到1，边学边实战！

    爱编码的coder阅读 1.8k

    头像
    疫情特殊时期，致 SegmentFault 思否全体员工的一封公开信

    波波Nadia赞 13阅读 21.1k评论 9

    头像
    在Java程序中监听mysql的binlog

    huan1993赞 10阅读 1.9k

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.4k评论 3

    头像
    Bitmap 和 布隆过滤器傻傻分不清？你这不应该啊

    程序员小富赞 8阅读 1.5k评论 1

    头像
    Just for fun——迅速写完快速排序

    ufdf赞 3阅读 2.6k

    头像
    Spring 实现 3 种异步流式接口，干掉接口超时烦恼

    程序员小富赞 5阅读 1.6k

    0 条评论
    得票最新