第二阶段模块二（Kafka）

一、作业要求
二、实现步骤
- 1. 安装 Nginx 和 ngx_kafka_module

一、作业要求

使用Kafka做日志收集

需要收集的信息：**
1、用户ID（user_id）
2、时间（act_time）
3、操作（action，可以是：点击：click，收藏：job_collect，投简历：cv_send，上传简历：cv_upload）
4、对方企业编码（job_code）
1、HTML可以理解为拉勾的职位浏览页面
2、Nginx用于收集用户的点击数据流，记录日志access.log
3、将Nginx收集的日志数据发送到Kafka主题：tp_individual

架构：
HTML+Nginx+ngx_kafka_module+Kafka
提示：
学员需要自己下载nginx，配置nginx的ngx_kafka_module，自定义一个html页面，能做到点击连接就收集用户动作数据即可。
作业需提交：
1、html的截图+搭建的过程+结果截图以文档或视频演示形式提供。
2、作业实现过程的代码。
（注意：1、需要把搭建过程用文档写清楚，2、运行效果：在html上点击相应的连接或按钮，应该在Kafka中看到有消息流进来，效果最好以视频形式演示。）

二、实现步骤

1. 安装 Nginx 和 ngx_kafka_module

1.1 安装 librdkafka

# 在安装nginx前首先要确认系统中安装了gcc、pcre-devel、zlib-devel、openssl-devel、git
yum -y install gcc pcre-devel zlib-devel openssl openssl-devel git
# 需要先安装 librdkafka，否则会报下面这个错
## fatal error: librdkafka/rdkafka.h: No such file or directory
cd /opt/lagou/servers
git clone https://github.com/edenhill/librdkafka
# 下载完成后配置并编译
cd /opt/lagou/servers/librdkafka
./configure
make && make install

1.2 安装 Nginx 和 ngx_kafka_module

cd /opt/lagou/software
# 下载 nginx 安装包
wget https://nginx.org/download/nginx-1.19.6.tar.gz
# 解压安装包
tar -zxvf nginx-1.19.6.tar.gz -C ../servers/
cd /opt/lagou/servers
# 下载 ngx_kafka_module 安装包
git clone https://github.com/brg-liuwei/ngx_kafka_module
cd /opt/lagou/servers/nginx-1.19.6
# 配置
./configure --add-module=/opt/lagou/servers/ngx_kafka_module/
# 编译
make && make install
# 修改配置文件前需要先启动 zookeeper 和 Kafka，启动成功后创建 topic
kafka-topics.sh --create --zookeeper linux121:2181,linux122:2181,linux123:2181 --replication-factor 1 --partitions 3 --topic tp_individual
# 修改配置文件
vim /usr/local/nginx/conf/nginx.conf

# 启动 nginx
./sbin/nginx
# 启动 kafka 消费者窗口
kafka-console-consumer.sh --bootstrap-server linux121:9092,linux122:9092,linux123:9092 --from-beginning --topic tp_individual
# 测试
curl linux121:81/kafka/log -d "hello world" -v

测试成功

1.3 编写 html 文件

下载 jquery-3.5.1.min.js 文件，编写 html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拉勾教育</title>
</head>
<script src="./jquery-3.5.1.min.js"></script>
<body>
  <input id="user_id" type="text" value="zz-001" hidden="hidden">
  <input id="job_code" type="text" value="LG000001" hidden="hidden">
  <button id="click" class="action" act_type="click">点击</button>
  <button id="collect" class="action" act_type="job_collect">收藏</button>
  <button id="send" class="action" act_type="cv_send">投简历</button>
  <button id="upload" class="action" act_type="cv_upload">上传简历</button>
  <label id="label"></label>
  </body>
  <style>
      .action {
          height: 30px;
          font-family: 微软雅黑;
          font-size: 14px;
          color: rgb(255, 255, 255);
          border: none;
          font-weight: bold;
          border-radius: 4px;
      }
      #click {
          background-color: rgb(136, 50, 50);
      }
      #collect {
          background-color: rgb(211, 126, 69);
      }
      #send {
          background-color: rgb(204, 192, 85);
      }
      #upload {
          background-color: rgb(121, 155, 102);
      }
  </style>
  <script>
      $(document).ready(function () {
          $(".action").click(function () {
              var user_id = $("#user_id").val();
              var act_time = new Date();
              var action = this.getAttribute("act_type")
              var job_code = $("#job_code").val();
              var log = "{\"user_id\":\""+user_id+"\",\"act_time\":\""+act_time+"\",\"action\":\""+action+"\",\"job_code\":\""+job_code+"\"}";
              $.ajax({
                  url: "http://linux121:81/kafka/log",
                  type: "POST",
                  dataType: "json",
                  data: log
              })
          });
      })
  </script>
</html>