前置条件
需要先完成对kafka的搭建
环境介绍
服务器: 阿里云Centos7.4
kafka版本: kafka_2.12-1.0.2
nginx: nginx-1.15.6
操作流程
1.安装编译kafka的c客户端源码
clone kafka的c客户端源码
cd /usr/local
git clone https://github.com/edenhill/librdkafka
编译
cd librdkafka
yum install -y gcc gcc-c++ pcre-devel zlib-devel
#编译
./configure
make && make install
2.安装nginx整合kafka的插件
clone nginx的kafka的插件ngx_kafka_module
cd /usr/local
git clone https://github.com/brg-liuwei/ngx_kafka_module
编译nginx添加插件
cd /usr/local/src/nginx-1.15.6
./configure --add-module=/usr/local/ngx_kafka_module/
#编译
make && make install
#查看模块是否安装上
/usr/local/nginx/sbin/nginx -V
如果启动nginx,报错,找不到kafka.so.1的文件
error while loading shared libraries: librdkafka.so.1: cannot open shared object file: No such file or directory
加载so库
echo "/usr/local/lib" >> /etc/ld.so.conf
ldconfig
nginx配置文件
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#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地址信息
kafka_broker_list 127.0.0.1:9092;
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location = /operation {
#主题 这里设置为tp_individual
kafka_topic tp_individual;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
测试
访问页面进行操作按钮点击
kafka开启消费者测试结果
#开启消费者测试结果
kafka-console-consumer.sh --bootstrap-server localhost:9092 - -topic tp_individual
html页面代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>职位浏览</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="comm/bootstrap-4.4.1-dist/css/bootstrap.css">
<link rel="stylesheet" href="comm/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/footer.css">
<style>
a:hover{
text-decoration: none;
}
a:focus,a:active{
outline: 0;
}
/* 订单图片大小 */
.money-icon{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px;
text-align: center;
line-height: 20px;
background-color: orange;
color: white;
font-size: 0.7rem;
font-style: normal;
}
.zhifu-img{
height: 80px;
}
</style>
</head>
<body>
<div class="container-fluid mt-5 pt-5">
<div class="row">
<div class="col-lg-2 position-fixed text-center overflow-auto" style="height: 570px;">
<div>
<img class="img-thumbnail" src="img/mps.jpg" alt="">
</div>
<p class="h6 mt-3"><span id="user_id">10010</span><span >喵帕斯!</span你好</p>
</div>
<div class="col-lg-10 offset-2 border-left">
<div class="row">
<div class="col-lg-12">
<a name="myorder"></a>
<p class="h6 mt-3 pb-2 border-bottom" style="padding-top: 100px;">职位浏览</p>
</div>
<div class="col-lg-12 ">
<div class="row">
<div class="col-lg-4">
<strong>职位</strong>
</div>
<div class="col-lg-1">
<strong>企业编码</strong>
</div>
<div class="col-lg-1">
<strong>薪资</strong>
</div>
<div class="col-lg-1">
<strong>操作</strong>
</div>
</div>
</div>
<div class="col-lg-12" id="div_order">
<div class="bg-light p-3 ">
<strong>阿里巴巴</strong>
<span class="ml-5">信息安全,物联网 不需要融资 北京·万寿寺</span>
<span></span>
</div>
<div class="row border border-top-0 align-items-center ml-0 mr-0">
<div class="col-lg-4">
<span>J6673</span>
<img src="img/aliaba.png" height="80" alt="">
<span>JAVA开发工程师</span>
</div>
<div class="col-lg-1">
A10101
</div>
<div class="col-lg-1">
<i class="fa fa-rmb">20-30K</i>
</div>
<div class="col-lg-3">
<a href="javascript:void(0);" onclick="operation('A10101','click')">点击|</a>
<a href="javascript:void(0);" onclick="operation('A10101','job_collect')">收藏|</a>
<a href="javascript:void(0);" onclick="operation('A10101','cv_send')">投简历|</a>
<a href="javascript:void(0);" onclick="operation('A10101','cv_upload')">上传简历</a>
</div>
</div>
</div>
<div class="col-lg-12" id="div_order">
<div class="bg-light p-3 ">
<strong>阿里巴巴</strong>
<span class="ml-5">信息安全,物联网 不需要融资 北京·万寿寺</span>
<span></span>
</div>
<div class="row border border-top-0 align-items-center ml-0 mr-0">
<div class="col-lg-4">
<span>J6673</span>
<img src="img/aliaba.png" height="80" alt="">
<span>JAVA开发工程师</span>
</div>
<div class="col-lg-1">
A10102
</div>
<div class="col-lg-1">
<i class="fa fa-rmb">10-15K</i>
</div>
<div class="col-lg-3">
<a href="javascript:void(0);" onclick="operation('A10102','click')">点击|</a>
<a href="javascript:void(0);" onclick="operation('A10102','job_collect')">收藏|</a>
<a href="javascript:void(0);" onclick="operation('A10102','cv_send')">投简历|</a>
<a href="javascript:void(0);" onclick="operation('A10102','cv_upload')">上传简历</a>
</div>
</div>
</div>
<div class="col-lg-12" id="div_order">
<div class="bg-light p-3 ">
<strong>阿里巴巴</strong>
<span class="ml-5">信息安全,物联网 不需要融资 北京·万寿寺</span>
<span></span>
</div>
<div class="row border border-top-0 align-items-center ml-0 mr-0">
<div class="col-lg-4">
<span>J6673</span>
<img src="img/aliaba.png" height="80" alt="">
<span>JAVA开发工程师</span>
</div>
<div class="col-lg-1">
A1333
</div>
<div class="col-lg-1">
<i class="fa fa-rmb">11-20K</i>
</div>
<div class="col-lg-3">
<a href="javascript:void(0);" onclick="operation('A1333','click')">点击|</a>
<a href="javascript:void(0);" onclick="operation('A1333','job_collect')">收藏|</a>
<a href="javascript:void(0);" onclick="operation('A1333','cv_send')">投简历|</a>
<a href="javascript:void(0);" onclick="operation('A1333','cv_upload')">上传简历</a>
</div>
</div>
</div>
<div class="col-lg-12" id="div_order">
<div class="bg-light p-3 ">
<strong>阿里巴巴</strong>
<span class="ml-5">信息安全,物联网 不需要融资 北京·万寿寺</span>
<span></span>
</div>
<div class="row border border-top-0 align-items-center ml-0 mr-0">
<div class="col-lg-4">
<span>J6673</span>
<img src="img/aliaba.png" height="80" alt="">
<span>JAVA开发工程师</span>
</div>
<div class="col-lg-1">
B34D21
</div>
<div class="col-lg-1">
<i class="fa fa-rmb">20-30K</i>
</div>
<div class="col-lg-3">
<a href="javascript:void(0);" onclick="operation('B34D21','click')">点击|</a>
<a href="javascript:void(0);" onclick="operation('B34D21','job_collect')">收藏|</a>
<a href="javascript:void(0);" onclick="operation('B34D21','cv_send')">投简历|</a>
<a href="javascript:void(0);" onclick="operation('B34D21','cv_upload')">上传简历</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="comm/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
<script src="js/header.js" type="text/javascript"></script>
</body>
<script>
function operation(job_code,action) {
$.ajax({
url: 'http://47.98.199.254/operation',
type: 'POST',
contentType: 'application/json;charset=utf-8',
dataType: 'json',
data:{
user_id:$("#user_id").html(),
act_time: new Date().getTime(),
action:action,
job_code:job_code
},
success: function (data) {
}
})
}
</script>
</html>