Как отобразить случайное число в Socket.io?

В настоящее время я работаю над проектом, включающим Socket.io, и создаю приложение для чата. Я хотел бы отправить сообщение со входа после нажатия кнопки отправки, которое отобразит сообщение, а также отобразит случайный номер кости после нажатия другой кнопки.

Итак, проблема с этим кодом до сих пор заключается в том, что когда я нажимаю кнопку, которая должна генерировать случайное число, она просто пуста.

Я был бы рад любому совету, который я могу решить!

index.html

<div id="messages"></div>
    <form id="send-container">
        <input type="text" id="inputMessage" placeholder="Aa">
        <button type="submit" id="send">Skicka meddelande</button>
        <button id="roll">Kasta tärningen</button>
    </form>

main.js

const socket = io();
const messageForm = document.getElementById('send-container');
const messageContainer = document.getElementById('messages')
const inputMessage = document.getElementById('inputMessage');
const rollDice = document.getElementById('roll');

const userName = prompt('Vänligen skriv ditt användarnamn.')
showMessages('Välkommen! Du är nu ansluten till chatten!')
socket.emit('new-connection', userName)

socket.on('message', data => {
    showMessages(`${data.userName}: ${data.message}`);
});

socket.on('throw-dice', data => {
    showMessages(`${data.userName}: ${data.throw-dice}`);
});

socket.on('connected', userName => {
    showMessages(`${userName} har anslutit till chatten`);
});

socket.on('disconnected', userName => {
    showMessages(`${userName} har lämnat chatten`);
});

messageForm.addEventListener('submit', e => {
    e.preventDefault();
    const message = inputMessage.value;
    showMessages(`Du: ${message}`)
    socket.emit('send-message', message)
    inputMessage.value = '';
})

rollDice.addEventListener('click', () => {
    const randomNumber = "Du kastade tärningen och fick värdet: " + Math.floor(Math.random() * 6) + 1;
    socket.emit('throw-dice', randomNumber);
}, false)

function showMessages(message, randomNumber) {
    const diceElement = document.createElement('div')
    const messageElement = document.createElement('div')
    diceElement.innerText = randomNumber
    messageElement.innerText = message
    messageContainer.append(messageElement, diceElement);
}

сервер.js

const express = require("express");
const path = require('path');
const app = express();
const http = require('http');
const server = http.createServer(app);
const io = require('socket.io')(server);
const port = 3000;

const user = {}

app.use(express.static(path.join(__dirname + '/public')));

io.on('connection', (socket) => {
    console.log(`User with id ${socket.id} joined to the chat!`);

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

    socket.on('send-message', message => {
        socket.broadcast.emit('message', {
            message: message,
            userName: user[socket.id]
        })
    });

    socket.on('throw-dice', randomNumber => {
        socket.broadcast.emit('randomNumber', {
            message: randomNumber,
            userName: user[socket.id]
        })
    });

    socket.on('disconnect', () => {
        socket.broadcast.emit('disconnected', user[socket.id])
        delete user[socket.id]
        console.log(`User with id ${socket.id} left the chat!`);
    });
});

server.listen(port, () => {
    console.log(`Socket.IO server running at http://localhost:${port}/`);
});
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
0
23
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы отправляете свою трансляцию с идентификатором события «randomNumber» (с сервера), ожидая получить событие «throw-dice» (на клиенте, main.js). Измените один из них, чтобы он соответствовал другому, и я считаю, что он должен работать нормально.

Другие вопросы по теме