264 lines
11 KiB
HTML
264 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="ru">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Тест Webhook n8n</title>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
font-family: Arial, sans-serif;
|
|||
|
|
max-width: 800px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 20px;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
.container {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 20px;
|
|||
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
.test-section {
|
|||
|
|
background: #e3f2fd;
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin: 15px 0;
|
|||
|
|
}
|
|||
|
|
.result {
|
|||
|
|
background: #f3e5f5;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
font-family: monospace;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
.error {
|
|||
|
|
background: #ffebee;
|
|||
|
|
color: #c62828;
|
|||
|
|
}
|
|||
|
|
.success {
|
|||
|
|
background: #e8f5e8;
|
|||
|
|
color: #2e7d32;
|
|||
|
|
}
|
|||
|
|
button {
|
|||
|
|
background: #2196f3;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
margin: 5px;
|
|||
|
|
}
|
|||
|
|
button:hover {
|
|||
|
|
background: #1976d2;
|
|||
|
|
}
|
|||
|
|
input[type="text"] {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 10px;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
margin: 5px 0;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="container">
|
|||
|
|
<h1>🔗 Тест Webhook n8n</h1>
|
|||
|
|
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h3>1. Тест доступности n8n</h3>
|
|||
|
|
<button onclick="testN8nAvailability()">Проверить доступность n8n</button>
|
|||
|
|
<div id="availabilityResult" class="result"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h3>2. Тест webhook напрямую</h3>
|
|||
|
|
<input type="text" id="webhookMessage" placeholder="Введите сообщение для webhook..." value="как вернуть деньги за испорченный отдых">
|
|||
|
|
<button onclick="testWebhookDirect()">Тестировать webhook напрямую</button>
|
|||
|
|
<div id="webhookResult" class="result"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h3>3. Тест через Typebot</h3>
|
|||
|
|
<button onclick="testTypebotWebhook()">Тестировать через Typebot</button>
|
|||
|
|
<div id="typebotResult" class="result"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h3>4. Тест полной цепочки</h3>
|
|||
|
|
<button onclick="testFullChain()">Тестировать полную цепочку</button>
|
|||
|
|
<div id="fullChainResult" class="result"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
const WEBHOOK_URL = 'https://n8n.clientright.pro/webhook/0b20bf1e-7cda-4dc8-899e-a7c3be4096c0';
|
|||
|
|
const PROXY_URL = '/aiassist/typebot_proxy.php';
|
|||
|
|
|
|||
|
|
function showResult(elementId, content, isError = false) {
|
|||
|
|
const element = document.getElementById(elementId);
|
|||
|
|
element.textContent = content;
|
|||
|
|
element.className = `result ${isError ? 'error' : 'success'}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function testN8nAvailability() {
|
|||
|
|
showResult('availabilityResult', 'Проверка доступности n8n...');
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch('https://n8n.clientright.pro', {
|
|||
|
|
method: 'HEAD',
|
|||
|
|
mode: 'no-cors'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
showResult('availabilityResult', '✅ n8n доступен (HEAD запрос выполнен)');
|
|||
|
|
} catch (error) {
|
|||
|
|
showResult('availabilityResult', `❌ n8n недоступен: ${error.message}`, true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function testWebhookDirect() {
|
|||
|
|
const message = document.getElementById('webhookMessage').value;
|
|||
|
|
showResult('webhookResult', 'Тестирование webhook напрямую...');
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(WEBHOOK_URL, {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
input: message,
|
|||
|
|
projectId: 'test',
|
|||
|
|
module: 'Test',
|
|||
|
|
view: 'Test',
|
|||
|
|
userId: 'test'
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (response.ok) {
|
|||
|
|
const result = await response.text();
|
|||
|
|
showResult('webhookResult', `✅ Webhook отвечает!\n\nОтвет:\n${result}`);
|
|||
|
|
} else {
|
|||
|
|
showResult('webhookResult', `❌ Webhook ошибка: HTTP ${response.status}`, true);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
showResult('webhookResult', `❌ Ошибка webhook: ${error.message}`, true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function testTypebotWebhook() {
|
|||
|
|
showResult('typebotResult', 'Тестирование через Typebot...');
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(PROXY_URL, {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
action: 'startChat',
|
|||
|
|
message: 'тест webhook',
|
|||
|
|
context: {
|
|||
|
|
projectId: 'test',
|
|||
|
|
module: 'Test',
|
|||
|
|
view: 'Test',
|
|||
|
|
userId: 'test'
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const result = await response.json();
|
|||
|
|
|
|||
|
|
if (result.success) {
|
|||
|
|
const data = result.data;
|
|||
|
|
let responseText = `✅ Typebot отвечает!\n\n`;
|
|||
|
|
responseText += `SessionId: ${data.sessionId || 'N/A'}\n`;
|
|||
|
|
responseText += `Messages: ${data.messages ? data.messages.length : 0}\n`;
|
|||
|
|
responseText += `ClientSideActions: ${data.clientSideActions ? data.clientSideActions.length : 0}\n`;
|
|||
|
|
responseText += `Has input: ${data.input ? 'yes' : 'no'}\n\n`;
|
|||
|
|
responseText += `Полный ответ:\n${JSON.stringify(data, null, 2)}`;
|
|||
|
|
|
|||
|
|
showResult('typebotResult', responseText);
|
|||
|
|
} else {
|
|||
|
|
showResult('typebotResult', `❌ Typebot ошибка: ${result.error}`, true);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
showResult('typebotResult', `❌ Ошибка Typebot: ${error.message}`, true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function testFullChain() {
|
|||
|
|
showResult('fullChainResult', 'Тестирование полной цепочки...');
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// Шаг 1: Создаем сессию в Typebot
|
|||
|
|
const response = await fetch(PROXY_URL, {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
action: 'startChat',
|
|||
|
|
message: 'как вернуть деньги за испорченный отдых',
|
|||
|
|
context: {
|
|||
|
|
projectId: 'test',
|
|||
|
|
module: 'Test',
|
|||
|
|
view: 'Test',
|
|||
|
|
userId: 'test'
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const result = await response.json();
|
|||
|
|
|
|||
|
|
if (result.success) {
|
|||
|
|
const data = result.data;
|
|||
|
|
let responseText = `✅ Полная цепочка работает!\n\n`;
|
|||
|
|
|
|||
|
|
// Проверяем clientSideActions
|
|||
|
|
if (data.clientSideActions && data.clientSideActions.length > 0) {
|
|||
|
|
responseText += `Найдено ${data.clientSideActions.length} clientSideActions\n`;
|
|||
|
|
|
|||
|
|
for (const action of data.clientSideActions) {
|
|||
|
|
if (action.type === 'httpRequestToExecute') {
|
|||
|
|
responseText += `Выполняем HTTP запрос: ${action.httpRequestToExecute.url}\n`;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const webhookResponse = await fetch(action.httpRequestToExecute.url, {
|
|||
|
|
method: action.httpRequestToExecute.method || 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify(action.httpRequestToExecute.body)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const webhookResult = await webhookResponse.text();
|
|||
|
|
responseText += `Webhook ответ: ${webhookResult}\n`;
|
|||
|
|
} catch (webhookError) {
|
|||
|
|
responseText += `Webhook ошибка: ${webhookError.message}\n`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
responseText += `❌ Нет clientSideActions - webhook не выполняется\n`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
showResult('fullChainResult', responseText);
|
|||
|
|
} else {
|
|||
|
|
showResult('fullChainResult', `❌ Ошибка Typebot: ${result.error}`, true);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
showResult('fullChainResult', `❌ Ошибка полной цепочки: ${error.message}`, true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Автоматический тест при загрузке
|
|||
|
|
window.onload = function() {
|
|||
|
|
console.log('Тест webhook запущен');
|
|||
|
|
setTimeout(testN8nAvailability, 1000);
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|