Add a new 'reset' event from server to client before replay

This handles the case of a client that persists across a server
restart, (or various other disconnect/reconnect scenarios).

Prior to this commit, the client could end up with multiple copies of
images through the following sequence:

1. A client is chugging along with the server and has a set of images

2. The server is stopped and restarted

3. When the server comes up again it sees the client connect and so it
   replays all images

Boom. The client now has multiple copies of any image it already had.

To fix this, the server now sends a 'reset' event prior to sending any
replay of images. When the client gets this, it clears out all images
it has.

diff --git a/index.html b/index.html
index f5eaea05170672ac01fc4f018f014223c6c2a8f7..ad53d866130fc1b683f5d1274c203c4aff2b4a79 100644 (file)
--- a/index.html
+++ b/index.html
@@ -131,6 +131,10 @@ mute.addEventListener("click", () => {
         comments.appendChild(item);
     });
 
+    socket.on('reset', () => {
+        images.replaceChildren();
+    });
+
     socket.on('image', (image) => {
         const figure = document.createElement('figure');
         const img = document.createElement('img');

diff --git a/index.js b/index.js
index cd1911def06ba21b1197a72c9bd6b1d5405b0989..9d4028fbd4cad5a1889ddadc037fd39949388946 100644 (file)
--- a/index.js
+++ b/index.js
@@ -78,6 +78,7 @@ io.on('connection', (socket) => {
     console.log("Connection from client with " + socket.request.session.views + " views.");
 
     // Replay old comments and images to a newly-joining client
+    socket.emit('reset');
     state.comments.forEach((comment) => {
         socket.emit('comment', comment)
     });