Архитектура браузерного клиента
часть 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. как тут код отформатировать? Пробелы в начале строки отрезает
ееееее, потрашки....вкусняшка