websocket на стороне клиента

[Роман Андреевич]

Коллеги, доброго времени суток,
суть проблемы такова. Пишу приложение и вэбсокетами. Встал на клиенте. Точнее встал над recconect
Вот код:

'use strict';
window.SocketModule = ((window) => {
        
    class SocketModule {
        
        constructor(options) {
            
            this.path = options.path;
            this.reconnectNumber = 0;
            this.connection();
            
        }
        
        /*
         *  connection - установить соединение
         *      connectionStatus,
         *      
         *  disconnection - остановить соединение
         *  reconnection - пересоединение
         *  
         *  send - отправить сообщение
         *  accept - принять сообщение
         *  
         */
        
        connection() {
            
            this.socket = new WebSocket(this.path);
                
                this.socket.addEventListener('open', (e) => {

console.log('connection...);
                    
                    this.send('checkConnection', {

                        connect: true

                    });
                    
                    
                    
                });
                
                this.socket.addEventListener('close', (e) => {

console.log('reconnection... please wait...');
                    
                    this.connection(this.path);
                    
                });

        }
        
        send(event_name, data) { // event_name (string), data (string, array, object)

            if (event_name.constructor.name === 'String') {
                
                let _this = this;
                
                this.wait(function() {
                
                    _this.socket.send(JSON.stringify({event_name, data}));

                }, 0);
                
            } else return;
            
        }
        
        wait(callback, time) {
            
            let timer;
            clearTimeout(timer);
            
            if (this.socket.readyState === 1) {
                callback();
            } else {
                let _this = this;
                timer = setTimeout(function() {
                    _this.wait(callback, time);
                }, time);
            }
        }
    
    };
    
    return SocketModule;

})(window);

Создается экземпляр класса websocket и на него навешивается события open и close. По событию close происходит рекурсивный вызов этой же функции. В консоль падает сообщение : WebSocket connection to 'ws://server.localhost:5555/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED - так и должно быть. После включения сервера связь появляется, все ок.

Но у меня вопрос, может кто делал или словом подскажет. Как избежать данного сообщения??? Или может, как сделать reconnect???

[Роман Андреевич]

Проблема, даже не в сообщении, а в том, что увеличивается время каждого следующего переподключения

[ruslan_mart]

let timer;
clearTimeout(timer);

Так Вы тут по факту заново заводите переменную таймера, которая равна undefined.

Сохраняйте ID таймаута в this.

wait(callback, time) {
             
            clearTimeout(this._timer);
             
            if (this.socket.readyState === 1) {
                callback();
            } else {
                this._timer = setTimeout(() => this.wait(callback, time), time);
            }
        }

[Роман Андреевич]

ruslan_mart, ничего не поменялось, задержки те же самые.

[SuperZen]

взял тут https://socket.io/docs/client-api/#n...er-url-options

<table>
  <thead>
    <tr>
      <th>Option</th>
      <th>Default value</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>path</code></td>
      <td><code>/socket.io</code></td>
      <td>name of the path that is captured on the server side</td>
    </tr>
    <tr>
      <td><code>reconnection</code></td>
      <td><code>true</code></td>
      <td>whether to reconnect automatically</td>
    </tr>
    <tr>
      <td><code>reconnectionAttempts</code></td>
      <td><code>Infinity</code></td>
      <td>number of reconnection attempts before giving up</td>
    </tr>
    <tr>
      <td><code>reconnectionDelay</code></td>
      <td><code>1000</code></td>
      <td>how long to initially wait before attempting a new reconnection (<code>1000</code>). Affected by +/- <code>randomizationFactor</code>,
        for example the default initial delay will be between 500 to 1500ms.</td>
    </tr>
    <tr>
      <td><code>reconnectionDelayMax</code></td>
      <td><code>5000</code></td>
      <td>maximum amount of time to wait between reconnections (<code>5000</code>). Each attempt increases the reconnection
        delay by 2x along with a randomization as above</td>
    </tr>
    <tr>
      <td><code>randomizationFactor</code></td>
      <td><code>0.5</code></td>
      <td>0 &lt;= randomizationFactor &lt;= 1</td>
    </tr>
    <tr>
      <td><code>timeout</code></td>
      <td><code>20000</code></td>
      <td>connection timeout before a <code>connect_error</code> and <code>connect_timeout</code> events are emitted</td>
    </tr>
    <tr>
      <td><code>autoConnect</code></td>
      <td><code>true</code></td>
      <td>by setting this false, you have to call <code>manager.open</code> whenever you decide it’s appropriate</td>
    </tr>
    <tr>
      <td><code>query</code></td>
      <td><code>{}</code></td>
      <td>additional query parameters that are sent when connecting a namespace (then found in <code>socket.handshake.query</code>        object
        on the server-side)</td>
    </tr>
  </tbody>
</table>

Each attempt increases the reconnection delay by 2x along with a randomization as above

[Роман Андреевич]

SuperZen, спасибо, но socket io в данном случае не подходит

[SuperZen]

а, что-то не увидел ) что не socket.io -

да, vanilla websocket не имеет таких настроек по дефолту ) как socket.io

https://github.com/websockets/ws/wik...auto-reconnect

https://stackoverflow.com/questions/...s-in-websocket

https://github.com/joewalnes/reconnecting-websocket - древнее какое-то оно, но как идея )

а почему не сделать на socket.io, ? или бэк на другом языке?

[Роман Андреевич]

SuperZen, да подходит, только у меня подразумевается cluster, а там еще в настройках не разбирался, по всей видимости буду использовать именно socket io. Но с другой стороны, в моем случае проблема в сообщении, которое прилетает в консоль WebSocket connection to 'ws://server.localhost:5555/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED. Подключение восстанавливается но с задержкой, и чем дольше выключен сервер, тем больше эта задержка, фотку не могу вставить в сообщение, почему с компа не дает???????
В socket io есть лишнее. Мне в проекте нужны только websockets, а там все транспорты, ws + ajax и тд, он сам проверяет на доступность. Мне нужно по идее, только подключение по ws. От сюда и решил сам написать модуль.

Можно конечно воткнуть ajax, для проверки доступности сервера...

[Белый шум]

Проблема, даже не в сообщении, а в том, что увеличивается время каждого следующего переподключения

А увеличение времени задержки происходит, случайно, не в фоновой вкладке (либо когда сам браузер свёрнут/перекрыт другим приложением)??

Если да, то это оптимизации браузера - вроде сафари так делает, тогда как файрфокс с хромом просто повышают задержку до 1 секунды. В таком случае надо перенести setTimeout в веб-воркер: https://github.com/mohayonao/worker-timer

[Роман Андреевич]

Белый шум, все верно, браузер увеличивает задержку примерно на 1 секунду (в хроме сижу), и через 50 попыток соединиться, я включаю сервер и жду пока клиент подключится.

если не вешать слушалку событий то ничего не вылетает (я про сообщения, но и не могу в браузере дать пользователю понять что связи нет)))))))))

с аяком проще, там 502 и все норм, а тут есть только статус, и слушалка (addeventlistener) но при close вылетает сразу ошибка