Блог

Главная - Вопросы по программированию - Попытка создать простое приложение для чата с узлом js — cant host с локального хоста

Попытка создать простое приложение для чата с узлом js — cant host с локального хоста

#javascript #node.js #socket.io #localhost #chat

#javascript #node.js #socket.io #localhost #Чат

Вопрос:

Мы с сестрой отправились на 90 days challenge.

Я прошу ее нарисовать мне что-нибудь (она графический дизайнер, учится создавать некоторые картины на iPad, а я учусь программировать). Это способ, которым мы хотели бы мотивировать себя на улучшение наших навыков. 🙂 может быть, это кого-то вдохновит..

Передо мной стояла задача создать простое приложение для чата, чтобы мы могли изменить несколько текстовых сообщений — вот и все.

Я провел некоторое исследование, загрузил node.js (никогда ранее не использовался), загруженный socket.io , и создайте что-нибудь с помощью руководств из Интернета.

Когда я запускаю это приложение локально, оно работает нормально — я могу отправлять сообщения из браузера в браузер.

Я пытался использовать xampp для его размещения, чтобы мы могли вводить что-то друг другу, но это не работает — это цель.

Я добавил правила IIS (если это важно), я внес изменения в брандмауэр, добавил исключения для открытия порта 3000, но он по-прежнему не работает.

Я получаю сообщение об ошибке 400 или ввод-вывод не определен.

Я думаю, что это переросло мои навыки — я слишком новичок, но я хотел бы сделать все, чтобы пройти этот вызов.

Пожалуйста, проверьте приведенный ниже код. Я был бы признателен за любой совет или подсказку, которые помогли бы решить проблему.

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 Roundamp;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>

server.js код:

 const io = require('socket.io')(3000);

const users = {}

io.on('connection', socket => {
    socket.on('new-user', name => {
        users[socket.id] = name;
        socket.broadcast.emit('user-connected', name);
    })

    socket.on

    socket.on('send-chat-message', message => {
        socket.broadcast.emit('chat-message', {
            message: message,
            name: users[socket.id]
        });
        console.log(message);
    })

    socket.on('disconnect', () => {
        socket.broadcast.emit('user-disconnected', users[socket.id]);
        delete users[socket.id];

    })

})

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);
}```

Ответ №1:

Я думаю, что ваша проблема заключается в том, что не удается загрузить сокет.библиотека ввода-вывода. localhost работает только на вашем локальном компьютере, поэтому измените приведенное ниже в вашем html коде

 <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>

если вы хотите проверить свой IP-адрес, вы можете зарегистрироваться здесь.
https://www.google.com/search ?q = get my ip

Комментарии:

1. ОК. если вы используете в Windows run — cmd — ipconfig / all и сообщите мне ipv4-адрес первых 3 чисел.

2. Если ваш IP-адрес начинается с 192. ~~~ это изменение на этот IP-адрес и проверка в том же wifi.

3. я следовал этому руководству: socket.io/get-started/chat Это устранило мои проблемы. в любом случае большое спасибо за поддержку <3

Метки: