So what exactly do you want me to do? I need every single step organized.
Iām walking home from school right now, in a couple of minutes Iāll be home and Iāll hop on my PC and help you out
Where I am, it is 9:45 PM and I will be prepared to go to sleep.
Itās 3:47 pm here in Australia.
(On my phone I couldnāt manage to highlight this.)
Iām suggesting changing that to this:
<input id="send-button" type="submit" />
Because Iām not 100% sure that the button
having the submit
type
is actually recognised, weāll see.
The page still reloads with that change applied, every time I press the send button.
Oh, is reloading the issue? Just remove the form
or specifically donāt have a button
/input
with the type
submit
. You could also try adding onsubmit="return false;"
.
This should stop the page refresh:
Here is the objective of this program:
It is a chat program. It has a send button which sends all the text that is in the text input box, to any clients that also have the website open
Personally I just never use form
s, which probably isnāt the best practice from a semantic perspective, but it works fineā¦
The code you gave me already exists within the scripts.
The most puzzling part is, that it was working fine when I started it.
Yeah, Iām pointing out that should prevent page refreshes too and itās already in your code.
That makes sense because the event.preventDefault()
should prevent the page from refreshing.
And it was not a change in my code, because I turned way back in the history and it still acted the same way.
Sorry. I meant is it related to browser cache or any data?
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const messageForm = document.querySelector('form');
const messageInput = document.querySelector('#message-input');
const messagesDiv = document.querySelector('#messages');
// handle incoming messages
socket.on('message', message => {
const messageElement = document.createElement('div');
messageElement.textContent = message;
messagesDiv.appendChild(messageElement);
});
// handle form submission
messageForm.addEventListener('submit', event => {
event.preventDefault();
const message = messageInput.value.trim();
if (message) {
socket.emit('message', message);
messageInput.value = '';
messageInput.focus();
}
return false;
});
</script>
Itās because thereās an error, io is not defined
, so the code below isnāt run because that error is thrown (hence event.preventDefault()
is not called on form submission). You can fix that by replacing this: <script src="/socket.io/socket.io.js"></script>
with this: <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
or actually adding the Socket.IO library at that path.
Okay, now we are getting somewhere.
It doesnāt reload now, but now I donāt receive any messages on it. Apparently, the message doesnāt get through.
Check on the server-side if the message is received, just print the data received when the message
event is triggered by the client.
I am noticing this in my console nowā¦
Before you mentioned you canāt access StackOverflow, is it possible Socket.IO is blocked for some reason?