{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"7gal8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":165,"style":"BOLD"},{"length":18,"offset":249,"style":"BOLD"},{"length":19,"offset":343,"style":"BOLD"}],"text":"Думаю, что каждый из Вас знает, что такое чат. И очень часто на сайтах можно встретить либо маленькие чаты, либо достаточно большие и сложные. В этой статье я опишу принцип создания чата. Обратите внимание, что в этой статье не будет готового кода \"скопировал-вставил\", а только алгоритм, с помощью которого Вы, обладая необходимыми знаниями, сможете сделать чат.","type":"unstyled","key":"bi7hl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":41,"style":"BOLD"}],"text":"Ключевая особенность чата в том, что его содержимое обновляется автоматически. Отсюда и возникают все трудности.","type":"unstyled","key":"8odrg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":27,"style":"BOLD"}],"text":"Для начала разберём с Вами структуру таблицы в базе данных. Вот те поля, которые обязательно потребуются:","type":"unstyled","key":"1nb8c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"BOLD"}],"text":"id - уникальный идентификатор.","type":"unordered-list-item","key":"fs3tc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"},{"length":7,"offset":69,"style":"BOLD"},{"length":2,"offset":89,"style":"BOLD"}],"text":"name - имя, оставившего сообщение. Здесь также может быть, например, user_id, означающий id пользователя из другой таблицы.","type":"unordered-list-item","key":"4q2rn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"message - сам текст сообщения.","type":"unordered-list-item","key":"e0hsm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"date - дата отправления сообщения.","type":"unordered-list-item","key":"84fne"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Безусловно, это только пример. Вы можете добавлять ещё массу других полей, тем самым, расширяя возможности Вашего чата.","type":"unstyled","key":"3ril0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":26,"style":"BOLD"}],"text":"Теперь необходимо вывести HTML-код:","type":"unstyled","key":"9ev3g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":301,"offset":0,"style":"ITALIC"}],"text":"

\n \n \n \n \n \n \n \n \n \n \n \n

Имя	Сообщение	Дата
Имя	Сообщение	Дата

\n \n \n

","type":"blockquote","key":"7bqd7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"7f2p4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":242,"style":"BOLD"}],"text":"В данном коде опять же всё как пример. Можно всё смело менять, но принцип должен быть тем же: есть место, где выводятся сообщения, причём они выводятся в одинаковом виде. Вместе с полем, где выводятся сообщения, есть текстовое поле и кнопка \"Отправить\".","type":"unstyled","key":"6bc8a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":22,"style":"BOLD"},{"length":3,"offset":238,"style":"BOLD"}],"text":"Обязательно для блока chat поставьте фиксированную высоту, чтобы при добавлении новых сообщений, у Вас этот блок не вырастал, также поставьте полосу прокрутки у него, чтобы можно было просмотреть все сообщения. Всё это делается с помощью CSS.","type":"unstyled","key":"6539f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":16,"style":"BOLD"}],"text":"Теперь займёмся JavaScript:","type":"unstyled","key":"5grno"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":506,"offset":0,"style":"ITALIC"}],"text":" ","type":"blockquote","key":"bt70p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":13,"style":"BOLD"}],"text":" И, наконец, PHP-код (добавление новых сообщений): ","type":"unstyled","key":"88b17"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":214,"offset":0,"style":"ITALIC"}],"text":" ","type":"blockquote","key":"9mh2o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" И последний файл, которые потребуется - это получение всех сообщений из таблицы: ","type":"unstyled","key":"9tk8l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":207,"offset":0,"style":"ITALIC"}],"text":" ","type":"blockquote","key":"1b2u3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":51,"style":"BOLD"}],"text":" Всё, круг замкнулся, и чат заработал. Как видите, сделать чат достаточно сложно и нужно обладать большим багажом знаний. Но я надеюсь, что данная статья здорово облегчит Вам эту задачу. Абсолютно любой чат, какой бы он сложный ни был, основан на принципах, описанных в данной статье, поэтому смело можете его использовать как каркас. ","type":"unstyled","key":"ehqal"},{"data":{"image":{"id":"5f03236202235e17b7c32845"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3dj44"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ak9p5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"5SaDvR0ljM379zsJM1RV"}],"entityMap":{}},"mentions":[]}