[Malleys]

Та и не нашёл, где там модули! То, что вы запихнули файлы в папку `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)