Как сделать чат в html

How TO — Chat

Nah, I dunno. Play soccer.. or learn more coding perhaps?

How To Create Chat Messages

Step 1) Add HTML:

Example

<div darker">
<img src="/w3images/avatar_g2.jpg" alt="Avatar" > <p>Hey! I’m fine. Thanks for asking!</p>
<span ></div>

<div > <img src="/w3images/bandmember.jpg" alt="Avatar">
<p>Sweet! So, what do you wanna do today?</p>
<span > </div>

<div darker">
<img src="/w3images/avatar_g2.jpg" alt="Avatar" > <p>Nah, I dunno. Play soccer.. or learn more coding perhaps?</p>
<span > </div>

Step 2) Add CSS:

Example

/* Chat containers */
.container <
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
>

/* Darker chat container */
.darker <
border-color: #ccc;
background-color: #ddd;
>

/* Clear floats */
.container::after <
content: "";
clear: both;
display: table;
>

/* Style images */
.container img <
float: left;
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
>

/* Style the right image */
.container img.right <
float: right;
margin-left: 20px;
margin-right:0;
>

/* Style time text */
.time-right <
float: right;
color: #aaa;
>

/* Style time text */
.time-left <
float: left;
color: #999;
>

Создаем чат на Node.js и Socket.IO

В данной статье я попытаюсь показать, как можно создать простой чат, используя Node.js в связке с Socket.IO. Изначально я хотел построить чат на чистых Websockets, но столкнулся с практически полным отсутствием готовых реализаций сервера для них в Интернете. Так что решил не изобретать велосипед, а использовать готовую библиотеку.
В моем случае сервер работает под Ubuntu, поэтому все примеры будут для неё (и ссылки в примерах — на него же).

Установка компонентов

Первым делом нам потребуются собственно Node.js (инструкция по инсталляции и ссылки на скачивание здесь) и Socket.IO. Модули для Node.js проще всего устанавливать, используя менеджер npm —

Серверная часть

Структура серверной части такова: сервер принимает сообщение, если это команда — выполняет определенные действия, если просто сообщение — рассылает всем остальным участникам.

В данном коде (и немного больше):
io.sockets — выбор всех подключенных клиентов
io.sockets.sockets[ID] — выбор конкретно взятого клиента с id ID
socket — выбор «текущего» клиента
socket.send(TEXT) — «базовое» событие, отправка сообщения TEXT
socket.json.send(<>) — отправка сообщения в формате JSON
socket.broadcast.send — отправка сообщения всем клиентам, кроме текущего
socket.emit(EVENT, JSON) — отправка пользовательского события EVENT с данными JSON (например — socket.emit(‘whereami’, <'location': loc>)), может использоваться для переписывания стандартных событий ‘connected’, ‘message’ и ‘disconnect’.
socket.on(EVENT, CALLBACK) — вызов функции CALLBACK при возникновении события EVENT (например — socket.on(‘whereami’, function(loc)< console.log('I\'m in ' + loc + '!'); >))
Я передаю клиентам сообщения в JSON, т.к. сам текст сообщения автоматически генерируется в клиенте. Таким образом представление данных не зависит от сервера и его легко изменить, не прикасаясь к нему (например, изменить язык); к тому же передается меньший обьем данных между сервером и клиентом.

Клиентская часть

HTML и CSS

Javascript

socket.io.js автоматически отдается Node.js по адресу nodeJsIp[:port]/socket.io/socket.io.js — ничего дополнительно делать не надо.
client.js

Наконец, запускаем сервер с логом в файл и в фоновом режиме —

(стоит отметить, что скрипт у меня запустился только из директории пользователя, куда был поставлен node.js)

Все исходники можно скачать здесь. Сразу говорю, я не гуру программирования и писал для себя, так что на корявость прошу не ругаться (да и бесполезно). Т.к. статику отдает пока апач, желательно запускать у себя на компьютере. Если же лень или неудобно/не можете — живой пример можно посмотреть здесь.

Код протестирован и работает в Opera 11+, Firefox 5+, Chrome 12+. IE9 судя по логам соединяется, получает и отправляет пакеты, но на браузере это не отражается.

В следующем выпуске: записываем историю сообщений, меняем себе имя, пишем в приват другому игроку, и многое другое!

Simple Chat Engine Using HTML5(Server Sent Events) And PHP

Hi Guys, how are you doing? I think HTML5 really amazing. Today I will teach you how to create Chat App using HTML5-SSE (Server Sent Events). This is the best example of how to use HTML5-SSE. In previous days we need to use JavaScript setInerval to make a request to the server certain interval but now HTML5 made our work easy with SSE. Take a look at the demo below.

Note: To test the demo open the demo in different tabs. When you sent a message in one place other will automatically update. (Or) Tell your friend to open the demo and start chatting.

Here we will call _chat.sentMsg() on submitting form.

In this code we are createing ChatEngine Class. init Is beginning of the execution. setName To gather user name. sentMsg Triger when user push sent button. ajaxSent Sent msg to PHP script. initSevr To initialize Server Sent Event.

Here we creating event-stream and saving the chat in __chat.txt_ file temporarily.

This will be used for styling.

###Reference html5rocks Wikipeida W3schools That’s it! hope you like it. Please Share it with you friends.

Создание чата

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

Авторизация

Начнём создавать чат со страницы авторизации. Обычно авторизация производится с главной страницы сайта. Сделаем самый простой вариант — без регистрации. Пользователь выбирает ник и заходит в чат. Вот код страницы:

Форма запускает файл chat.php. Это основная страница чата. Форма отправляет ник, введённый пользователем.

Страница чата

Страница чата называется chat.php. Это не просто страница, а серверный скрипт. Он получает от формы ник пользователя и выводит его на страницу, а также записывает ник в сессию, чтобы указывать его в сообщениях.

3 — получаем ник пользователя из формы и записываем в переменную $nick

5 — записываем ник в сессиию

14 — выводим ник на страницу

15 — поле для ввода сообщений

16 — кнопка отправки

17 — блок с сообщениями чата

Отправка сообщений

Создадим функцию отправки сообщений. Она не имеет отношения к технологии COMET. Это просто добавление текста в базу данных. Добавим на страницу следующий скрипт:

Скрипт достаточно простой. Если Вы прочитали учебник по технологии AJAX, то его код должен быть для Вас понятен. Поясню лишь отдельные моменты. В строке 22 создана переменная id , она пока не используется. В строке 30 в тело запроса записывается текст из поля для ввода, а затем в строке 31 это поле очищается, чтобы можно было писать в нём новое сообщение.

Страница отправляет данные в файл sendmesage.php. Вот его код:

Скрипт берёт ник пользователя из сессии, сообщение получает от страницы и записывает эти данные в базу данных. Сообщение отправляется в таблицу, которая называется chat , поэтому нужно создать эту таблицу. В ней должны быть следующие поля: id , user и text .

Получение сообщений

Получение сообщений сделаем при помощи долгих опросов. Страница будет отправлять запрос на сервер и ждать ответ сервера, а при получении ответа сразу отправлять новый запрос. Добавим на страницу такой код:

Поясню как работает этот скрипт. Страница отправляет обычный запрос. То, что ожидание ответа происходит длительное время, никак не влияет на код. В запросе страница отправляет id последнего полученного ею сообщения. При первом запросе id равен нулю, это установлено в строке 22. Затем id приходит вместе с ответом и записывается в переменную id при обработке ответа. Мы рассмотрим её позднее. Ответ сервера записывается в переменную an . Если ответ не пустой, то запускается функция обработки ответа. В строке 49 происходит рекурсия, то есть функция TakeMesage() вызывает сама себя и отправляется новый запрос на сервер. Этот вызов должен происходить независимо от того, успешно прошёл запрос или нет. Поэтому функция вызывается не при условии успешного запроса, а при условии завершения запроса. В строке 53 функция TakeMesage() вызывается первый раз. В дальнейшем вызов происходит в строке 49, но чтобы функция начала работать её нужно вызвать как-то иначе.

Сообщения, полученные в ответе сервера нужно вывести на страницу чата. Это делает функция Inchat() . Она работает так: ответ сервера в формате JSON переводится в объект. Для каждого сообщения создаётся тэг <p> и сообщение из объекта помещается в тэг. Затем тэг добавляется в болк с сообщениями. Вот код этой функции:

56 — переводим ответ сервера в массив. Каждый элемент массива — это объект, содержащий одно сообщение

58 — цикл для всех сообщений

60 — создаём тэг <p>

61 — записываем в тэг автора и текст очередного сообщения

62 — добавляем сообщение в блок

65 — в переменную id записываем id последнего сообщения. Она будет использоваться при отправке следующего запроса.

Страница запускает на сервере файл takemesage.php. Этот скрипт берёт id последнего полученного страницей сообщения и проверяет, появились ли новые. Если сообщений не появилось, то скрипт ждёт 2 секунды, а затем производит новую проверку. Если сообщения добавились, то скрипт отправляет их и работа скрипта завершается. Вот этот скрипт:

3 — подключаемся к базе данных

4 — узнаём от страницы id последнего полученного ею сообщения и записываем в переменную $current_id

6 — время запуска скрипта

6 — флаг отстуствия новых записей. Пока он установлен, будут производится проверки на новые данные

8 — цикл проверки новых записей. Будет выполняться, пока установлен флаг

10 — запрос на выборку записей, у которых id больше текущего

11 — отправляем запрос

12 — если запрос выполнен и в выборке есть данные

14 — записываем в переменную $mesages все записи выборки

15 — переводим массив $mesages в формат JSON и отправляем ответ сервера

16 — снимаем флаг отсутствия новых сообщений. Следующей итерации цикла не будет, скрипт выполнит оставшиеся строки и закончит работу.

18 — если новых сообщений не появилось

20 — скрипт ждёт 2 секунды

21 — 22 — проверка времени работы скрипта. Это рассмотрено далее

Если новых сообщений нет долгое время, то скрипт не будет работать бесконечно. На серверах есть ограничение на максимальное время выполнения скрипта. Оно может быть разное, но обычно не меньше 30 секунд. Можно установить это время в скрипте, но на некоторых хостингах эта функция не работает. Когда время работы превышено, скрипт возвращает сообщение об ошибке.

Чтобы этого не происходило, нужно вовремя завершить выполнение скрипта. В строке 5 определяется время запуска скрипта. В стоках 21, 22 производится проверка. Если скрипт выполняется более 27 секунд, то флаг отстутсвия данных снимается, цикл прекращается и скрипт завершает работу. Ответ сервера будет без данных. Получив ответ, страница отправит новый запрос и скрипт запустится снова.

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

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