assistant.parsePostParams((params) => {
let message = {
name: "anon",
body: params.body,
when: new Date().toISOString()
}
}
Let me preface a little first... This was all built in a classroom working with partners as a project for servers and clients. I think part of why the code has a lot of issues is because I've thrown my hands up in frustration at it and have just been writing anything and trying it then either not removing all of it properly or commenting it out also not properly. At one point everything worked, but am now trying to add to it. There was a spec.js we were running tests from using jasmine--node. Anyway thanks again Also this is my first time posting so please be gentle. This isn't my complete code obviously, but I am wondering how to change the code so that "anon" can be something that is input by the user. Currently, I am using 'body' in the client and getting messages input as I want them to... sort of. But I can't figure out how to input a username and save it as the name. This is the part of the code I thought is most relevant to the issue. I have 2 main files, my client and my server, and 3 objects. So it would be sort of problematic to link everything here. Any help would be appreciated, thank you!
here is the entire index.html. its a work in progress... please dont laugh
<!DOCTYPE html>
<html lang- "en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Chat</h1>
<div class="pickRoomDiv">
<button id="pickRoom">Enter Room</button>
<select>
<option title="selectRoom">Select Room</option>
<option title="chatRoom">chat room</option>
</select>
</div>
<div id="form-input">
<form id="name-form" action="/" method="POST">
<input type="text" placeholder="Enter Username">
<input type="submit" name="body" value="Submit Username">
</form>
</div>
<div id="form-input" class="submitDiv">
<form id="chat-form" id="newMessageInput" action="chat" method="POST">
<input type="text" name="body" placeholder="Enter Message">
<input type="submit" value="Submit Message">
</form>
<button id='getAllNow' action='chat' method='GET'>Get All Messages</button>
<!-- <form id="getMessages" action="chat" method="GET"></form> -->
</div>
<div id='chat-log'></div>
<script>
let chatForm = document.getElementById('chat-form')
let chatLog = document.getElementById('chat-log')
let getMessages = document.getElementById('getAllNow')
let submitName = document.getElementById('name-form')
let since
let messages = []
chatForm.addEventListener('submit', (event) => {
// prevents the event from performing the default function.
event.preventDefault();
let inputElement = chatForm.querySelector('input[name=body]')
// let inputElement = document.getElementById('newMessageInput')
let message = inputElement.value
// the function below gets all of the parameters from the URL so I can use them later.
let params = new URLSearchParams();
params.append('body', message)
fetch('/chat', {
method: 'POST',
body: params,
})
.then((response) => response.json())
.then((messages) => {
chatLog.innerHTML = messages.map(message => message.body).join('<br>')
})
})
getMessages.addEventListener('click', (event) => {
fetch('/chat', {
method: 'GET',
})
.then((response) => response.json())
.then((messages) => {
let latestFormatChatMessages = messages.map((message) => {
let newPTag = (`<p class="fancy"> <strong>${message.body}</strong></p> <p class="when">${message.when}</p> <p class="fancy"><strong>${message.name}</strong> </p>`)
return newPTag
})
chatLog.innerHTML = latestFormatChatMessages.join('<br>')
submitName.value
})
})
I am getting name back as undefined. here is the server code.
const http = require('http');
const mime = require('mime-types');
const Assistant = require('./assistant');
const House = require('./lib/house');
const port = process.env.PORT || 5000;
let messages = [];
let house = new House();
http.createServer(handleRequest).listen(port);
console.log("Listening on port " + port);
function handleRequest(request, response) {
let assistant = new Assistant(request, response);
let path = assistant.path;
let [_, base, roomId] = path.split('/')[1]
if (roomId = "") {
roomId === 'general'
}
roomId = roomId || 'general'
function sendMessages(messages) {
let data = JSON.stringify(messages);
let type = mime.lookup('json');
assistant.finishResponse(type, data);
}
// function submitName(messages) {
// let data = JSON.stringify(messages);
// let type = mime.lookup('json');
// assistant.finishResponse(type, data)
// }
try {
let data = JSON.stringify(messages);
let type = mime.lookup('json');
if (path === '/') {
assistant.sendFile('index.html');
} else if (path === '/chat') {
console.log(request.method)
if (request.method === 'GET') {
let room = house.roomWithId(roomId)
let messages = room.messagesSince(0)
sendMessages(messages)
} else {
console.log('Parsing the POST');
assistant.parsePostParams((params) => {
let message = {
body: params.body,
when: new Date().toISOString()
}
messages.push(message);
assistant.finishResponse(type, data);
console.log(type)
house.sendMessageToRoom(roomId, message);
})
}
} else {
let fileName = path.slice(1);
assistant.sendFile(fileName)
}
} catch (error) {
assistant.sendError(404, "Error: " + error.toString());
}
}
// function handleRequest(request, response0 {
// let url = require('url')
// })
// console.log('Parsing the GET')
// let data = JSON.stringify(messages);
// let type = mime.lookup('json');
// assistant.finishResponse(type, data);
