Основная часть
Описание предметной области
Исследование предметной области:
· Разработка чатов – процесс создания чатов
· Разработкой чатов занимается разработчик веб-приложений.
· Благодаря комет-серверу, отсутствию рекламы и простому удобному интерфейсу общение в чате становиться очень комфортным
· Данное приложение позволяет общаться с собеседникакми без регистрации. относится к средствам обмена сообщениями по компьютерной сети в режиме реального времени.
Принципы разработки Web приложений
· Постоянная проверка корректной работы на разных браузерах.
Постановка задачи
· Задачей данной работы является разработка простого анонимного чата
Выбор средств реализации
· Основным средством разработки данного проекта является языки Js и Html, а также каскадная таблица стилей CSS.
· Созданo с помощью notepad++. приложения работают под операционными системами Windows, OS X, Windows Phone, Android, Apple iOS, Linux
· Есть возможность отправки и получения сообщений.
· Основные характеристики: занимает свободного пространства на жёстком диске без файла JPEG 12кб, а с файлом JPEG занимает 2,48 МБ
· В качестве целевой платформы разработки выбраны операционные системы семейства MS Windows (7/8.1/10)
· Основным языком программирования является Js
· Написание простых скриптов выполняется на Js
· В проекте используется Html, Css, Js.
Реализация
Разработка форм.
· Программа использует очень удобный и понятный интерфейс, организована система отправки и получения сообщений от собеседников
· Все данные вводятся на сайте
· Используется comet-server:
Реализация функционала программы.
· Данная программа представляет собой бесплатный анонимный чат без регистрации и рекламы.
· Программа позволяет использовать следующие возможности: Отправку сообщений другим пользователям чата и получение сообщений от собеседников
· Предусмотрена возможность введения своего nickname или имени
· Сообщения выводятся в строку по левому краю таблицы и выглядит это таким образом:
· «Имя: Сообщение»
Вызываемые функции:
· function web_send_msg()- Отправляет сообщение в чат
· function strip(html)- Вырезает HTML теги
Схема взаимосвязи программных модулей:
Укрупненный алгоритм решения задачи:
Заключение
Результатом работы на УП является приложение «A-Chat».
Реализованы отправка и получение сообщений в чате, а также удобный минималистичный интерфейс
Функциональные особенности: cообщения записываются и выводятся из комет-сервера, что куда лучше, чем запись в БД или текстовый документ.
Эксплуатационные особенности – это простой и удобный интерфейс.
Данное приложение создано для возможности анонимно общаться с другими пользователями без регистраций
Список использованных источников
1. https://ruseller.com/jquery.php?id=124
2. https://ru.wikipedia.org/wiki/%D0%A7%D0%B0%D1%82
3. https://habrahabr.ru/company/comet-server/blog/273573/
4. https://habrahabr.ru/post/104945/
Глоссарий
· Комет-сервер - любая модель работы веб-приложения, при которой постоянное HTTP-соединение позволяет веб-серверу отправлять (push) данные браузеру без дополнительного запроса со стороны браузера.
· УП – Учёбная практика
· БД – База данных
Список аббревиатур
· HTML- HyperText Markup Language
· СSS- Cascading Style Sheets
· Js- javascript
Приложения (программный код)
A-Chat.html
<html>
<head>
<title>
A-chat
</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<table id='table0' class='T1'>
<caption id="A1" style="font-size:4vw" class='A1'>A-Chat</caption>
<tr><td id="D1" style="font-size:42px" class='D0'><a href="A-Chat-Anonim.html">Начать общенение</a></td></tr>
<tr><td id="D2" style="font-size:42px" class='D0'><a href="A-Chat-Info.html">О сайте A-Chat</a></td></tr>
</table>
</body>
</html>
A-Chat-Anonim.html
<html>
<head>
<title>A-Chat</title>
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
<script language="JavaScript" type="text/javascript" src="https://comet-server.ru/CometServerApi.js" ></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<table id="table1" class='T1'>
<tr>
<td width=50% id="D3" style="font-size:42px" class='D0'><a href="A-Chat.html">A-Chat</a></td>
<td width=50% id="D3" style="font-size:42px" class='D0'><a href="A-Chat-Info.html"О сайте A-Chat>О сайте A-Chat</a></td>
</tr>
</table>
</body>
<body>
<table id="table3">
<br>
<td><fieldset style="font-size:30px" class='f3'><div id="WebChatFormForm"></div></fieldset>
<tr><td id='N1'><input type="text" id="WebChatNameID" placeholder="Укажите ваше имя..." > <br>
<textarea id = "WebChatTextID" placeholder = "Отправьте сообщение в online чат..." ></textarea><br>
<input type="button" onclick="web_send_msg();" value="Отправить" ></td></tr>
<td><div id="answer_div" ></div>
</table>
<script>
// вырезает html теги
function strip(html)
{
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || "";
}
// Отправляет сообщение в чат
function web_send_msg()
{
// Получение значений из элементов ввода.
var text = $("#WebChatTextID").val(); // Получаем текст сообщения
var name = $("#WebChatNameID").val(); // Получаем имя пользователя
// Очистка поля с текстом сообщения
$("#WebChatTextID").val("");
// Добавление отправленного сообщения к списку сообщений.
$("#WebChatFormForm").append("<p><b>"+strip(name)+": </b>"+text+"</p>");
// Отправка сообщения в канал чата
CometServer().web_pipe_send("web_chat_pipe", {"text":text, "name":name});
}
// Функция выполнится после загрузки страницы
$(document).ready(function()
{
CometServer().start({dev_id:1}) // Подключаемся к комет серверу
// Подписываемся на канал в который и будут отправляться сообщения чата.
CometServer().subscription("web_chat_pipe", function(msg)
{
console.log(msg)
// Добавление полученного сообщения к списку сообщений.
$("#WebChatFormForm").append("<p><b>"+strip(msg.data.name)+": </b>"+msg.data.text+"</p>");
});
});
</script>
</body>
</html>
A-Chat-Info.html
<html>
<head>
<title>
О сайте A-Chat
</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<table id="table1" class='T1'>
<tr>
<td width=50% id="D3" style="font-size:42px" class='D0'><a href="A-Chat.html">A-Chat</a></td>
<td width=50% id="D2" style="font-size:42px" class='D0'><a href="A-Chat-Anonim.html">Анонимный чат</a></td>
</tr>
</table>
<table id="table2" class='T1'>
<tr><td><fieldset style="font-size:30px" class='f1'>
<legend style="font-size:42px" class='f11'>
О анонимном чате
</legend>
"Всё гениальное просто" и это про интерфейс нашего анонимного чата. Строгий минималистичный дизайн в совокупности с невероятным удобством использования
предоставляют вам возможность комфортно общаться с вашим собеседником в сети Internet.
Всё что нужно - это ввести ваше имя или nickname.
</fieldset></td></tr>
<tr><td><fieldset style="font-size:30px" class='f2'>
<legend style="font-size:42px" class='f22'>
Польза анонимности
</legend>
Весной 1906 г. в Нью-Йорке протестантского священника Гарри Уоррена разбудил звонок. «Умоляю о встрече, у меня безвыходная ситуация», — услышал он из телефонной трубки и ответил:
«Завтра церковь открыта с утра». Наутро святой отец узнал, что звонивший повесился. Потрясенный случившимся, священник дал объявление в газете:
«Перед тем как уйти из жизни, звоните мне в любое время суток».<br>
У этого человека просто не было человека, которому он мог довериться и рассказать о своей проблеме и таких людей миллионы.<br>
Что было бы, если этот человек успел выговориться? Может быть он передумал и не покончил жизнь самоубийством?
Может быть простой диалог с человеком вернул ему надежду и спас его от самого себя?<br>
Психологи считают, что это облегчило бы ношу человека, а возможно и спасло ему жизнь.
</fieldset></td></tr>
<tr><td><fieldset style="font-size:30px" class='f1'>
<legend style="font-size:42px" class='f11'>
Создатель сайта
</legend>
Cоздатель: Зайцев Андрей, студент ХПК<br>
Ссылка на <a class='D0' href="https://t.me/Zaytsev_Andrew">Telegram:</a> <br>
Ссылка на <a class='D0' href="https://vk.com/zaytsev_web_com">VK.COM:</a>
</fieldset></td></tr>
</table>
</body>
</html>
Style.css
body
{color: white;
overflow: auto;
background-color: white;
font-family: calibri;
background-image: url(4.jpeg);
background-size: 100%;
background-repeat: no-repeat;
background-position: top center;}
#table0
{border: 1px solid white;
background-color: black;
opacity: 0.5;
margin: auto;
width: 50%;
text-align: center;
padding: 30px;
padding-left: 50px;}
#table1
{border: 1px solid white;
background-color: black;
opacity: 0.7;
margin: auto;
width: 100%;
text-align: center;
padding: 30px;}
#table2
{border: 1px solid white;
background-color: black;
opacity: 0.7;
margin: auto;
width: 70%;
text-align: center;
padding: 30px;}
#table3
{border: 1px solid white;
font-size: 25px;
background-color: black;
opacity: 0.7;
width: 70%;
margin: auto;
height: 40%;
}
#D1
{padding: 35px;}
#D2
{padding: 35px;}
#A1
{padding: 20px;}
#N1
{padding-top: 400px;
padding-bottom: 50px;
padding-left: 20px;}
.D0:hover
{text-decoration: underline;}
td a{text-decoration: none;
color: white;}
.f1
{text-align: left;}
.f11
{text-align: left;}
.f2
{text-align: left;}
.f22
{text-align: right;}
.f3
{position: fixed;
top: auto;
text-align: left;
width: 65%;
overflow: auto;
height: 20%;}
input
{color: White; /* цвет текста */
width: 299px;
font-size: 20px;
text-decoration: none; /* убирать подчёркивание у ссылок */
user-select: none; /* убирать выделение текста */
background: black; /* фон кнопки */
padding:.7em 1.5em; /* отступ от текста */
outline: none; /* убирать контур в Mozilla */}
textarea
{color: White; /* цвет текста */
font-size: 20px;
text-decoration: none; /* убирать подчёркивание у ссылок */
user-select: none; /* убирать выделение текста */
background: black; /* фон кнопки */
padding:.7em 1.5em; /* отступ от текста */
outline: none; /* убирать контур в Mozilla */
width: 65%;
height: 100px;}