VoceChat-NAS搭建个人云的去平台化社交媒体聊天服务

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

一、主要特点

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

二、同类产品功能对比：

三、项目地址：

VoceChat 官方网址：https://voce.chat/
VoceChat 官方文档：https://doc.voce.chat/
开发者微信：Privoce

四、搭建过程：

这边直接丢出核心的 docker-compose.yaml 文件，熟悉 docker 环境的小伙伴可以直接拷贝搭建。

VoceChat 部署：

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

五、使用教程1.初始化

2.配置网页聊天挂件

我以自己的这个wordpress主题为例子：

将后台设置：

将后台代码提取

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

通过 functions.php 添加

如果您熟悉 WordPress 开发，可以直接在主题的 functions.php 文件中添加：

// 添加 VoceChat Widget
function add_vocechat_widget() {
// 只在前端显示，排除管理员页面
if (is_admin()) return;

?>
<ｓｃｒｉｐｔ
   data-host-id="1"
   data-auto-reg="true"
   data-login-token=""
   data-close-width="52"
   data-close-height="52"
   data-open-width="380"
   data-open-height="680"
   data-position="right"
   data-welcome="有什么可以帮助您的吗？"
   data-theme-color="#1fe1f9"
   data-logo="<?php echo get_site_icon_url(); ?>"
   src="https://vocechat.yourdomain.com/widget.js"
   async
>ｓｃｒｉｐｔ>
<?php
}
add_action('wp_footer', 'add_vocechat_widget');

WordPress 特定配置建议
1. 响应式设计优化

针对 WordPress 主题的响应式特性，建议添加以下 CSS：

/* 移动端优化 /
[url=home.php?mod=space&uid=1025929]@media[/url] (max-width: 768px) {
  #VOCECHAT_WIDGET {
right: 10px !important;
bottom: 60px !important; / 避免与移动端菜单冲突 /
  }
}

/ 避免与固定元素冲突 */
#VOCECHAT_WIDGET {
  z-index: 9999 !important;
}

2. 性能优化

为了提高页面加载速度，可以延迟加载 Widget：

// 页面加载完成后再加载 Widget
window.addEventListener("load", function () {
setTimeout(function () {
var script = document.createElement("script");
script.setAttribute("data-host-id", "1");
script.setAttribute("data-auto-reg", "true");
script.setAttribute("data-welcome", "欢迎咨询！");
script.src = "https://vocechat.yourdomain.com/widget.js";
script.async = true;
document.body.appendChild(script);
}, 2000); // 延迟 2 秒加载
});

3. 条件显示

可以设置 Widget 只在特定页面显示：

function add_vocechat_widget() {
// 只在前端显示
if (is_admin()) return;
// 只在首页和联系页面显示
if (!is_home() && !is_page('contact')) return;
// Widget 代码...
}

常见问题解决
1. Widget 不显示

检查 VoceChat 域名是否正确
确认 VoceChat 服务是否正常运行
检查浏览器控制台是否有错误信息

2. 样式冲突

使用浏览器开发者工具检查 CSS 冲突
添加 !important 优先级
调整 z-index 层级

3. 移动端显示问题

测试不同屏幕尺寸
添加响应式 CSS
调整 Widget 位置参数

最佳实践

备份网站：修改主题文件前务必备份
使用子主题：避免主题更新时丢失自定义代码
测试兼容性：在不同设备和浏览器上测试
监控性能：确保 Widget 不影响页面加载速度
用户体验：合理设置欢迎语和样式，提升用户体验

搭建完成后的代码和效果

// vocechat 挂件

// 添加 VoceChat Widget
function add_vocechat_widget() {
// 只在前端显示，排除管理员页面
if (is_admin()) return;

// === 可选：只在特定页面显示 ===
// 取消下面的注释，可限制在首页和联系页面显示
// if (!is_home() && !is_page('contact')) return;

// === 延迟加载（提升性能） ===
?>
<ｓｃｒｉｐｔ>
      window.addEventListener("load", function () {
         setTimeout(function () {
            var script = document.createElement("script");
            script.setAttribute("data-host-id", "1");
            script.setAttribute("data-auto-reg", "true");
            script.setAttribute("data-login-token", "");
            script.setAttribute("data-close-width", "48");
            script.setAttribute("data-close-height", "48");
            script.setAttribute("data-open-width", "380");
            script.setAttribute("data-open-height", "680");
            script.setAttribute("data-position", "right");
            script.setAttribute("data-welcome", "有什么可以帮助您的吗？"); // 需要修改
            script.setAttribute("data-popup-title", "咨询问题");  // 需要修改
            script.setAttribute("data-popup-subtitle", "吴老师在线");  // 需要修改
            script.setAttribute("data-theme-color", "#1fe1f9");
            script.setAttribute("data-logo", "https://www.****/logo_20230603_uugai.com_1685804031229.png");  // 需要修改
            script.src = "https://****:99/widget.js";  // 需要修改
            script.async = true;
            document.body.appendChild(script);
         }, 2000); // 延迟2秒加载
      });
ｓｃｒｉｐｔ>
<?php
}
add_action('wp_footer', 'add_vocechat_widget');

// === 响应式与固定元素冲突优化 CSS ===
function vocechat_custom_css() {
// 只在前端显示，排除管理员页面
if (is_admin()) return;
?>

<?php
}
add_action('wp_head', 'vocechat_custom_css');