Текст не отображается в моем приложении чата basi c с socket.io - PullRequest
Новая
       7

Текст не отображается в моем приложении чата basi c с socket.io

1 голос
/ 03 апреля 2020

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

Я не уверен, почему текст не отображается.

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

Кроме того, когда я нахожусь в консоли chrome, если я go к элементам, я вижу это, когда я нажимаю посланника Кнопка отправляет <div class="line"></div>, поэтому сообщение отсутствует.

Спасибо за помощь.

enter image description here

publi c папка вещи:

чат. js в publi c папка 

const socket = io.connect();

let username;

document.getElementById('identificationButton').onclick = function(){
    username = document.getElementById('nameInput').value || 'user';

    document.getElementById('identificationBox').style.display = 'none';
    document.getElementById('messagesSection').style.display = 'block';
};

function addMessage(user, messageContent){
    document.getElementById('chatBox').insertAdjacentHTML('beforeend',`<div class="line"><span class="label label-primary>${user}</span>${messageContent}</div>`)

};


document.getElementById('sendMessageButton').onclick = function(){
    const messageContent = document.getElementById('messageInput').value;
    socket.emit('newMessage', {username, content: messageContent});

    addMessage(username, messageContent);
};

socket.on('getMessages', function (messages){
    messages.forEach(m => addMessage(m.username, m.content))
});

socket.on('getMessage', function (message){
    addMessage(message.username, message.content)
});

чат. css в папке c в папке 

input{
    height: 35px;
}

#container{
    border: 1px solid #ff77ff;
    width: 500px;
    height: 300px;
    margin: auto;
    border-radius: 4px;
    position: relative;
}

#chatBox{
    overflow: auto;
}

#nameInput{
    width: 497px;
}

#sendMessageBox{
    position: absolute;
    bottom: 0;
}

.line{
    background-color: orange;
    border: 1px solid black;
    padding: 10px;
    text-align: left;
}

#messageInput{
    width: 435px;
}

без указания c папок:

index. html

<!DOCTYPE html> 

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title> Chat</title>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="chat.css">


</head>
<body>
<div id="container">
    <div id="identificationBox">
        <h2>Entrez votre nom</h2>
        <input id="nameInput" type="text">
        <button id="identificationButton" class="btn btn-primary">Commencer a chatter</button>
    </div>
    <div id="messagesSection" style="display:none;">
        <div id="chatBox">

        </div>
        <div id="sendMessageBox">
            <input id="messageInput" type="text">
            <button id="sendMessageButton" class="btn btn-primary">Envoyer</button>
        </div>
    </div>    
</div>
<script type="text/javascript" src="chat.js"></script>

</body>

</html>

ChatServer. js

const messages = [];

exports.onConnection = (socket) => {

    socket.emit('getMessages', messages);
    socket.on('newMessage', (message) =>{
        messages.push(message);

        socket.broadcast.emit('getMessage', message)
    })
}

index. js

const express = require('express');
const chatServer = require('./ChatServer.js')
const app = express();

const port = process.env.PORT || 3000;
const http = require('http').Server(app);

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

// va pointer directement sur le folder public
app.use(express.static('public'));

app.get('/chat', (req, res) => {
    res.sendFile(__dirname + '/index.html')
});

io.on('connection', chatServer.onConnection );

http.listen(port);
console.log(`listening on port ${port}`);
...