Скрипты для html чата

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Simple web chat site that requires you to type messages in HTML.

briancullen/html-chat

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

The purpose of this program was to create an educational tool that could be used in lessons. The idea would be to let pupils try and communicate via the website. This will give them exposure to using the console, typing simple javascript and practicing using HTML tags — hopefully in a context that they will find engaging.

The code in the repository works as far as I have tested it but it is still in development and their are probably rough edges that I’m not aware of. Also this program is meant for use on internal (school) networks only.

As this program allows arbitary HTML/JavaScript to be inserted on a page it is not secure and should not be used where it can be accessed via the public Internet.

This repository was based on one of the example I found on the socket.io website — it was really useful and if you are starting out with socket.io I recommend looking at them.

Suggested Learning Objectives

In terms of a progression of activities the following may work for you. There is obviously a good deal of scope for playing around at each level and there is plenty of opporunities for extension activities for even the most able of students.

• Use of Console — pupils look under the hood and see a little bit of what it going on.
• Use of JavaScript — see the syntax for calling functions and practice using it.
• Use of Simple HTML — All messages need to be in HTML so they will need to use p, h1, etc tags or they will be unable to send any information.
• Use of Attributes — As tags are properly displayed on others screens they will be able to send images and links to each other if they learn how to use the attributes of the respective tags.
• Use of Scripts — For the more advances there is nothing stopping them from sending scripts to each others. Obviously there is a security issue but with a standard class that isn’t much of a worry.
• Web Security and Code Injection — the way the server is currently set up they can run arbitary code in each others browsers. This is possibly a good way of explaining code injection type attacks and demonstrating how they work.

You need a server with Node and Npm installed — that’s it! If you feel like doing some work on the code you could consider installing nodemon to make you life a bit easier.

Again really not much to it. Clone or download the repository and change into the root folder. Use npm to install the dependencies and then start the server as shown below. The server will run on port 3000 unless the PORT enviornment variable is set to something else.

If you are planning on editing the code, and you have nodemon installed, then you can use npm run devstart to save you time.

This site will be available at http://hostname:3000/ and should work with most modern browsers. A help section should appear on pupils screen when they open the site.

About

Simple web chat site that requires you to type messages in HTML.

Источник

Чат на JavaScript и Node.js

В этой статье вы прочитаете как сделать чат на JavaScript и HTML, ещё для сервера будем использовать Node.js.

Если у вас не установлен Node.js и вы не знаете как это сделать, то прочитайте эти статьи:

Front-end:

Для начала разберём как сделать клиентскую часть сайта, создадим файл «chat.html», вот он:

Тут не чего сложного и особенного нет, единственное мы добавляем CSS bootstrap, чтобы всё чуть красивее стало и так же имеем два блока, первый куда будем выводить сообщения, второе для форм, куда будем вводить текст сообщения и кнопка отправить.

После создания HTML можете сделать отдельный JS файл или прямо внутри HTML писать код, я выберу второй вариант.

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

Потом подключаем к серверу через WebSocket, дальше начинаем грубо говоря прослушивать сообщения которые на отправляет сервер, мы парсим данные от сервера и выводим полученное сообщение в блок чата.

Последние отслеживаем нажатие кнопки отправить сообщение, при клики на неё берём строку из формы и отправляем сообщение предварительно из JSON сделав строку и чистим форму.

На этом мы закончили делать клиентскую часть.

Back-end:

Теперь будем делать чат для сайт на Node.js, то есть сделаем серверную часть, для этого создадим файл «App.js».

Примечание:

Если вы не хотите использовать Node.js для вашего чата, не знаете его, или предпочитаете Python Django, то почитайте эту статью «Как сделать чат на Python Django»

Как можете заметить код на Node.js тоже очень простой, в начале подключаем библиотеку «ws» для работы с WebSocket, потом создаём подключение к серверу через этот протокол, и делаем массив в котором будут хранится все пользователи.

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

Последние это отслеживаем отключение клиента, если такое произошло, то просто убираем его из массива.

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

Источник

Мини-чатик в один файл на 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
• изменен дизайн ввода имени
• пофикшены мелкие баги

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

Источник