可嵌入任何网页的VoceChat即时聊天（IM）应用搭建教学

今天看到了咕咕鸽大佬的“VoceChat——又一个即时聊天（IM）应用！可以嵌入任何网页”教学，本来自己也想搭建一个的，但是吧！环境配置有点麻烦，有没得测试机（太穷了）！我也想给我的博客搞一个，但是觉得没啥太大 的意义。。。

先来看看咕咕鸽大佬网站上的即时聊条效果！

通过GitHub或者 MetaMask登陆之后，发送消息，咕咕大佬的手机能够接到推送通知，及时回复信息。

算是一个和网站访客互动的小工具，在电商咨询类的网站里非常常见。

今天我们就来介绍一下如何在自己的网页里面加入这个小玩意儿。

先来介绍一下这个小工具！

这个小玩意儿的学名叫做“网页聊天挂件”VoceChat

主要特点：

• 支持中英文
• 支持Android、iOS端
• 支持Docker安装，部署极其简单
• 备份简单
• 支持对接自有账号系统
• 支持第三方登录（比如GitHub、MetaMask、Google等）
• 支持访问控制 & 访客模式
• API文档详细
• 支持自建频道
• 支持邀请用户
• 等等功能。

同类产品功能对比：

相关链接

咕咕大佬的聊天室：https://vocechat.gugu.ovh/
VoceChat 官方网址：https://voce.chat/
VoceChat 官方 GitHub：https://github.com/privoce
VoceChat 官方文档：https://doc.voce.chat/

docker-compose方式安装

这边直接丢出核心的 docker-compose.yaml 文件，熟悉的可以直接复制到自己的服务器搭建！

version: '3.3'
services:
    vocechat:
        restart: always
        ports:
            - '3019:3000'  # 冒号左边可以改成自己服务器未被占用的端口
        container_name: vocechat-server
        volumes:
            - './data:/home/vocechat-server/data' # 冒号左边可以改路径，现在是表示把数据存放在在当前文件夹下的 data 文件夹中
        image: privoce/vocechat-server:latest

以下是详细的搭建教学（没服务器了就先参考咕咕大佬的图片了，狗头保命）

1.首先滚去买一台服务器（一定要记住别忘了打开防火墙。。。不会的就自己找腾讯云客服问！！！）

我推荐是买腾讯云的服务器。。。有各种优惠活动，续费还有邀请新朋友购买服务器送积分免费续费自己的服务器或者兑换cdn流量啥的。。。想用其他服务器商家的也不会强求（反正我就只买得起Racknerd！！！狗头保命！！！）

注：我建议是安装一个宝塔面板，宝塔里面还有docker的可视化管理。。。适合新手

2.再滚去安装docker（安装了宝塔的直接在软件商店安装Docker管理器）

详细步骤①：打开LinuxMirrors往下翻找到docker安装脚本。。。复制粘贴不用我教了吧！！

注：我贴出脚本的源地址是怕万一脚本变了

详细步骤②：登录腾讯云服务器，粘贴刚才复制的脚本。。。回车，然后摸鱼

3.VoceChat的自我修养（在腾讯云登录ssh的直接复制粘贴回车一下的…………）

创建安装目录：

sudo -i
mkdir -p /root/data/docker_data/VoceChat
cd /root/data/docker_data/VoceChat

粘贴docker-compose:(用宝塔面板的直接去文件里边编辑docker-compose.yml文件)

vim docker-compose.yml

英文输入法下，按键盘上面的“i”这都不会的可以找豆腐撞死了。。。。

然后你懂的，粘贴一下内容….

version: '3.3'
services:
    vocechat:
        restart: always
        ports:
            - '3019:3000'  # 冒号左边可以改成自己服务器未被占用的端口
        container_name: vocechat-server
        volumes:
            - './data:/home/vocechat-server/data' # 冒号左边可以改路径，现在是表示把数据存放在在当前文件夹下的 data 文件夹中
        image: privoce/vocechat-server:latest

按一下 esc，然后 :wq 保存退出。

最后：

cd /root/data/docker_data/VoceChat    # 来到 dockercompose 文件所在的文件夹下
docker-compose up -d 

理论上我们就可以输入 http://ip:3019（修改过docker-compose的自己看看映射的端口是多少） 访问安装了。

记得更新一下自己的VoceChat，代码如下

cd /root/data/docker_data/VoceChat
docker-compose down 
cp -r /root/data/docker_data/VoceChat /root/data/docker_data/VoceChat.archive  # 万事先备份，以防万一
docker-compose pull
docker-compose up -d    # 请不要使用 docker-compose stop 来停止容器，因为这么做需要额外的时间等待容器停止；docker-compose up -d 直接升级容器时会自动停止并立刻重建新的容器，完全没有必要浪费那些时间。
docker image prune  # prune 命令用来删除不再使用的 docker 对象。删除所有未被 tag 标记和未被容器使用的镜像

可能会提示如下内容：

WARNING! This will remove all dangling images.
Are you sure you want to continue? [y/N] 

输入 y 回车滚蛋

觉得VoceChat不好玩了，想把他踢出去

cd /root/data/docker_data/VoceChat
docker-compose down
cd ..
rm -rf /root/data/docker_data/VoceChat  # 完全删除映射到本地的数据

可以卸载得很干净。

如果想搞一个域名访问啥的可以试试一下教学

第一种：宝塔面板版本（看图理解）

第二种：利用 Nginx Proxy Manager

在添加反向代理之前，域名一枚，并做好解析到服务器上，确保你已经完成了域名解析！！！！！

之后，登陆 Nginx Proxy Manager（不会的看这个：安装 Nginx Proxy Manager（相关教程））

如果 Nginx Proxy Manager 和 VoceChat 在同一台服务器上，可以在终端输入：

ip addr show docker0

查看对应的 Docker 容器内部 IP。

否则直接填 VoceChat 所在的服务器 IP 就行。

再次打开，勾选这些：

然后就可以用域名来安装访问了。

最后！配置VoceChat

配置网页聊天挂件

将后台的代码：

插入到主题的这个位置即可：

参考资料

VoceChat 官方网址：https://voce.chat/
VoceChat 官方 GitHub：https://github.com/privoce
VoceChat 官方文档：https://doc.voce.chat/
咕咕大佬博客：https://blog.laoda.de/archives/docker-compose-install-vocechat