文章首发于个人公号:「阿拉平平」
Papercups[1] 是一款开源的实时聊天 Web 应用,用 Elixir 开发。你可以将其理解为一个客服平台,配合聊天组件,可以快速地为网站添加客服功能。本文将介绍 Papercups 的安装和使用方法。
下载安装
从文档来看,官方推荐使用 asdf 安装 Papercups,不过需要提前安装 PostgreSQL、Node、asdf 以及 Erlang 插件,整个过程比较繁琐。
权衡之下,我选择容器来部署。因此在部署前,需要在服务器上安装好 docker 和 docker-compose。
编排文件
目前仓库里中有多个编排文件,这里我选取正式版本来向大家演示。将仓库中的 docker-compose.prod.yml
保存为 docker-compose.yml
,根据实际情况修改以下内容:
version: "3.2"
services:
papercups:
image: papercups/papercups:latest
ports:
- "3000:3000"
- "4000:4000"
command: sh -c "sleep 10 && /entrypoint.sh db createdb && /entrypoint.sh db migrate && echo 'running' && /entrypoint.sh run"
depends_on:
- db
environment:
DATABASE_URL: "ecto://postgres:postgres@db/postgres"
# 可以修改密钥
SECRET_KEY_BASE: "dvPPvOjpgX2Wk8Y3ONrqWsgM9ZtU4sSrs4l/5CFD1sLm4H+CjLU+EidjNGuSz7bz"
BACKEND_URL: "localhost"
MIX_ENV: "prod"
REQUIRE_DB_SSL: "false"
REACT_APP_FILE_UPLOADS_ENABLED: 1
# 填入自己的域名或服务器的 IP
REACT_APP_URL: "app.papercups.io"
db:
image: postgres:alpine
container_name: papercups
ports:
- "5432:5432"
environment:
POSTGRES_PASSWORD: postgres
启动服务
修改好编排文件后,在当前目录运行以下命令启动服务:
docker-compose up -d
服务启动后会拉起两个容器:papercups 和 root_papercups_1,检查下是否都运行正常:
[root@localhost ~]# docker-compose ps
Name Command State Ports
----------------------------------------------------------------------------------------------------------------------------------------------
papercups docker-entrypoint.sh postgres Up 0.0.0.0:5432->5432/tcp,:::5432->5432/tcp
root_papercups_1 /entrypoint.sh sh -c sleep ... Up 0.0.0.0:3000->3000/tcp,:::3000->3000/tcp, 0.0.0.0:4000->4000/tcp,:::4000->4000/tcp
配置 Nginx
Papercups 的组件与平台间通信需要使用 HTTPS 协议,所以我们再配置下 Nginx 服务。
Nginx 的安装就不多做赘述了。需要注意的是,在配置反向代理时,务必开启 websocket 通信,完整的 Nginx 配置如下:
server {
listen 443 ssl;
server_name _;
# 没有域名,可以用自签名证书
ssl_certificate /etc/nginx/ssl/server.crt;
ssl_certificate_key /etc/nginx/ssl/server.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://localhost:4000;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
# Websocket 通信
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
启动 Nginx 服务后,在浏览器上输入 https://{ip}
就可以访问 Papercups 了。
使用说明
Papercups 的界面虽然是英语,但是使用并不复杂。接下来,我将和大家演示下 Papercups 的使用方法。
注册与登录
首次访问会跳转到登录页面,由于 Papercups 没有内置账号,所以需要先注册个账号。点击『Sign up』跳转到注册页面:
填好信息,点击『Register』 进行注册:
登录后,Papercups 的界面如下:
建立会话
客服平台搭建完成后,只需在网站上加入聊天组件就可以建立会话。在添加前,可以到『Settings』的『Chat widget』页面自定义组件。
设置组件时,可以点击右下角聊天图标,实时查看效果:
页面下方会根据设置生成相应的代码,将这段代码复制到
和 标签中:
加入代码后,我们来测试下聊天功能,先从 Web 端发送个消息:
客服平台接受到消息后会开启一个会话,然后对其回复:
写在最后
我们运营产品时,为网站添加客服功能是不可或缺的,Papercups 则为我们提供了一个很好的开源解决方案。
References
[1] Papercups: https://github.com/papercups-io/papercups