文章首发于个人公号:「阿拉平平」

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

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐