I am trying to have just a simple Chatbot HTML interface with PALM API. I keep getting a fetch error in the debugging console and on the HTML.
Running Node.JS on Server.JS and running http-server on chatbot.JS
SERVER.JS
const http = require('http');
const url = require('url');
const port = 3000;
const server = http.createServer((req, res) => {
// Add CORS headers
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'POST');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
try {
const parsedUrl = url.parse(req.url, true);
const path = parsedUrl.pathname;
if (req.method === 'POST' && path === '/chat') {
let body = '';
req.on('data', chunk => {
body += chunk.toString();
});
req.on('end', () => {
const userMessage = JSON.parse(body).message;
// Simulate a bot response
const botResponse = 'You said: ' + userMessage;
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ response: botResponse }));
});
} else {
res.writeHead(404);
res.end('Not Found');
}
} catch (error) {
console.error('An error occurred:', error);
res.writeHead(500);
res.end('Internal Server Error');
}
});
server.listen(port, () => {
console.log('Server running at http://localhost:' + port);
});
CHATBOT.JS
async function sendMessage() {
try {
var userMessage = document.getElementById('userInput').value;
var messagesDiv = document.getElementById('messages');
// Convert user's message to a string
const userMessageStr = JSON.stringify({ message: userMessage });
// Display user's message
messagesDiv.innerHTML += '<div>User: ' + userMessageStr + '</div>';
// Call API
const response = await fetch('http://localhost:3000/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: userMessageStr,
});
const data = await response.json();
// Display bot's response
messagesDiv.innerHTML += '<div>Bot: ' + data.response + '</div>';
} catch (error) {
console.error('An error occurred:', error);
messagesDiv.innerHTML += '<div>Error: ' + error.message + '</div>';
}
}
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbot</title>
<script src="chatbot.js" defer></script>
</head>
<body>
<div id="chatbox">
<div id="messages"></div>
<input type="text" id="userInput" placeholder="Type your message...">
<button onclick="sendMessage()">Send</button>
</div>
</body>
</html>
