Скрипт чата как Вконтакте

создание сайтов, заработок в сети, раскрутка, программирование

VK Плагин онлайн-чата для общения с посетителями

04.10.2016 04.10.2016

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

Как создать виджет онлайн-чата на своем сайте

1. Сначала переходим на официальную страницу настройки виджета и выбираем сообщество. (кстати, в английской версии может не быть ссылки на этот виджет, поэтому вот еще раз прямая ссылка — https://vk.com/dev/CommunityMessages). Здесь же можно посмотреть как будет выглядеть Ваш онлайн-консультант для чата. Также можете почитать подробную документацию.

Скрипт бота чат-менеджера v2

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

3. Нажимаем галочку «Разрешить использование виджета». Возможно ее у вас не будет, если у вас не включены Сообщения для сообщества. Включите сначала их, потом ниже появится и галочка для виджета. Можете написать приветственный текст и текст, когда Вы оффлайн.

Как установить скрипт онлайн-чата от вконтакте

Код, который мы могли получить на первой странице, мы можем установить в любое удобное место на сайте. Все равно скрипт всплывает. Настройки в сообществе (тексты) будут автоматически передаваться на сайт. Правда, настроек расположения на экрана, как в том же jivosite, я пока не нашел.

Vk.me — быстрая прямая связь

Также в вк есть еще один инструмент для оперативной связи посетителей с вами — это ссылки vk.me. Вы можете написать адрес своей страницы или сообщества и после перехода по ссылке у пользователя откроется сразу чат с Вами. Например, для связи с сообществом можно написать vk.me/ИД_ПАБЛИКА или vk.me/ССЫЛКА_на_вашу_страницу. Для моего паблика BadCpa (Все арбитражят) ссылка будет такая vk.me/badcpa, а в личку можете написать по ссылке vk.me/id21861529 .

Примечание — для общения пользователь должен авторизироваться в соц.сети вконтакте.

Еще интересные статьи:

1. Базы пользователей вконтакте
2. Моя группа про арбитраж
3. Неправильные ссылки joomla (плагин shSEF)
4. Плагин чата для wordpress
5. Пропали записи со стены вконтакте. 22 июля 2016 года — просто глюк

Источник: bdseo.ru

Скрипт бота чат-менеджера

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

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

Ключевая особенность чата в том, что его содержимое обновляется автоматически. Отсюда и возникают все трудности.

Для начала разберём с Вами структуру таблицы в базе данных. Вот те поля, которые обязательно потребуются:

• id — уникальный идентификатор.
• name — имя, оставившего сообщение. Здесь также может быть, например, user_id, означающий id пользователя из другой таблицы.
• message — сам текст сообщения.
• date — дата отправления сообщения.

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

Теперь необходимо вывести HTML-код:

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

В данном коде опять же всё как пример. Можно всё смело менять, но принцип должен быть тем же: есть место, где выводятся сообщения, причём они выводятся в одинаковом виде. Вместе с полем, где выводятся сообщения, есть текстовое поле и кнопка «Отправить».

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

Теперь займёмся JavaScript:

function send() var message = document.getElementById(«message»).value;
var name = «Гость»;
/* Здесь блок отправки POST-запроса с данными (например, через Ajax) */
>
function update() /* Здесь отправка запроса на получение всех сообщений (например, через Ajax) */
/* Здесь вывод сообщений в определённом формате прямо в HTML-код с использованием DOM, либо JQuery. */
>
setInterval(«update()», 1000); // Обновление окна чата каждую секунду

И, наконец, PHP-код (добавление новых сообщений):

/* Получаем данные, полученные из JavaScript */
$message = $_POST[«message»];
$name = $_POST[«name»];
$date = date(); // Узнаём текущее время и дату
/* Здесь добавляем в таблицу новую запись */
?>

И последний файл, которые потребуется — это получение всех сообщений из таблицы:

/* Вытаскиваем все записи из таблицы */
/* Получаем двумерный массив из полученных данных */
/* Преобразуем массив в json-формат и возвращаем его в javascript, где он уже будет выводиться */
?>

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

Создано 16.04.2012 13:59:17

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 25 ):

Arthur 16.04.2012 15:02:51

Спасибо за статью, Михаил! Но ведь можно сделать и без применения js?

Admin 16.04.2012 15:04:43

Можно, с применением frame. Но это очень плохой вариант в том плане, что, во-первых, будет «моргать» экран, поскольку обновляется целиком весь блок, особенно это будет заметно на медленных компьютерах. Также очень сильно ограничена функциональность и многое нельзя будет сделать.

Inferno 18.04.2012 15:42:13

Spasiba za statiu Mixail..Vapros: Shtob Sozdat Chatik na znat PHP ? i JavScript? obizatelna ? a mojna li vot suda postavit http://remzi.mail2k.ru/ ? Zarane spasiba ..

Admin 18.04.2012 18:40:22

Можно взять готовый скрипт чата. Минусов масса, но если ничего не знаете, то это единственный вариант.

wanderer 16.08.2012 14:38:09

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

Admin 16.08.2012 19:01:05

Отправлять вместе с запросом id последнего сообщения, например. Если новое появилось, то возвращать результат.

wanderer 16.08.2012 22:03:49

А лучше ли будет передавать хэш id ? или лучше будет сделать специально отдельно колонку в таблице, с рандомным значением (и сделать и его хэш)чтоб исключить подстановку?!

Admin 17.08.2012 11:27:36

Если беспокоитесь о безопасности, то можете и так сделать. Как альтернатива, можете передавать не id, а время последнего обновления. Тогда выводить только сообщения, отправленные позже этого времени.

malina95 16.01.2013 18:45:04

Можно сделать асинхронную подгрузку сообщений если не беспокоетесь о нагрузке

aidarbek 21.08.2012 19:56:08

Я сделал чат по такому же принципу, только я не знал как обновлять и узнал здесь. Спасибо.

Alexei 02.04.2013 21:05:43

Михаил, а как сделать так, чтобы при обновлении страницы все сообщения из окна чата исчезали? Т.е. каждый новый пользователь не видел сообщений старых. И если это вообще возможно, то где хранить сообщения в БД или в файлах… Спасибо

Admin 02.04.2013 21:08:04

Можно хранить в cookie дату первого посещения чата и выводить сообщения только, отправленные позже этого времени.

q3ta 04.06.2013 22:57:22

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

Admin 05.06.2013 04:19:15

Через CSS у блока можно поставить максимальную высоту и прокрутку.

q3ta 05.06.2013 17:23:20

спасибо) просто не сталкивался с прокруткой) обязательно попробую)

AntDant 16.06.2013 06:01:03

Михаил, вы пишите статьи для людей или для поисковиков?

Admin 16.06.2013 11:13:27

В первую очередь, для людей. Для поисковиков только ставлю.

tan 09.01.2014 14:21:52

Михаил, спасибо за статью. Вопрос: мне нужно установить, уже готовый чат Mibew Messenger.Все понятно, но там нужно создать БД MySQL и БД пользователя, где это создавать и как? управление сайта через самописную cms. В примере БД создаются в phpMyAdmin.

tikkiwiki 09.01.2014 15:24:48

Для создания пользователя и БД используйте все тот же phpMyAdmin

Источник: myrusakov.ru

Мини-чатик в один файл на PHP, HTML, CSS и JS

Ну добили они меня — составил я список подарков, нужных мне, чтоб не пылились потом на полочке. И дальше встал вопрос — а как сделать, чтобы народ (много народа), не знающий или плохо знающий друг-друга, все это мог обсудить и скооперироваться?

Отправить всем емейлы? А если люди не хотят чтобы кто-то еще знал их емейл? Тоже и про телефоны. Экзотические вещи вроде гуглспредщитов и всякой другой онлайн-ахинеи мне были не сильно интересны — все-таки конфиденциальная информация 🙂

И вообще, программист я или где?

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

Вроде даже все получилось и даже понравилось. (Хотя время от времени раздавались вопли мол: «Ну че за херня — файл нельзя отправить, голосовое сообщение тоже, и вообще какого хрена без 3D?»)

На следующий выходной день потратил часов 5 на приведение всего этого к красоте, а теперь хочу представить это дело Вам — вдруг кому сгодится, и времени тратить не надо будет.

Фишки:

• Весь чат одним файлом на PHP + HTML + CSS + JS
• Никакой БД, вся история хранится в HTML файлике, куда засовываются уже оформленные в HTML сообщения
• Авторизации тоже не предусмотрено — все свои
• Никаких WebSockets и long polling-ов — старый добрый хардкорный «А есть чо?»
• Запоминание выбранного ника в куках
• Вырезание всякого «ге» из текста и ника при постинге и ограничение их по длине
• Обрезка подгружаемого куска чата
• Отправка данных только в случае, если они были изменены (но отправляется весь кусок)
• Отключаемый автоскролл
• Отключаемый звук отправки/получения сообщения
• Возможность задать время опроса, путь до файла с чатом, длину пересылаемого куска, оформление сообщений
• Блокирование диалогов при загрузке и постинге, если скорость низкая
• Подсказки в случае всяких фейлов
• Кросс-браузерная работа — традиционно WebKit-ы (Chrome, Safari и др.), Firefox.
  IE браузером не считаю — это программа типа WGET для скачивания файлов (в том числе нормальных браузеров) просто с GUI — но и в нем должно работать, пусть и не так красиво
• Без каких-либо jQuery и других фреймворков — только чистый JS, только хардкор
• Все максимально просто, коротко, понятно и со вкусом
• Огромное пространство для творчества и модификаций

Пользуйтесь на здоровье!

P.S. Иногда вот так покодить на чистом JS, вспомнить как сделать анимацию вручную, как работают стандартные селекторы и написанная с нуля обвязка XMLHttpRequest — это просто клево.

Вообще, чистый JS и когда ты сам себе в коде хозяин, а не лениво просишь «Эй, jQuery дай-ка мне тот DIV и отправь его содержимое по AJAX на воон тот URL!» — это приятно и полезно для мозгов 🙂

P.P.S. Не забудьте на хостинге правильно настроить кодировку и проверить наличие расширения mbstring у PHP — иначе будут проблемы с работой чата

Скачать chat.php , версия от 09.09.21 (utf8)

Скачать chatWin.php , версия от 09.09.21 (последняя с win1251 от 10.04.18, исправлена XSS)

• исправлена уязвимость XSS в нике, спасибо name за фидбэк

• поправлена бага с копированием всего чата при клике за границей сообщения, спасибо Mike за фидбэк

• добавлено опциональное авторастягивание ввода сообщения под размер введенного текста

• закомментированы строчки с content-length заголовком, т.к. браузеры выкидывают на них исключение безопасности, спасибо Виктору за фидбэк

• поправлена бага с экранированием переноса строк из-за чего вместо переносов писалось «
  «, спасибо Сергею за фидбэк

• по многочисленным просьбам чат переделан в UTF-8
• добавлен звук отправки и получения сообщения (отключаемо)
• пофикшены мелкие баги

• добавлена подсветка URL в сообщениях
• исправлена ошибка с незапоминанием имени
• изменен дизайн всплывающих подсказок
• изменен цвет даты и IP
• изменен дизайн ввода имени
• пофикшены мелкие баги

• первый публичный релиз

Источник: protocoder.ru