Fatal编程技术网
  • javascript/
  • Javascript 正在尝试从localhost创建具有节点js-cant host的简单聊天应用程序

Javascript 正在尝试从localhost创建具有节点js-cant host的简单聊天应用程序

javascript node.js socket.io

Javascript 正在尝试从localhost创建具有节点js-cant host的简单聊天应用程序,javascript,node.js,socket.io,localhost,chat,Javascript,Node.js,Socket.io,Localhost,Chat,我和我妹妹去做90天挑战赛 我让她给我画些东西（她是一名平面设计师，正在学习用iPad创作一些画，我正在学习编码）。这就是我们如何激励自己提高技能的方法。：）也许这会激励一些人 我面临的挑战是制作一个简单的聊天应用程序，这样我们就可以更改一些短信——仅此而已 我做了一些研究，下载了node.js（以前从未使用过），下载了socket.io，并借助互联网上的教程构建了一些东西 当我在本地运行此应用程序时，它工作正常-我可以在浏览器之间发送消息 我曾尝试使用xampp来托管它，这样我们就可以相互键入

我和我妹妹去做90天挑战赛

我让她给我画些东西（她是一名平面设计师，正在学习用iPad创作一些画，我正在学习编码）。这就是我们如何激励自己提高技能的方法。：）也许这会激励一些人

我面临的挑战是制作一个简单的聊天应用程序，这样我们就可以更改一些短信——仅此而已

我做了一些研究，下载了node.js（以前从未使用过），下载了socket.io，并借助互联网上的教程构建了一些东西

当我在本地运行此应用程序时，它工作正常-我可以在浏览器之间发送消息

我曾尝试使用xampp来托管它，这样我们就可以相互键入一些内容，但它不起作用——这就是目标

我添加了IIS规则（如果有问题的话），我对防火墙进行了更改，添加了例外以打开端口3000，但它仍然不起作用

我收到错误400或io未定义

我认为这已经超出了我的技能——我太新手了，但我愿意做任何事来通过这项挑战

请检查下面的代码。如果有任何有助于解决问题的建议或线索，我将不胜感激

HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- font awesome link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />
    <!-- google fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
    <script defer src="http://localhost:3000/socket.io/socket.io.js"></script>
    <script defer src="./script.js"></script>
    <title>Chat</title>
</head>
<body>
    <section id="chatWindow">
    </section>
    <form id="sendMessage">
        <input type="text" id="messageText">
        <button type="submit" id="sendMessageBtn"><i class="far fa-paper-plane"></i></button>
    </form>
</body>
</html>
script.js代码：

const messageForm = document.getElementById('sendMessage');
const chatWindow = document.getElementById('chatWindow');
const messageInput = document.getElementById('messageText');

const name = prompt("Nickname:");
addMessage(`${name} Welcome!`);
socket.emit('new-user', name);

socket.on('chat-message', data => {
    addMessage(`${data.name} : ${data.message}`);
});

socket.on('user-connected', name => {
    addMessage(`${name} you have joined`);
});

socket.on('user-disconnected', name => {
    addMessage(`${name} user disconnected form the server`);
});

messageForm.addEventListener('submit', e => {
    e.preventDefault();
    const message = messageInput.value;
    addMessage(`Ty : ${message}`);
    socket.emit('send-chat-message', message);
    messageInput.value = '';
});

function addMessage(message) {
    const chatMessage = document.createElement('div');
    const addUserName = document.createElement('h3');
    chatMessage.classList.add("message");
    chatMessage.innerText = message;
    chatWindow.append(chatMessage);
}```
我认为您的问题是无法加载socket.io库。 
localhost
仅在本地pc上工作 因此，请在
html
代码中更改以下内容
到
如果你想检查你的IP地址，你可以在这里登记。

好的。如果您在windows中使用run-cmd-ipconfig/all并告诉我ipv4地址的前3个数字。如果您的ip以192开头。~~~则更改为该ip地址并在同一wifi中进行测试。我遵循以下指南：它修复了我的问题。无论如何，非常感谢你的支持 
const messageForm = document.getElementById('sendMessage');
const chatWindow = document.getElementById('chatWindow');
const messageInput = document.getElementById('messageText');

const name = prompt("Nickname:");
addMessage(`${name} Welcome!`);
socket.emit('new-user', name);

socket.on('chat-message', data => {
    addMessage(`${data.name} : ${data.message}`);
});

socket.on('user-connected', name => {
    addMessage(`${name} you have joined`);
});

socket.on('user-disconnected', name => {
    addMessage(`${name} user disconnected form the server`);
});

messageForm.addEventListener('submit', e => {
    e.preventDefault();
    const message = messageInput.value;
    addMessage(`Ty : ${message}`);
    socket.emit('send-chat-message', message);
    messageInput.value = '';
});

function addMessage(message) {
    const chatMessage = document.createElement('div');
    const addUserName = document.createElement('h3');
    chatMessage.classList.add("message");
    chatMessage.innerText = message;
    chatWindow.append(chatMessage);
}```

<script defer src="http://localhost:3000/socket.io/socket.io.js"></script>

<script defer src="http://**your_ip_address**:3000/socket.io/socket.io.js"></script>