Коллеги, прошу опять помощи, как и писал выше после создания соединения, не могу вызывать sendMessage!!! как исправить????

ну выложи куда-нибудь проект, а то, из 4 "классов" показал только 2, как происходит инициализация и т.д. неизвестно

SuperZen, остальные не важны:

main.js - тут просто подключаются модули, будут проверки браузера и в конце запускается приложение Chat:

'use strict';
(function(window) {

    document.addEventListener('DOMContentLoaded', function() {
        
        const Chat = window.Chat;
            
        const chat = new Chat;
        chat.init();

    });

})(window);

chat.js - это само приложение, в нем будет вся логика (пока что логика ws)))) вернее организовать подключение и дальнейшее использование в приложении) :

'use strict';
window.Chat = (function(window) {
    
    const socketModule = window.SocketModule;
    
    class Chat {
        
        constructor() {
            
               this.transport = new socketModule({
                
                path: window.options.socketPath
                
            });
            
        }
        
        init() {
            
            this.transport.sendMessage('chat_message', {
                
                type: 'text',
                text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
                
            });            
            
        }
        
    }
    
    return Chat;
    
})(window);

и собственно socketModule.js, логика его как и выше писал. :

'use strict';
window.SocketModule = (function(window) {
        
    class SocketModule {
        
        constructor() {
            
            this.socket;
            this.connection();
            
        }
        
        connection() {
            
            const _t = this;
            
            this.checkServer(function(server) {
                
                if (!server) return;
                
                _t.socket = new WebSocket('ws://server.localhost:5555');
                
                _t.socket.addEventListener('open', function() {
                    
                    _t.sendMessage('connection', {
                        
                        client: true
                        
                    });

                    _t.indicatorControl(true);

                });
                
                _t.socket.addEventListener('close', function() {
                    
                    _t.indicatorControl(false);

                    _t.connection();

                });
                
            });
            
            return this;

        }
        
        checkServer(callback) {
            
            let timer;
            const _t = this;
            let count = 0;
            
            timer = setInterval(function() {
                
                const req = new XMLHttpRequest();
            
                req.open('GET', '/api/connect', true);
                req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                
                req.send(null);

                req.addEventListener('load', function() {
                    
                    if (req.status === 200) {
                        
                        clearInterval(timer);
                        
                        callback(true);
                        
                    }

                });
                
                count++;
                
                if (count === _t.reconnectCount) {
                    
                    clearInterval(timer);
                    
                    console.log('Превышен лимит ожидания!');
                    
                }
                
            }, 200);
            
            return this;
                        
        }
        
        sendMessage(event_name, data) { // event_name (string), data (string, array, object)

            if (event_name.constructor.name === 'String') {
                
                const _t = this;
                
                this.readyStateConnection(function() {
                
                    _t.socket.send(JSON.stringify({event_name, data}));

                });
                
            } else return;
            
            return this;
            
        }
        
        readyStateConnection(callback) {
            
            let timer;
            clearTimeout(timer);
            
            if (this.socket.readyState === 1) {
                
                callback();
                
            } else {
                
                const _t = this;
                timer = setTimeout(function() {
                    
                    _t.readyStateConnection(callback);
                    
                }, 0);
            }
        }
    
    };
    
    return SocketModule;

})(window);

Ну а результат res.render вот, но я думаю он не нужен особо:

<!DOCTYPE html><html lang=ru><head><title>Тестим WebSockets</title><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="/images/favicon.png?v=2qx-wa3g2x" type=image/png><link rel=stylesheet href="/stylesheets/style.css?v=2tg-1rjnwfd"></head><body><noscript>Ваш браузер не поддерживает JavaScript. Включите или используйте другой браузер</noscript><section id=chat><div class=overlay><div id=chat_header><h2>Привет, anton</h2><a href=/logout class=logout>Выйти</a></div><div class=overflow><div id=messages><p>Сообщения в чате:</p><p id=no_messages>Сообщений нет</p></div><div id=users_list><p>Пользователи online</p><ul><li><p>marey</p></li></ul></div></div></div><div id=control_panel><form method=post id=send_message autocomplete=off><textarea name=message_text placeholder="ваше сообщение..."></textarea><button type=submit>Отправить</button></form></div></section><div id=server_message data-action=false></div></body><script src="/javascripts/options.js?v=5a-n5whjv"></script><script src="/javascripts/modules/SecureModule.js?v=8v-18pg8f1"></script><script src="/javascripts/modules/ServiceModule.js?v=1as-zlyrbi"></script><script src="/javascripts/modules/UserModule.js?v=uj-rhyhqe"></script><script src="/javascripts/modules/MessageModule.js?v=r3-m0w1dz"></script><script src="/javascripts/modules/socketModule.js?v=6jh-bhcxxf"></script><script src="/javascripts/Chat.js?v=q0-dpx5ol"></script><script src="/javascripts/main.js?v=dt-14wlng5"></script></html>

this теряется когда вызываю checkServer в socketModule. Вернее я его сохраняю в _t а в this.socket самого модуля он не сохраняется.

Но тогда почему если сделать console.log(this); и console.log(this.socket); в методе sendMessage первое выведет socketModule в котором будет this.socket = экземпляру websocket (все правильно), а второе выведет undefined

const chat = new Chat;

не? https://developer.mozilla.org/ru/doc.../Operators/new

const chat = new Chat();

Та и не нашёл, где там модули! То, что вы запихнули файлы в папку `modules` и, о ужас, дописали к имени переменной "Module", конечно же не сделает из них ни каким автомагическим способом модули. (также они все глобальны у вас, но странности вида `const Chat = window.Chat;` тоже зачем-то встретились)



Чтобы указать входную точку для вашей программы, используйте атрибут type со значением module

<script src="/javascripts/main.js" type="module"></script>

И это единственное, что вам нужно указать в вашем html.

const chat = new Chat;
chat.init();

Так и представил, что было если было бы так:

const array = new Array;
array.init();

Так что почему бы не просто `const chat = new Chat;`?

Используйте стрелочные функции, тогда не придётся писать такое `const _t = this;`

Можно просто `event_name.constructor === String`
`this.socket.readyState === 1` WTF??? Почему не `this.socket.readyState === this.socket.OPEN` мне пришлось посмотреть в документации, что такое 1

У вас в SocketModule.prototype.readyStateConnection переменная timer всегда новая, так что старый таймер невожможно остановить

У вас в chat.js передается `path: options.socketPath`, но в socketModule.js не используется...

Вместо класса XMLHttpRequest можно использовать функцию fetch.

Ваш /api/connect может возвратить не только 200 но и 304 (может быть, у меня именно так и произошло), почему бы не проверять так `response.status >= 200 && response.status < 400`, или даже `response.ok` (если используете fetch)

`this.socket;`
почему бы не (однако это ужасно, кто знает как лучше?)

this.socket = {
	readyState: WebSocket.prototype.CLOSED
};

тогда не будет неожиданных ошибок связанных тем, что this.socket равен null Это и была главная причина!

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

В index.html теперь только нужно, то что касается скриптов

<script src="/javascripts/main.js" type="module"></script>

main.js

import Chat from "./Chat.js";

document.addEventListener("DOMContentLoaded", () => {
	const chat = new Chat;
});

options.js Я использовал этот сервер для теста, у вас там должно быть что-то другое

export default {
	socketPath: "wss://echo.websocket.org"
};

Chat.js

import Socket from "./modules/socketModule.js";
import options from "./options.js";

export default class Chat {
	constructor() {
		this.transport = new Socket({
			path: options.socketPath
		});
		
		// FIXME в отдельный модуль это я проверил как оно работает если текст в текстовое поле ввести и отправить
		document.addEventListener("click", event => {
			if(event.target.matches("#send_message [type='submit']")) {
				event.preventDefault();
				
				this.transport.sendMessage('chat_message', {
					type: 'text',
					text: document.querySelector("[name='message_text']").value
				});
			}
		})
		
		this.transport.sendMessage('chat_message', {
			type: 'text',
			text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
		});
	}
}

modules/socketModule.js

export default class SocketModule {
	constructor({ path }) {
		this.socket = {
			readyState: WebSocket.prototype.CLOSED
		};
		this.connection();
		this.path = path;
	}
        
	connection() {
		this.checkServer(server => {
			if (!server) return;

			this.socket = new WebSocket(this.path);
			this.socket.addEventListener('open', () => {
				this.sendMessage('connection', {
					client: true
				});

				this.indicatorControl = true;
			});
			
			this.socket.addEventListener("message", event => {
				// FIXME логику разбора в отдельный модуль
				const { event_name, data } = JSON.parse(event.data);
				
				if(event_name === "chat_message") {
					var p = document.createElement("p");
					p.textContent = data.text;
					document.getElementById("messages").append(p);
				}
			});

			this.socket.addEventListener('close', () => {
				this.indicatorControl = false;
				this.connection();
			});
		});

		return this;
	}
	
	set indicatorControl(value) {
		// что-то делает
	}

	checkServer(callback) {
		let timer;
		let count = 0;

		timer = setInterval(function() {			
			fetch("/api/connect", {
				headers: {
					"Content-Type": "application/x-www-form-urlencoded"
				}
			}).then(response => {
				if(response.ok) {
					clearInterval(timer);
					callback(true);
				}
			});

			count++;

			if (count === this.reconnectCount) {
				clearInterval(timer);
				console.log('Превышен лимит ожидания!');
			}
		}, 200);

		return this;      
	}
        
	sendMessage(event_name, data) { // event_name (string), data (string, array, object)
		if (event_name.constructor === String) {
			this.readyStateConnection(() => {
				console.log(event_name, data);
				this.socket.send(JSON.stringify({ event_name, data }));
			});
		} else
			return;

		return this;
	}
        
	readyStateConnection(callback) {
		if (this.socket.readyState === this.socket.OPEN) {
			callback();
		} else {
			setTimeout(() => {
				this.readyStateConnection(() => callback());
			}, 0);
		}
	}
};

Но очень там не сердитесь, что я всё исправил на модули, как описано в стандарте JavaScript.

UPD В readyStateConnection всё-таки не нужно стирать таймер, а то сообщения отправленные до подключения не отправятся. Исправил код выше(modules/socketModule.js)

Malleys, +100500 к вашей карме))))))))) Щас посмотрим!!!!!

Malleys, про автомагию это потому что толковых учебных пособий нету, где все и вся будет рассказано)))))))))))))))))))) поэтому приходится учиться как получается к сожалению

А авторы учебников откуда узнают?

Я не знаю как такое для обучения, но я уже прочитал спецификацию языка. Девятое издание. Большая часть конечно же взята из предыдущего издания. https://www.ecma-international.org/e...9.0/index.html

Я не знаю как такое для обучения, но что есть в JavaScript`е и как работает, всё описано. Я не говорю, что вам именно так надо изучать, просто я так узнаю.

Malleys, теперь по коду, который вы написали. Большое спасибо за помощь. Но!

в chat.js в конструкторе, после слушателя просто вызываем метод sendMessage и он не срабатывает!