CODEWITHSUNDEEP
javascriptnode.jsexpressserversocket.io
Kamran Poladov
Kamran Poladov

Reputation: 490

Page refresh clears all the data

I'm working on basic chat-application running on express.js and socket.io.

Server-side code: 

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)
    })
})

Client-side code: 

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>";
})

Is there any way to avoid deleting info from the webpage after refresh?

Upvotes: 0

Views: 381

Answers (1)

duatis
duatis

Reputation: 184

You can save all the messages and nicknames in a globar variable and send them on every new connection to the socket.

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)
   })
})

[Edit]
Client Side

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

Server side 

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)
   })
})

Or you can serve the chat page with the messages already displayed

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>'

Upvotes: 1

Related Questions