文章首發(fā)于個(gè)人公號(hào)：「阿拉平平」
Papercups[1] 是一款開源的實(shí)時(shí)聊天 Web 應(yīng)用端姚，用 Elixir 開發(fā)。你可以將其理解為一個(gè)客服平臺(tái)，配合聊天組件坝辫，可以快速地為網(wǎng)站添加客服功能进每。本文將介紹 Papercups 的安裝和使用方法汹粤。
下載安裝
從文檔來看，官方推薦使用 asdf 安裝 Papercups田晚，不過需要提前安裝 PostgreSQL嘱兼、Node、asdf 以及 Erlang 插件贤徒，整個(gè)過程比較繁瑣芹壕。
權(quán)衡之下，我選擇容器來部署接奈。因此在部署前踢涌，需要在服務(wù)器上安裝好 docker 和 docker-compose。
編排文件
目前倉庫里中有多個(gè)編排文件序宦，這里我選取正式版本來向大家演示睁壁。將倉庫中的 docker-compose.prod.yml 保存為 docker-compose.yml ，根據(jù)實(shí)際情況修改以下內(nèi)容：
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
# 填入自己的域名或服務(wù)器的 IP
REACT_APP_URL: "app.papercups.io"
db:
image: postgres:alpine
container_name: papercups
ports:
- "5432:5432"
environment:
POSTGRES_PASSWORD: postgres
啟動(dòng)服務(wù)
修改好編排文件后，在當(dāng)前目錄運(yùn)行以下命令啟動(dòng)服務(wù)：
docker-compose up -d
服務(wù)啟動(dòng)后會(huì)拉起兩個(gè)容器：papercups 和 root_papercups_1潘明，檢查下是否都運(yùn)行正常：
[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 的組件與平臺(tái)間通信需要使用 HTTPS 協(xié)議糠惫，所以我們?cè)倥渲孟?Nginx 服務(wù)。
Nginx 的安裝就不多做贅述了钉疫。需要注意的是硼讽，在配置反向代理時(shí)，務(wù)必開啟 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";
}
}
啟動(dòng) Nginx 服務(wù)后，在瀏覽器上輸入 https://{ip} 就可以訪問 Papercups 了城菊。
使用說明
Papercups 的界面雖然是英語备燃，但是使用并不復(fù)雜。接下來凌唬，我將和大家演示下 Papercups 的使用方法并齐。
注冊(cè)與登錄
首次訪問會(huì)跳轉(zhuǎn)到登錄頁面，由于 Papercups 沒有內(nèi)置賬號(hào)客税，所以需要先注冊(cè)個(gè)賬號(hào)况褪。點(diǎn)擊『Sign up』跳轉(zhuǎn)到注冊(cè)頁面：
填好信息，點(diǎn)擊『Register』 進(jìn)行注冊(cè)：
登錄后更耻，Papercups 的界面如下：
建立會(huì)話
客服平臺(tái)搭建完成后测垛，只需在網(wǎng)站上加入聊天組件就可以建立會(huì)話。在添加前秧均，可以到『Settings』的『Chat widget』頁面自定義組件食侮。
設(shè)置組件時(shí)，可以點(diǎn)擊右下角聊天圖標(biāo)目胡，實(shí)時(shí)查看效果：
頁面下方會(huì)根據(jù)設(shè)置生成相應(yīng)的代碼锯七，將這段代碼復(fù)制到 <head>
和 </head> 標(biāo)簽中:
加入代碼后，我們來測試下聊天功能誉己，先從 Web 端發(fā)送個(gè)消息：
客服平臺(tái)接受到消息后會(huì)開啟一個(gè)會(huì)話眉尸，然后對(duì)其回復(fù)：
寫在最后
我們運(yùn)營產(chǎn)品時(shí)，為網(wǎng)站添加客服功能是不可或缺的巫延，Papercups 則為我們提供了一個(gè)很好的開源解決方案效五。
References
[1] Papercups: https://github.com/papercups-io/papercups
