Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Простой чат пример chat javascript на файлах

Поддержи проект!!!

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

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

И никаких баз данных мы использовать не будем! Только файлы!

Простой чат(chat) javascript на файлах

  1. Вообще о чате javascript
  2. Главный файл чата -> логика скрипта
  3. Файл chat.php в сборе
  4. Скрипт, который будет обрабатывать наш чат: -> submit.php
  5. Файл записи результатов чата
  6. Как будут храниться данные чата?! -> filename.html
  7. P.S. о чате на javascript на файлах
  8. Скачать можно здесь
  1. Вообще о чате javascript

    Чат на файлах, с использованием jquery всего файлов:

    chat.php

    css.css

    filename.html

    jquery-3.3.1.min.js

    send.js

    submit.php

    Где можно скачать чат на javascript

    Все файлы находятся в архиве rar и скачать можно, если скачивание предусмотрено с главной со скриптами

    Пример простого чата на javascript

    Для данного скрипта чата мы сделали отдельную страницу, которую поместили сюда.

  2. Главный файл чата -> логика скрипта

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

    1. У нас должен быть файл, на котором будет форма отправки и на этой же странице мы должны выводить результаты нашей отправки. Естественно, что без перезагрузки.
    2. Отдельный файл – скрипт, который будет отправлять в исполнительный файл данные.
    3. Исполнительный файл, будет записывать данные.

    Можно конечно первые два объединить, но хочу, чтобы было все красиво!

    Начнем:

    Вы можете подключить jquery несколькими способами! Поскольку у нас в архиве уже присутсвует дання библиотека, то подключаем локально:

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>

    Нам понадобится "div" в который будем складывать ниши отправленные сообщения в чат.

    <div id="content"></div>

    Далее скрипт, который будет обновлять с помощью метода "setInterval" полученные данные с файла, в который и будут записаны наши данные - через 0.1 секунды = 100.

    <script>

       function show() {

           // выводим сообщения в блок #messages

           $.ajax({

               url: 'filename.html',

               timeout: 10000, // время ожидания загрузки сообщений 10 секунд (или 10000 миллисекунд)

               success: function(data) {

                   $('#content').html(data);

               },

                error: function() {

                   $('#content').html("Не удалось загрузить сообщения");

               }

       });

       }

       var interval = 1000; // количество миллисекунд для авто-обновления сообщений (1 секунда = 1000 миллисекунд)

       show();

       setInterval('show()', interval);

    </script>

    Будем отправлять результат срабатывания функции записи в show_rezultю

    <div class="show_rezult"></div>

    И далее нам нужна форма:

    У нас форма не будет иметь action и др. "атрибуты post php" - она у нас будет иметь единственное - id.

    И на последний input повесим onClick и присвоим ей функцию "send".
    <form id="first">

         <input type="text" size="30" name="name"><br>

         <input type="text" size="30" name="mess"><br>

         <input type="button" value="Отправить" onClick="send()">

    </form>
    И последним присоединим наш скрипт , который и будет обрабатывать весь наш чат!
    <script src="send.js"></script> 

  3. Файл chat.php в сборе

    Соберем весь код, который был описан выше в один!

    Итого у нас получилось:

    Главный файл простого чата

    <!DOCTYPE html>

    <html lang="ru">

    <head>

       <meta charset="UTF-8">

       <title>Chat_2</title>

    <link rel="stylesheet" href="css.css">

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>

    </head>

    <body>

    <div class="BIG">

    <br><br><br>

       <h2 title="Это пример простого чата:"> Это пример простого чата №2:</h2>

       <div id="content"></div>

    <script>

       function show() {

           // выводим сообщения в блок #messages

           $.ajax({

               url: 'filename.html',

               timeout: 10000, // время ожидания загрузки сообщений 10 секунд (или 10000 миллисекунд)

               success: function(data) {

                   $('#content').html(data);

               },

                error: function() {

                   $('#content').html("Не удалось загрузить сообщения");

               }

       });

       }

       var interval = 1000; // количество миллисекунд для авто-обновления сообщений (1 секунда = 1000 миллисекунд)

       show();

       setInterval('show()', interval);

    </script>

       <div class="show_rezult"></div>

       <form id="first">

           <input type="text" size="30" name="name" placeholder="Имя - 20 знаков"><br>

           <textarea type="text" size="30" name="mess" placeholder="Сообщение - 200 знаков"></   textarea> <br>

           <input type="button" value="Отправить" onClick="send()">

       </form>

    </div>

    <script src="send.js"></script>

    </body>

    </html>

  4. Скрипт, который будет обрабатывать наш чат:

    Здесь все просто!

    При нажатии на кнопку input type=button будет срабатывать функция send(см.выше)

    name и mess получаем, что у нас будет введено в одноименные поля формы(name="name", name="mess").

    отправим с помощью "$.post" в наш исполнительный файл submit.php - наши данные.

    "function( data )" - можно использовать, а можно убрать... - она будет выводить результат записи... в "show_rezult" в главный файл.

    function send() {  

      name =  document.forms["first"].elements["name"].value ;    

      mess =  document.forms["first"].elements["mess"].value ;  

      $.post( "https://dwweb.ru/__a-data/__all_for_scripts/__examples/js/chat/submit.php",  { name,mess,}, 

       function( data ) { $( ".show_rezult" ).html(data); }

      );

      return false;

    }

  5. Файл записи результатов чата

    Разберемся в файле submit.php!

    Создадим переменные ($name, $mess), которые получат те данные, что bs только что отправили в выше идущем скрипте!

    Здесь нужно уточнить!

    Если вы собираетесь получать данные с помощью post, то их нужно обрабатывать либо strip_tags либо [htmlspecialchars]

    Получим данные из полей :

    $name = htmlspecialchars($_POST['name']);

    $mess = htmlspecialchars($_POST['mess']);

    В переменную получим текущее время:

    $time = date('Y/m/d - h-i');

    Соберем всю строку вместе:

    $data = '<div class=main><div class=name>'.$name.' <div class=time>'.$time.'</div></div><div class=mess>'.$mess."</div></div>\n";

    Разделим имя, по пробелу ... если есть с помощью explode

    $delit = explode(' ', $name);

    После деления имени по пробелу, получаем массив array, как вы знаете начинается с нуля(0,1,2), поэтому, если существует третья ячейка $delit[2], то это больше двух слов... выводим Имя не больше 2 слов

    if ($delit[2])

    {

    echo '<b class=red>Имя не больше 2 слов!';

    }

    Далее 3 проверки:

    Если у вас кодировка utf-8 пишем число внутри в два раза больше, проверяем количество знаков простым способом обращения к символу строки + проверяем две переменные на существование if ($name and $mess)

    if ($name[40]) -> 20 знаков

    if ($mess[400]) -> 200 знаков

    if ($name and $mess)

    Получаем данные в переменную file_get_contents, впереди помещаем нашу строку(о которой говорили выше $data) :

    $data = $data.(@file_get_contents('filename.html'));

    Записываем переменную в файл file_put_contents? в момент записи файл недоступен(LOCK_EX):

    $write = @file_put_contents('filename.html', $data , LOCK_EX);

    Если записалось в чат, или не записалось - выводим соответствующее сообщение:

    if($write){ echo '<b class=time>Записано'; } else{ echo 'Данные не записаны'; }

    Соберем весь код вместе:

    Скрипт обработки отправленного сообщения в чат

    $name = htmlspecialchars($_POST['name']);

    $mess = htmlspecialchars($_POST['mess']);

    $time = date('Y/m/d - h-i');

    $data = '<div class=main><div class=name>'.$name.' <div class=time>'.$time.'</div></div><div class=mess>'.$mess."</div></div>\n";

    $delit = explode(' ', $name);

    if ($delit[2])

    {

       echo '<b class=red>Имя не больше 2 слов!';

    }

    else

    {

       if ($name[40])

       {

           echo '<b class=red>Имя не больше 20 знаков!';

       }

       else

       {

           if ($mess[400])

           {

               echo '<b class=red>Нельзя больше 200 знаков за раз!';

           }

           else

           {

               if ($name and $mess)

               {

               $data = $data.(@file_get_contents('filename.html'));

               $write = @file_put_contents('filename.html', $data , LOCK_EX);

               if($write){ echo '<b class=time>Записано'; } else{ echo 'Данные не записаны'; }

               }

               else

               {

                   echo '<b class=red>Какое-то из полей пустое!';

               }

           }

    }

    }

  6. Как будут храниться данные чата?! -> filename.html

    Данные будут храниться в файле filename.html построчно, каждая строка - новое сообщение! Не стал накручивать дополнительные примочки... мы же делаем чат максимально простым, насколько это возможно!
    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!Простой чат пример
  7. P.S. о чате на javascript на файлах

    24/02/2020

    Нужно понимать, что данный чат не является каким-то чудом программирования! Я его писал на начальном этапе изучения js и jquery в качестве задачки, которую надо было решить!

    Естественно, что сегодня я напишу совершенно по другому! И если возникнет необходимость где-то на одном из сайтов написать такой же чат заново, то здесь этот вариант появится обязательно!
    Про необходимость я говорил уже на странице, как изучать php


Вас может еще заинтересовать список тем : #JS | #JS_JQUERY | #TASK |
Последняя дата редактирования : 2020-02-24 12:15
Название скрипта :Чат на файлах
Скрипт № 3.1
Пример
Ссылка на скачивение: Все скрипты на одной странице
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
chat js онлайн чат на js js chat chat javascriptchat написатьчат на php javascriptделаем чат на js простой html чат

Последние комментарии :
Марат :
21/10/2020 12:15
Поиск по словам... м...м... может быть... не задумывался... в принципе скрипт поиска есть, надо подумать, как это…
подробнее.
Anton :
21/10/2020 09:29
Как добавить картинку (с ПК), видео (с хостинга или ПК) ?Будет ли поиск по словам в комментариях…
подробнее.
Марат :
15/10/2020 03:29
Сегодня нам дали очередную десяточку к "ИКС" - у, теперь…
подробнее.
Марат :
15/10/2020 03:16
Здравствуйте. Первое, что на ум пришло по вашему вопросу:Найти первое повторяющееся слово и выделить…
подробнее.
Майя :
15/10/2020 11:14
Добрый день, не могли бы вы подсказать, как выделить только первое или, например , только второе одинаковое…
подробнее.