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>