个人中心
gpt4 book ai didi

javascript - Live Server 工作，但我收到 localhost 的 404 错误

转载 作者：行者123 更新时间：2023-12-04 10:43:54 27 4
gpt4 key购买 nike

我的服务器和客户端在不同的项目上。

当我在 vsCode 上使用 Live Server 时，一切正常。但如果我尝试访问本地主机，则不会收到 404。

怎么会？

服务器.js

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(客户端)

const socket = io('http://localhost:3000');

window.addEventListener('DOMContentLoaded', appendForm());

使用客户端上的调试器，我得到“io is not defined”。当我在第 1 行使用“从“socket.io-client”导入 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>

索引.js

//const socket = io('http://localhost:3000');
const socket = io(':3000');

window.addEventListener('DOMContentLoaded', appendForm());

名称.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();
};

聊天.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，像这样 <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script>我有一个类似的问题。试试这个连接到本地主机:

const socket = io(':3000'); // pay attention on that it should be a string and starts with a colon symbol

编辑

首先你需要删除defer来自 <script defer src="...> 的属性加载。这告诉浏览器继续加载页面，同时延迟脚本在后台加载，并在加载后运行此脚本。

因此，在您的情况下，带有 Socket.io 库的脚本将在行 const socket = io('... 要求之后运行

关于javascript - Live Server 工作，但我收到 localhost 的 404 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59803127/

27 4 0
文章推荐： sql - PostgresQL - 无法将值插入表中 - 错误 : INSERT has more target columns than expressions
文章推荐： javascript - 如何从spring获取参数响应？ (休息 Javascript)
文章推荐： node.js - 获取 Firebase 函数当前区域
文章推荐： c# - 确定大型整数列表中常见元素计数的最有效方法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com