Архитектура браузерного клиента⁠⁠

часть 1
часть 2

Разработка идет своим ходом, однако поток новой информации уже не такой сильный. Больше времени уходит на анализ имеющегося, разбор деталей и построение концепций, перенос кода на новые концепции (например, последним серьезным изменением был перенос "движка" с FIFO из массивов на события, на коих строится большая часть работы JS)

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

Сам движок чата "зашифрован" в chatwss.js
Оранжевым и сиреневым отмечены модули графического интерфейса.

Архитектура

Делая своего клиента для чата, я сначал хотел переиначить "под себя" архитектуру сервиса, но с каждой новой попыткой ввести что-то новое понимал, что автор сего творения уже предложил весьма неплохую, мне надо только вклиниться в нее.

Примерно так работает веб-клиент чата (андроид-клиента я не разбирал, но, думаю, примерно так же устроен и он):

Пользователь  работает с GUI, нажимает кнопочки, набирает сообщения. На кнопках висят события, которые, как правило, дают задания ChatEngine.

ChatEngine  в свою очередь является подобием обертки для работы с сокетом. Он формирует и отсылает сообщения на сервер, параллельно передавая команды в GUI.

HandlerMessage - приемник сообщений. Передает новые сообщения и уведомления (о прочтенных сообщениях, о наборе текста, об отключении собеседника) на отрисовку в окне чата.

Один из методов ChatEngine:

searchCompany: function(_1) { //на вход принимает данные поиска

_1[action] = SEARCH_COMPANY; //указывает тип действия

stepShow(search_company_step); //несколько команд интерфейсу

$(# closeDialogBtn)[removeClass](disabled);

$(# search_company_loading)[css](visibility, visible);

Socket[send](_1) //отсылка сообщения

},

Сервер получает вот такое сообщение, а в окне запускается поиск собеседника:

{

my_sex: "M",

wish_sex: "F",

my_age_from: "25",

my_age_to: "35",

action: "SEARCH_COMPANY"

}

Пример сообщения от сервера (юзер печатает текст):

{

message: {

dialog_id: 35703950,

typing: true,

uid: 4564686

},

notice: "user_typing_a_message"

}

Отсылка команд на обработку. Не очень безопасно, но весьма практично. Берется  значения поля notice  и запускается метод хэндлера с таким же именем.

ws[onmessage] = function(_E) {  //прием сообщения от сервера

var _6 = JSON[parse](_E[data]); //разобрка принятой строки в JSON-объект

if (HandlerMessage[_6[notice]]) { //проверка наличия метода в хэндлере

if (_6[request_id]) {  

HandlerMessage[_6[notice]](_6[message], _6[request_id])  // вызов 1

} else {

HandlerMessage[_6[notice]](_6[message]) //вызов 2

}

}

};

Примерно так выглядит обмен сообщениями на сокете. Зеленым обозначены исходящие сообщения, остальное - принимаемые.

Начинается с авторизации, затем поиск, открытие диалога. Кстати, идет постоянный спам сообщениями о количестве онлайн-пользователей.

Вот так работает этот чат.
На сегодня пока все. Жду дальнейших пожеланий и возможно, идей.

P.S. как тут код отформатировать? Пробелы в начале строки отрезает