侧边栏壁纸
  • 累计撰写 27 篇文章
  • 累计创建 42 个标签
  • 累计收到 33 条评论

目 录CONTENT

文章目录

搭建自己的社交聊天服务(VoceChat)

miykah
2023-12-26 / 0 评论 / 2 点赞 / 231 阅读 / 6262 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-12-26,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

本文是使用 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

2

评论区