Печать переменной в div

Question

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

var socket = io(); 

$('form').submit(function(e) { 
    e.preventDefault(); 

    // gets the value from the message text feild and sets it as the message var 
    var message = { 
    text: $('#chat-box-div-txtinpt').val() 
    } 
    if (message.text.trim().length !== 0) { 
    socket.emit('chat-message', message); 
    } 
    $('#chat-box-div-txtinpt').focus(); 
    document.getElementById('chat-box-div-txtinpt').value=''; 
}); 

Серверный скрипт

var app = require('express')(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http); 

app.get('/', function(req, res) { 
    res.sendfile('index.html'); 
}); 

http.listen(3000, function() { 
    console.log('listening on *:3000'); 
}); 

io.on('connection', function (socket) { 
    console.log('a user connected'); 
    socket.on('disconnect', function() { 
    console.log('user disconected'); 
    }); 
    socket.on('chat-message', function (message) { 
    console.log('message: ' + message.text); 
    }); 
}); 

Вот site

Answer 1

Похоже вы используете JQuery, так что для этой линии: document.getElementById('chat-box-div-txtinpt').value=''; вы могли бы просто сделать $('#chat-box-div-txtinpt').val('');

, чтобы ответить на ваш вопрос: вы можете просто сделать $('#chatlog-display-div').append(message.text)

Ваш код будет в конечном итоге выглядит что-то вроде этого

$('form').submit(function(e) { 
    e.preventDefault(); 

     //gets the value from the message text feild and sets it as the message var 
    var message = { 
     text : $('#chat-box-div-txtinpt').val() 
    } 
    if (message.text.trim().length !== 0) { 
     socket.emit('chat-message', message); 

     //append the message to the chatlog-display-div 
     $('#chatlog-display-div').append(message.text); 
    } 
    //clear the value of the txtinput after you focus it. 
    $('#chat-box-div-txtinpt').focus().val(''); 
}); 

Пожалуйста, отметьте как принятый ответ, если вы считаете, что это адекватно решает проблему.

Answer 2

Для отправки сообщения всем от использования сервера emit() от io

на сервере

socket.on('chat-message', function (message) { 
    console.log('message : ' + message.text); 
    io.emit("chat-message",message); 
}); 

на клиенте

socket.on('chat-message',function(message){ 
    //add message to the chat window 
}); 

Если вы не хотите, человек, посылающий сообщение для получения chat-message испускают затем использовать broadcast.emit() из socket, который послал его

//server 
socket.on('chat-message', function (message) { 
    console.log('message : ' + message.text); 
    //excludes "socket" from getting the emit 
    socket.broadcast.emit("chat-message",message); 
}); 

Чтобы фактически поместить сообщение в DIV просто использовать любой из различных методов JQuery в html()/text()/append()

//client 
socket.on('chat-message', function (message) { 
    jQuery(".chat-window").append('<div>'+message.text+'</div>'); 
}); 

Answer 3

Вы могли бы просто .append текст в «chatlog-display-div» с храмом, если вы используете ES6, может быть чем-то вроде

$ ('form'). s ubmit (функция (e) { e.preventDefault();

 //gets the value from the message text feild and sets it as the message var 
    var message = { 
     text : $('#chat-box-div-txtinpt').val() 
    } 
    if (message.text.trim().length !== 0) { 
     socket.emit('chat-message', message); 
     document.getElementById('chatlog-display-div').append('<divclass="message-style" > ${message.text}</div>') 
    } 
    $('#chat-box-div-txtinpt').focus(); 
     document.getElementById('chat-box-div-txtinpt').value=''; 
});