How to break websocket connection (Socket.IO + Redis + Laravel 5)?

Question

css

There is a socket server: socketio + ioredis .
When the page loads, a connection to the server is created:

socket = io(socketURL);
socket.on('connect', function (user) {
    socket.emit('join');
});

In this case, everything works as it should.

Problem: when "switching" the chat, the socket initialization is performed anew, that is, it executes the following code:

if (typeof socket != 'undefined') {
        console.log('We must drop the connection (disconnect) :<');
        socket.close();
    }
    socket = io(socketURL);

    socket.on('connect', function (user) {
        socket.emit('join');
    });

And now the events are starting to duplicate. The number of chat switching increases the multiplicity of events, that is, first they are duplicated, then x4, x8, and so on. I can't understand what needs to be done. Break connection?
When socket.close() is executed from the client on the server:

socket.on('disconnect', function () {
     socket.close();
     return;
});

but this does not break the connection and the events continue to be duplicated.
Number of repetitions = number of WS connections ( screenshot ). How to break them properly?

Thank you.

Answer 1

it seems to work
the code is not perfect, but I hope you get the idea
codepen.io/just-a-training/pen/NAXWxm/?editors=1100

Answer 2

It looks like all the blocks are the same width.

• Then you can set the width through percentages for large resolutions.
  
• Make the lines based on the width of the section, rotate with a transform and absolutely position. Rounds with numbers naturally then should be a level higher (z-index)
  
• For smaller resolutions, the design should be changed somewhat, abandoning the lines, since such a design will not look in two lines (IMHO), but it will not fit into one
  

Answer 3

SVG to help you
xiper.net/learn/svg

Answer 4

It is possible with canvas methods

Answer 5

Decision. Redis hung
pmessage to catch events by pattern. In your case, it could just be message ' It looked like this:

redis.on('pmessage', function (pattern, channel, message) {
    // some code
});

The following helped in my case:

// вешаем событие не через .on, а через .addListener
// onPmessage - коллбэк, который вынесен в функцию, в этом же пространстве имен
redis.addListener('pmessage', onPmessage);

disconnect event :

socket.on('disconnect', function () {
    redis.removeListener('pmessage', onPmessage);
});

The problem is over.
stackoverflow.com/questions/11617811/how-to-remove...