独角数卡扩展自建在线客服(IM)搭建VoceChat

最新推荐文章于 2024-04-24 06:42:15 发布

资源猿

最新推荐文章于 2024-04-24 06:42:15 发布

阅读量692

点赞数 14

分类专栏：独角数卡文章标签：独角数卡

本文链接：https://blog.csdn.net/qq_33689316/article/details/137536193

版权

独角数卡专栏收录该内容

17 篇文章 0 订阅

订阅专栏

前面有教大家搭建一个发卡网站独角数卡，在搭建好独角数卡以后，相信大家都有一个痛点，就是如何搞一个在线客服来提高转化率。虽然市面上有很多IM工具，但这次博主打算自己动手，利用VoceChat搭建一个专属IM在线客服。

VoceChat是一种非常有用的在线聊天工具，类似于很早时候我们使用的聊天室，并且支持多客户端。虽然它功能繁多，但我们今天只使用它的最基础功能，让它来帮我们充当在线客服工具。当然使用这个工具也并非完美，这里我们就来说下它的优缺点。优点：安装备份简单，免费且自己控制，有问题能第一时间排查，方便管理。缺点：服务器及安卓端设备需能与FCM及时通讯，如在墙内或使用大陆国产手机无法消息推送。如果你能接受它的缺点，那么就请跟着我操作吧！

准备材料：

域名一枚
VPS主机（推荐非中国大陆主机，避免造成无法FCM通讯。可以在Racknerd买个便宜主机。）

相信上次大家在搭建完独角数卡都有安装aaPanel或宝塔面板，那么我们就接着上次的操作，这次将VoceChat部署在同一台主机。首先安装Docker，只需在面板商店搜索docker并安装就好。

接下来SSH连接到服务器，切换到root用户，执行以下命令安装：

[root@localhost ~]# mkdir ~/vocechat #新建一个vocechat目录
[root@localhost ~]# cd ~/vocechat #进入vocechat目录
[root@localhost vocechat]# docker pull privoce/vocechat-server:latest-arm64 #拉取vocechat

拉取完成以后，运行vocechat

 docker run -d --restart=always \
> -p 3009:3000 \ #3009端口可改成任意，3000端口勿动
> --name vocechat-server \
> privoce/vocechat-server:latest

至此安装完成，接下来我们新建一个站点，并添加域名。站点不需选择PHP版本，数据库及FTP，站点设置成纯静态。

给站点申请添加SSL证书，并开启强制https。

给站点反设置向代理，可以直接编辑站点Config在#SSL END前添加代码。也可以直接新建一个反向代理，新建反向代理，代理地址填入：http://172.0.0.1:3009，3009请改成你实际使用端口，其他保持不动。删除配置文件中代码，添加以下代码。

location ^~ / {
      proxy_pass http://127.0.0.1:3009/;  # 注意改成你实际使用的端口
      rewrite ^/(.*)$ /$1 break;
      proxy_redirect off;
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Upgrade-Insecure-Requests 1;
      proxy_set_header X-Forwarded-Proto https;
    }

以上操作完成以后，访问域名打开网站，简单注册设置。登录以后主要注意对以下几项进行设置：

在通用 ➜ 概况 ➜ 注册设置 ➜ 每个人；访客模式 ➜ 开启
Firebase 选择使用官方配置

在设置并保存以后，后台找到网页挂件。拷贝里面的代码，登录独角数卡后台，将代码粘贴到：
系统设置 ➜ 页脚自定义代码，然后保存即可！

<!-- 将以下代码放置于你的网页中 -->
<script 
  data-host-id="1" 
  data-theme-color="#1fe1f9" 
  data-close-width="48" 
  data-close-height="48" 
  data-open-width="380" 
  data-open-height="680" 
  data-welcome="Your custom welcome text" 
  src="https://你的域名/widget.js" 
  async 
></script>

自此回到独角数卡前台你会发现页脚下方出现一个图标，点击即可对话。这段代码不仅可用于独角数卡，也可用于任何网站或页面，只需粘贴这段JS代码。在消息同送上，如使用安卓机最好选用非大陆机型，如在墙内还需开启代理，iOS消息推送正常。