Javascript Live Server正常工作,但我收到了localhost的404错误
我的服务器和客户端在不同的项目上 当我在vsCode上使用Live Server时,一切都正常。但如果我尝试转到localhost,则得到404 为什么 server.jsJavascript Live Server正常工作,但我收到了localhost的404错误,javascript,socket.io,Javascript,Socket.io,我的服务器和客户端在不同的项目上 当我在vsCode上使用Live Server时,一切都正常。但如果我尝试转到localhost,则得到404 为什么 server.js const logger = require('./logger'); const PORT = 3000; const io = require('socket.io')(PORT); const express = require('express'); const app = express(); const soc
const logger = require('./logger');
const PORT = 3000;
const io = require('socket.io')(PORT);
const express = require('express');
const app = express();
const socketListeners = require('./sockets/socketListeners');
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', socket => socketListeners(socket, io, logger));
index.js(在客户端上)
使用客户端上的调试器,我得到“io未定义”。
当我在第1行使用“从socket.io客户端导入io”时,我得到了意外的标识符
编辑
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Chat</title>
<link rel="stylesheet" href="style.css" />
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script>
<script src="name.js"></script>
<script src="index.js"></script>
<script src="chat.js"></script>
</head>
<body>
<section class="container"></section>
</body>
</html>
name.js
const container = document.querySelector('.container');
const nameContainer = document.createElement('section');
const title = document.createElement('h1');
const form = document.createElement('form');
const nameInput = document.createElement('input');
const submitName = document.createElement('button');
title.innerText = 'Enter Your Name';
submitName.innerText = 'Connect';
const getName = () => {
form.addEventListener('submit', e => {
e.preventDefault();
const name = nameInput.value;
socket.emit('new-user', name);
nameInput.value = '';
socket.off('invalid-name');
socket.on('invalid-name', () => {
feedbackBox(
"Make sure you don't have space or other funky characters in your name \n \n Must be between 3-13 characters"
);
});
socket.off('name-taken');
socket.on('name-taken', () => {
feedbackBox('Nickname already taken');
});
socket.off('user-accepted');
socket.on('user-accepted', () => {
title.classList.add('hide');
nameContainer.classList.add('hide');
addMessageForm();
});
});
};
const appendForm = () => {
nameInput.classList.add('name_input');
form.appendChild(nameInput);
submitName.classList.add('submit_name');
form.appendChild(submitName);
nameContainer.appendChild(form);
nameContainer.classList.add('name_container');
nameContainer.classList.remove('hide');
title.classList.remove('hide');
title.classList.add('name_title');
container.appendChild(title);
container.appendChild(nameContainer);
getName();
};
chat.js
//const socket = io('http://localhost:3000');
const showFeedback = document.createElement('section');
const messageContainer = document.createElement('section');
const messageForm = document.createElement('form');
const messageInput = document.createElement('input');
const submitMessage = document.createElement('button');
const disconnectButton = document.createElement('button');
submitMessage.innerText = 'Send';
disconnectButton.innerText = 'X';
messageContainer.classList.add('message-container');
messageForm.classList.add('send-container');
messageInput.classList.add('message-input');
submitMessage.classList.add('send-button');
disconnectButton.classList.add('disconnect-button');
const addMessageForm = () => {
showFeedback.classList.add('hide');
messageContainer.classList.remove('hide');
messageForm.classList.remove('hide');
disconnectButton.classList.remove('hide');
messageForm.appendChild(messageInput);
messageForm.appendChild(submitMessage);
container.appendChild(disconnectButton);
container.appendChild(messageContainer);
container.appendChild(messageForm);
appendMessage('You joined');
};
socket.on('chat-message', data => {
appendMessage(`${data.name}: ${data.message}`);
});
socket.on('user-connected', name => {
appendMessage(`${name} connected`);
});
socket.on('user-disconnected', name => {
appendMessage(`${name} left the chat`);
});
socket.on('user-inactivity-disconnected', name => {
appendMessage(`${name} was disconnected due to inactivity`);
});
messageForm.addEventListener('submit', e => {
e.preventDefault();
const message = messageInput.value;
socket.emit('send-chat-message', message);
if (message !== '') {
appendMyMessage(`You: ${message}`);
}
messageInput.value = '';
});
function appendMessage(message) {
const messageElement = document.createElement('section');
messageElement.innerText = message;
messageElement.classList.add('messages');
messageContainer.append(messageElement);
}
function appendMyMessage(message) {
const myMessageElement = document.createElement('section');
myMessageElement.innerText = message;
myMessageElement.classList.add('myMessage');
messageContainer.append(myMessageElement);
}
const feedbackBox = message => {
showFeedback.innerText = message;
showFeedback.classList.add('feedback-I-disconnect');
showFeedback.classList.remove('hide');
container.appendChild(showFeedback);
};
disconnectButton.addEventListener('click', event => {
if (event.target.classList.contains('disconnect-button')) {
socket.disconnect();
messageContainer.classList.add('hide');
messageForm.classList.add('hide');
disconnectButton.classList.add('hide');
appendForm();
feedbackBox('You disconnected from the chat');
socket.connect();
}
});
socket.on('inactive', () => {
socket.emit('disconnected');
messageContainer.classList.add('hide');
messageForm.classList.add('hide');
disconnectButton.classList.add('hide');
appendForm();
feedbackBox('Disconnected by the server due to inactivity');
});
尝试在您的客户端中使用
。我认为它应该会起作用。首先,修复指向index.html中Socket.io库的链接。尝试cdn,如下所示
我遇到了类似的问题。请尝试以下连接到本地主机:
const socket = io(':3000'); // pay attention on that it should be a string and starts with a colon symbol
编辑
首先,您需要从
中删除defer
属性,仍然存在相同的问题。您可以更新客户端的一些代码以进一步了解它吗?我更新了,但仍然不起作用。当我调试时,我得到“io未定义”“不确定我是否完全理解,但我更新了上面的编辑版本。html和index.js文件,但仍然不能与localhost一起使用。现在,即使使用live server也不行
//const socket = io('http://localhost:3000');
const showFeedback = document.createElement('section');
const messageContainer = document.createElement('section');
const messageForm = document.createElement('form');
const messageInput = document.createElement('input');
const submitMessage = document.createElement('button');
const disconnectButton = document.createElement('button');
submitMessage.innerText = 'Send';
disconnectButton.innerText = 'X';
messageContainer.classList.add('message-container');
messageForm.classList.add('send-container');
messageInput.classList.add('message-input');
submitMessage.classList.add('send-button');
disconnectButton.classList.add('disconnect-button');
const addMessageForm = () => {
showFeedback.classList.add('hide');
messageContainer.classList.remove('hide');
messageForm.classList.remove('hide');
disconnectButton.classList.remove('hide');
messageForm.appendChild(messageInput);
messageForm.appendChild(submitMessage);
container.appendChild(disconnectButton);
container.appendChild(messageContainer);
container.appendChild(messageForm);
appendMessage('You joined');
};
socket.on('chat-message', data => {
appendMessage(`${data.name}: ${data.message}`);
});
socket.on('user-connected', name => {
appendMessage(`${name} connected`);
});
socket.on('user-disconnected', name => {
appendMessage(`${name} left the chat`);
});
socket.on('user-inactivity-disconnected', name => {
appendMessage(`${name} was disconnected due to inactivity`);
});
messageForm.addEventListener('submit', e => {
e.preventDefault();
const message = messageInput.value;
socket.emit('send-chat-message', message);
if (message !== '') {
appendMyMessage(`You: ${message}`);
}
messageInput.value = '';
});
function appendMessage(message) {
const messageElement = document.createElement('section');
messageElement.innerText = message;
messageElement.classList.add('messages');
messageContainer.append(messageElement);
}
function appendMyMessage(message) {
const myMessageElement = document.createElement('section');
myMessageElement.innerText = message;
myMessageElement.classList.add('myMessage');
messageContainer.append(myMessageElement);
}
const feedbackBox = message => {
showFeedback.innerText = message;
showFeedback.classList.add('feedback-I-disconnect');
showFeedback.classList.remove('hide');
container.appendChild(showFeedback);
};
disconnectButton.addEventListener('click', event => {
if (event.target.classList.contains('disconnect-button')) {
socket.disconnect();
messageContainer.classList.add('hide');
messageForm.classList.add('hide');
disconnectButton.classList.add('hide');
appendForm();
feedbackBox('You disconnected from the chat');
socket.connect();
}
});
socket.on('inactive', () => {
socket.emit('disconnected');
messageContainer.classList.add('hide');
messageForm.classList.add('hide');
disconnectButton.classList.add('hide');
appendForm();
feedbackBox('Disconnected by the server due to inactivity');
});
const socket = io(':3000'); // pay attention on that it should be a string and starts with a colon symbol