اتصال پیشرفته
پراکسی صفحهٔ اختصاصی
صفحهٔ اختصاصی منتشرشدهٔ موچت را با بازنویسی مسیر صفحه، فایلها و API گفتگو در دامنهٔ خودتان نمایش دهید.
با بازنویسی مسیرها میتوانید صفحهٔ اختصاصی گفتگوی موچت را در دامنهٔ سایت خودتان نمایش دهید. بازدیدکننده چت را در نشانیای مثل https://your-domain.com/help باز میکند و همین نشانی در مرورگرش باقی میماند.
مقصد، صفحهٔ منتشرشدهٔ شما در https://widget.mu.chat/standalone?slug=YOUR_SLUG است.
مفهوم اصلی: بازنویسی مسیر
بازنویسی، درخواست را به نشانی دیگری میفرستد و پاسخ را بدون هدایت مرورگر به آن نشانی برمیگرداند. دامنهٔ شما در نوار نشانی باقی میماند.
- مبدأ: مسیر دلخواه در سایت شما، مثل
/help. - مقصد: نشانی صفحهٔ منتشرشدهٔ موچت، همراه با پارامتر
slug.
صفحهٔ اختصاصی موچت، یک صفحهٔ گفتگوست؛ این نمونهها زیرصفحههای /help/* ایجاد نمیکنند. بهروزرسانی زنده مستقیماً با WebSocket به API موچت متصل میشود؛ بنابراین قاعدهٔ پراکسی برای /socket.io لازم نیست.
اگر سایت شما مسیریابی زبان، middleware احراز هویت یا مسیر فراگیر دارد، اجازه دهید درخواست صفحه، فایلها و API محدودشده به همین کانال به قواعد پراکسی برسد. سیاست امنیت محتوا را برای /help طوری تنظیم کنید که اسکریپت، فونت، رسانه، درخواست API و اتصال مستقیم WebSocket صفحه مجاز باشند.
نمونههای پیادهسازی
تب متناسب با فریمورک یا سرویس میزبانی سایتتان را انتخاب کنید. این قواعد را با تنظیمات موجود ترکیب کنید و پیش از قواعد عمومیِ مسیر جایگزین قرار دهید.
تابع rewrites را به فایل next.config.js پروژه اضافه کنید. کافی است YOUR_SLUG را در ثابت زیر جایگزین کنید:
const SLUG = "YOUR_SLUG";
/** @type {import('next').NextConfig} */
const nextConfig = {
async rewrites() {
return [
{
source: "/help",
destination: `https://widget.mu.chat/standalone?slug=${SLUG}`
},
{
source: "/__mu/:path*",
destination: "https://widget.mu.chat/__mu/:path*"
},
{
source: `/api/muchat/v2/standalone/${SLUG}/:path*`,
destination: `https://api.mu.chat/v2/standalone/${SLUG}/:path*`
}
];
}
};
module.exports = nextConfig;پس از تغییر تنظیمات، سرور توسعه را دوباره راه بیندازید و سپس تنظیمات را روی سرور یا سرویس میزبانی منتشر کنید. بازنویسی به مقصد خارجی به سرور نیاز دارد و در خروجی HTML ایستا کار نمیکند. اگر فایل پروژه next.config.mjs است، بهجای module.exports از export default nextConfig استفاده کنید.
این موارد را به آرایهٔ rewrites در فایل vercel.json ریشهٔ پروژه اضافه کنید. تمام موارد YOUR_SLUG را با همان آدرس منتشرشده جایگزین کنید:
{
"rewrites": [
{
"source": "/help",
"destination": "https://widget.mu.chat/standalone?slug=YOUR_SLUG"
},
{
"source": "/__mu/:path*",
"destination": "https://widget.mu.chat/__mu/:path*"
},
{
"source": "/api/muchat/v2/standalone/YOUR_SLUG/:path*",
"destination": "https://api.mu.chat/v2/standalone/YOUR_SLUG/:path*"
}
]
}Vercel قواعد را در انتشار بعدی اعمال میکند. سیاست no-store پاسخ صفحه و چت را حفظ کنید و آن را با کش عمومی CDN جایگزین نکنید. در پروژهٔ Next.js، بازنویسی را در یک محل تنظیم کنید تا قواعد در هر دو فایل تکرار نشوند.
در فایل netlify.toml ریشهٔ پروژه، موارد [[redirects]] را اضافه کنید. در Netlify، مقدار status = 200 باعث میشود این قواعد پراکسی باشند و مرورگر را به نشانی مقصد هدایت نکنند:
[[redirects]]
from = "/help"
to = "https://widget.mu.chat/standalone?slug=YOUR_SLUG"
status = 200
force = true
[[redirects]]
from = "/__mu/*"
to = "https://widget.mu.chat/__mu/:splat"
status = 200
force = true
[[redirects]]
from = "/api/muchat/v2/standalone/YOUR_SLUG/*"
to = "https://api.mu.chat/v2/standalone/YOUR_SLUG/:splat"
status = 200
force = trueتمام موارد YOUR_SLUG را جایگزین و تنظیمات را منتشر کنید. این موارد را پیش از قاعدهٔ عمومی برنامهٔ تکصفحهای مثل /* → /index.html قرار دهید.
بستههای پراکسی را در برنامهٔ سرور خودتان نصب کنید:
pnpm add express http-proxy-middlewareفایل server.cjs را بسازید یا پراکسیهای زیر را در برنامهٔ Express فعلی قرار دهید. مقدار YOUR_SLUG را در ثابت جایگزین کنید:
const express = require("express");
const { createProxyMiddleware } = require("http-proxy-middleware");
const app = express();
const SLUG = "YOUR_SLUG";
app.use(createProxyMiddleware({
target: "https://widget.mu.chat",
changeOrigin: true,
pathFilter: (path) => path === "/help" || path === "/help/",
pathRewrite: (path) => {
const url = new URL(path, "https://widget.mu.chat");
url.pathname = "/standalone";
url.searchParams.set("slug", SLUG);
return url.pathname + url.search;
}
}));
app.use(createProxyMiddleware({
target: "https://widget.mu.chat",
changeOrigin: true,
pathFilter: (path) => path.startsWith("/__mu/")
}));
app.use(createProxyMiddleware({
target: "https://api.mu.chat",
changeOrigin: true,
pathFilter: (path) =>
path.startsWith(`/api/muchat/v2/standalone/${SLUG}/`),
pathRewrite: (path) => path.replace(/^\/api\/muchat/, "")
}));
app.listen(process.env.PORT || 3000);با node server.cjs آن را اجرا کنید و سایت عمومی را با HTTPS ارائه دهید. این پراکسیها را پیش از پردازشگرهای JSON و بدنه و handlerهای فراگیر ثبت کنید تا بدنهٔ POST و فایل آپلودشده دستنخورده به سرویس مقصد برسد. ثبت در ریشهٔ برنامه باعث میشود مسیر کامل فایلها و API حفظ شود.
پس از انتشار، /help را مستقیم باز و صفحه را بازخوانی کنید. بررسی کنید نشانی روی دامنهٔ شما بماند، فایلها از /__mu/ بارگذاری شوند و درخواستهای HTTP گفتگو به /api/muchat/v2/standalone/YOUR_SLUG/ برسند. پرسشی بفرستید، تا پایان پاسخ جریانی صبر کنید و فرم یا آپلود فعال را هم آزمایش کنید. دوباره صفحه را بازخوانی کنید تا ادامهٔ نشست گفتگو را ببینید. بررسی بارگذاری اولیهٔ صفحه بهتنهایی برای تأیید پراکسی کافی نیست.