Как сделать систему переписки?сесть и сделать. Написать код(клиента и сервера), создать бд/таблички, настроить сокеты... Много чего сделать чтоб создать...
Ну как в ВК, или Telegram.Вообще 2 разные системы, первая сайт-соцсеть, вторая приложение.
Как сделать её быстрой?Оптимизировать код, оптимизировать запросы, купить сервер по мощнее,
Ваще прям с самого нуля, от добавления в базу данных до выведения на страницу.Ваще прям с нуля сначала пишете код добавления в базу, потом вывода на страницу, потом еще кучу всего, потом отладка, дебаг, тестирование, рефакторинг... Короче все как обычно, ничего принципиально отличного от любой другой задачи.
И как сделать чтобы показывалось прочитано или нет.при загрузке сообщения смотреть активно ли окно диалога, если активно - на сервер отослать что сообщение прочитано, если нет - по активации окна отослать что все ранее присланные сообщения прочитаны.
Редактирование и удаление сообщений.Да. В смысле делай. Все так же, код редактирования, код удаления...
class User (){
construct ()
save() {
return ajax-запрос
}
}
class List () {
this._list = []
consruct(id) {
}
addItem(user)
render () {
doucment.getElemntBy(id).innerHtml = ''
this._list.forEach(user => {
// добавление новой строки
})
}
fetcList () {
return аяк-запрос.then(users => {
this._lsit = []
users.forEachv(user => {
this.addItem(user)
})
})
}
}
new Subsriber {
action,
cb
}
class Emitter {
this._evts = []
subsctibe(action, cb) {
this.evts.push(new Subsriber (action, cb))
}
emit(action, value) {
this.evts.forEach({action} => {
if (act === action) {
cb(value)
}
})
}
}
class Form (){
consruct(id, emmiter) {
doucment.getElemntBy(id).addEventListener('sumbit', () => this.onSubmit)
}
addElement(elem) {
this.elements.push(el)
}
onSubmit () {
const user = new User()
for (let elem of this.elements) {
user[elem.name] = elem.value
}
user.save().then(добавленный юзер => {
this.emmiter.emit('submit', user)
})
}
}
render () {
doucment.getElemntBy(id).innerHtml = ''
this.elements.forEach(elem => {
doucment.getElemntBy(id).insertBefore(elem)
})
}
}
// инициализация этого говна
const list = new List(listId)
const emmiter = new Emiiter()
const form = new Form(formId, emmiter)
form.addElement(document.createElemnt('input'))
// теперь отрисовка
form.render()
list.render()
// подписываемся на события формы
emmiter.subscribt('sumbit', user => {
list.addItem(user)
if (не грузим с сервера) {
// перерисуем
list.render()
} else {
// перерисуем
list.fetchList().then(() => ist.render())
}
})
users.push(this.user);
let lastUser = users[users.length - 1];
Радует что нет адаптива
<div id='l1_1'>
<div id='l2_1'>
<p id='l3'>
</div>
<p id='l2_2'>
</div>
<p id='l1_2'>
<p id='l1_3'>#l1_1 > p соответствует элементу #l2_2#l1_1 + p соответствует элементу #l1_2 
> - наследование внутренних тегов+ - наследование соседних тегов.
