Обновление страницы очищает все данные

Question

Я работаю над базовым чат-приложением, работающим на express.js и socket.io.

Код на стороне сервера:

var express = require("express");
var app = express();
var server = require('http').createServer(app);
var io = require("socket.io").listen(server);
var path = require("path");
app.use(express.static(path.join(__dirname, "public")));
app.set("view engine", "ejs");

server.listen(process.env.PORT || 3000, function() {
    console.log("Server listening");
})

app.get("/", function(req, res) {
    res.render("chat");
})

io.sockets.addListener("connection", function(socket) {
    socket.addListener("chat-message", function(message, nickname) {
        io.sockets.emit("chat-message", message, nickname)
    })
})

Код на стороне клиента:

var socket = io();
var nickname = prompt("Whats your name?");

var input = document.getElementById("text-input");
var container = document.getElementById("chat-container");

input.addEventListener("keydown", function() {
    if (event.keyCode == 13) {
        event.preventDefault();

        if (input.value !== "") {
            socket.emit("chat-message", nickname + ": " + input.value);
            input.value = "";
        }
    }  
})

socket.addEventListener("chat-message", function(message) {
    container.innerHTML += message + "</br>";
})

Есть ли способ избежать удаления информации с веб-страницы после обновления?

Answer 1

Вы можете сохранить все сообщения и псевдонимы в переменной globar и отправлять их при каждом новом подключении к сокету.

var messages = [];    
io.sockets.addListener("connection", function(socket) {
  //send messages to new connection     
  socket.addListener("chat-message", function(message, nickname) {
    messages.push({message: message, nickname: nickname});  
    io.sockets.emit("chat-message", message, nickname)
   })
})

[Редактировать]
Клиентская сторона

socket.addEventListener("chat-previous-messages", function(messages) {
    for(let i = 0; i < messages.length; i++){
       container.innerHTML += messages[i].message + "</br>";
    }
})

Серверная сторона

var messages = [];    
io.sockets.addListener("connection", function(socket) {
  socket.emit('chat-previous-messages', messages); //new code     
  socket.addListener("chat-message", function(message, nickname) {
    messages.push({message: message, nickname: nickname});  
    io.sockets.emit("chat-message", message, nickname)
   })
})

Или вы можете обслуживать страницу чата с уже отображенными сообщениями

app.get("/", function(req, res) {
   res.render("chat", messages);
})
//in the html part something like this
#chat-container
    - each message in messages
      message.message + '<br>'