如何在Socket.io中显示一个随机数？

Question

我目前正在开展一个项目，其中包括 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);
}

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

Answer 1

您发出带有“randomNumber”事件 ID 的广播（来自服务器），同时期望接收“throw-dice”事件（在客户端，main.js）。更改其中一个以匹配另一个，我相信它应该可以正常工作

如何在Socket.io中显示一个随机数？

How to display a random number in Socket.io?

javascript

node.js

express

socket.io