搭建自己的社交聊天服务（VoceChat）-Miykahの后备箱

本文是使用 Docker 独立部署个人的聊天服务 VoceChat，并且可以嵌入到自己的 Halo 博客中，网友浏览博客时就可以通过 VoceChat 发起聊天。

什么是 VoceChat？

来自官方文档：https://doc.voce.chat/zh-cn/

VoceChat 是一款支持独立部署的个人云社交媒体聊天服务。15MB 的大小可部署在任何的服务器上，部署简单，很少需要维护。前端可以内嵌到自己的网站下，数据完全由用户自己掌握，传输过程加密。

效果预览

可以嵌入自己的博客中：

使用 Docker 部署 VoceChat

安装 Docker

如果之前没有安装过 Docker 的同学，需要先安装 Docker。

安装相关依赖

sudo yum install -y yum-utils device-mapper-persistent-data lvm2

添加 Docker 软件源

sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

国内服务器可以使用阿里镜像源：

sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

安装 Docker
```
sudo yum install -y docker-ce
```
启动 Docker 服务
```
sudo systemctl start docker
```
设置开启自动启动 Docker 服务
```
sudo systemctl enable docker
```
测试是否安装成功，安装成功会显示详细信息
```
docker version
```

准备域名

准备好一枚域名，解析到服务器 IP，以我的为例：vocechat.miykah.top

启动容器

docker run -d --restart=always \
  -p 3009:3000 \
  --name vocechat-server \
  -v /opt/vocechat-server/data:/home/vocechat-server/data \
  privoce/vocechat-server:latest \
  --network.frontend_url "https://vocechat.miykah.top"

按需修改端口映射、数据卷和域名，同时记得防火墙放行对应端口

配置反向代理及 SSL 证书

这里我直接使用 1Panel 面板创建反向代理站点，并申请免费证书。

创建站点

申请证书，在面板中申请即可

申请号证书后，进入刚刚创建的站点，配置证书即可。

此时应该就可以使用域名进行访问。

聊天挂件嵌入 Halo 博客

参考官方文档：https://doc.voce.chat/zh-cn/widget

使用挂件之前，请确保具备以下条件：

完成 vocechat 的部署
域名支持 https (如果挂载的宿主网页没有使用 https，可以使用 http)
完成 vocechat 的初始化流程
允许公共注册（Setting --> Overview）

然后将以下代码嵌入博客的body部分，将域名换成自己的。其他配置项参考官方文档。

<!-- 将以下代码片段放于你的网页内，建议放于 body 底部 -->
<script
  data-host-id="1"
  data-auto-reg="false"
  data-login-token=""
  data-close-width="52"
  data-close-height="52"
  data-open-width="380"
  data-open-height="680"
  data-position="right"
  data-welcome="自定义欢迎语"
  src="https://vocechat.yourdomain.com/widget.js"
  async
></script>

比如我使用的 Halo 主题 Theme Joe3，支持嵌入外部 JS 链接，我就只需要填入 https://vocechat.miykah.top/widget.js 即可。

聊天挂件嵌入 hexo-theme-webstack

我使用了 hexo-theme-webstack 作为个人的导航网站，也可以嵌入聊天挂件。效果如下：

修改 webstack.yml 文件即可：

custom:
  head: |- # 以下内容插入到<head></head>标签内，可设置多行，注意每行开头至少四个空格
    <!-- 直接添加html内容即可 -->
    <!-- 可设置多行 -->
  body: |- # 以下内容插入到</body>标签之前，可设置多行，注意每行开头至少四个空格
    <script data-position="left" data-open-width="350" data-open-height="550" src="https://vocechat.miykah.top/widget.js" async></script>

按需修改配置。

手机 APP

VoceChat 还支持手机 APP，安卓和 iOS 都有，参考 https://doc.voce.chat/zh-cn/mobile-app

目录CONTENT

搭建自己的社交聊天服务（VoceChat）