Разработка веб-приложения, работающего в режиме реального времени, с использованием средств объектно-ориентированного программирования языка Javascript

Размещено на http://www.allbest.ru/

Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования

Российский государственный социальный университет

Филиал в г. Анапа Краснодарского края

Курсовой проект

на тему: «Разработка веб-приложения, работающего в режиме реального времени, с использованием средств объектно-ориентированного программирования языка Javascript»



ЗАДАНИЕ КУРСОВОГО ПРОЕКТА

В данном курсовом проекте необходимо разработать веб-приложение, которое передает данные пользователям в режиме реального времени. Обмен данными происходит в режиме игры между пользователями, которые, подключаясь к серверу и внося различные значения, передают их друг другу без перезагрузки страницы.



СОДЕРЖАНИЕ

Введение

1. Основная часть

1.1 Структура данных

1.2 Выбор языка программирования

1.3 Элементы программы

1.4 Тестирование

1.5 Системные требования

Заключение

Литература

Приложения



ВВЕДЕНИЕ

Целью данной курсовой работы, посвященной изучению и разработке средств массового интернет-обмена данными, является:

- углубление навыков программирования на языках высокого уровня;

- систематизация теоретических и практических знаний по специальности «Объектно-ориентированное программирование »;

- обобщение опыта применения процедурного подхода к технологии программирования;

- применение полученных знаний при создании программного продукта.

Так как целью курсовой является разработка веб-приложения на основе сервера Node.js, стоит рассказать о том, что это такое. Node.js позволяет запускать JavaScript-код вне браузера. Чтобы Javascript код выполнился на вычислительной машине вне браузера, он должен быть интерпретирован и, конечно же, выполнен. Именно это и делает Node.js. Для этого он использует движок V8 VM от Google -- ту же самую среду исполнения для JavaScript, которую использует браузер Google Chrome. Кроме того, Node.js поставляется со множеством полезных модулей, так что не придется писать всё с нуля, как, например, вывод строки в консоль. Таким образом, Node.js состоит из 2 вещей: среды исполнения и полезных библиотек. Основной упор в Node.js делается на создании высокопроизводительных, хорошо масштабируемых клиентских и серверных приложений для веб-приложений, которые работают в режиме реального времени. Также в разработке был использован паттерн MVVM. Knockout - это популярная JavaScript библиотека, позволяющая реализовать Model-View-View-Model (MVVM) паттерн на клиенте, то есть в самом браузере.

программирование javascript объектный приложение



1. ОСНОВНАЯ ЧАСТЬ

1.1 Структура данных

Работа веб-приложения построена на обмене информации пользователя с сервером. Все файлы функционала расположены на сервере. Файлы, отвечающие за работоспособность приложения, и их основные функции указаны в таблице 1.

Таблица 1

Название	Предназначение
server.js	Самый главный файл, отвечающий за корректный запуск сервера с подключением всяческих настроек.
layout.html	Шаблон сайта, включающий в себя блоки, которые остаются неизменны. Статическая часть сайта.
index.html	Главная страница, в которой находится "мозг" клиентской части. Динамическая часть сайта.
config.js	Конфигурационный файл.
package.json	Текстовый документ в формате json, который отвечает за установление зависимостей приложения от других подключаемых модулей. Также включает в себя дополнительную информацию о приложении
race.js	Файл в котором содержатся многочисленные функции, которые вызываются как реакция на происходящие события в браузере
routes/index.js	Файл в котором указаны ссылки, по которым доступен сайт.

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

1.2 Выбор языка и среды программирования

Выбор Javascript в данном случае как языка программирования обусловлен тем, что я очень к нему привык за последние несколько лет. Javascript - скриптовый язык, предназначенный для создания интерактивных веб-страниц. Что умеет Javascript: изменять страницу, писать на ней текст, добавлять и удалять теги, менять стили элементов. Реагировать на события: скрипт может ждать, когда что-нибудь случится (клик мыши, окончание загрузки страницы) и реагировать на это выполнением функции. Выполнять запросы к серверу и загружать данные без перезагрузки страницы. Это иногда называют "AJAX". Устанавливать и считывать cookie, валидировать данные, выводить сообщения и многое другое.

1.3 Принцип работы веб-приложения

При посещении главной страницы сайта, появляется текстовое поле, в которое нужно ввести свой никнейм ( показано на рисунке А1) . Также стоит отметить, что при корректном интернет соединении, в левом верхнем углу появляется значок, символизирующий о подключении к веб-серверу. После ввода никнейма пользователю отрендеривается шаблон главной части сайта, в котором он решает простое математическое выражение и записывает ответ в соответствующую ячейку ( показано на рисунке А2). Игра длится 60 секунд, после ее окончания, подводятся итоги и результаты записываются в переменные, которые отображаются на странице( показано на рисунке А3).

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



1.4 Элементы программы

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

Переменные программы

В Таблице 2 содержится описание переменных для данного веб-приложения.

Таблица 2

Название	Предназначение
clients	Массив со значениями клиентов
sessions	Массив для создания отдельной сессии для каждого клиента
scores	Результаты, приходящие от клиентов
history	Массив с историей прошедших игр
hall_of_fame	Массив с именами игроков-рекордсменов
self.quest	Переменная в которой хранится правильный ответ на решение мат. выражения
game_started	Переменная в которой хранится время начало игры
elapsed	Переменная в которой хранится время, которое прошло с начала игры
remaining	Переменная, содержащая время, оставшееся до конца игры
operation	Переменная в которой генерируется знак сложения и вычитания

1.5 Тестирование

Список компьютеров на которых проводилось тестирование:

- Компьютер 1: Intel Core i5 M 480 @ 2.67ГГц 2.67ГГц. 3Гб ОЗУ. 300Гб Жёсткий диск. Nvidia GeForce 520M. OC Windows 7,

- Компьютер 2: Intel Core T4300 2.10ГГц, 4096 Mб ОЗУ, 500 Гб Жёсткий диск, Nvidia GeForce 220M, OC Windows 7.

- Компьютер 3: Intel Celeron 700 700Гц, 512, Mб ОЗУ, 120 Гб Жёсткий диск, Nvidia GeForce GT6600, OC Windows XP.

- Компьютер 4: . Intel Pentium 4 3GHz, 1024 Mb RAM, 320 Gb HDD, Nvidia GeForce GT7600, OC Windows XP.

Ошибок не обнаружено, веб-форум функционирует корректно.

1.6 Системные требования

Минимальные требования:

Программные:

- операционные системы: 2000\XP\Vista\Seven;

- веб-браузер;

Аппаратные:

- Устройство ввода: клавиатура, мышь;

- Подключение к сети Интернет.



ЗАКЛЮЧЕНИЕ

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

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



ЛИТЕРАТУРА

1. Дж. Харт. Node.js для начинающих. -- М.: Питер, 2012. -- 558 с. -- ISBN 0-2589-1256-8 - 2012

2. Что такое node.js, [Электронный ресурс] / Wikipedia Foundation. - Электронные текстовые данные (1 html - страница, 821 Кб ). - URL: http://ru.wikipedia.org/wiki/Nodejs режим доступа: свободный. - Дата последнего доступа: 17.12.2013.



ПРИЛОЖЕНИЯ

СКРИНШОТЫ ПРОГРАММЫ

ЛИСТИНГ ПРОГРАММЫ

Index.html:

<script>

//util

function sort (arr, property, desc){

function sorter(aa,bb){

var a = !desc ? aa : bb;

var b = !desc ? bb : aa;

if (typeof a[property] == "number") {

return (a[property] - b[property]);

} else {

return ((a[property] < b[property]) ? -1 : ((a[property] > b[property]) ? 1 : 0));

}

}

return arr.sort(sorter);

};

//util, печать сообщений --

function print_msg (msg, style, time){

$('#msg').html('<div class="msg msg-'+ style +'">' + msg + '</div>');

$('#msg').fadeIn();

setTimeout(function(){$('#msg').fadeOut()},time || 500);

}

function show_error(msg){ print_msg(msg, 'error'); }

function show_ok(msg){ print_msg(msg, 'ok'); }

//конец

$(document).ready(function() {

//socket.io -------------------------

var server='http://' + real_time_server.host + ':' + real_time_server.port;

var socket = io.connect(server);

socket.on('connect',function() {

$('#socketio').html('<span class="label label-success">Подключен!</label>');

socket.emit('join', { id: user_id });

});

socket.on('disconnect',function() {

$('#socketio').html('<span class="label label-important">Соединение разорвано!</label>');

});

socket.on('time',function(time) {

race.time(time);

});

socket.on('new_operation',function(operation) {

$('#operations').html(operation);

$('input.input_player').val('').select(); //обнуление и выбор заного.

});

socket.on('history',function(history) {

for (var i = 0, l = history.length; i < l ; i++) { //Сортировка кажждого по очкам

sort(history[i].scores, 'score', true)

}

race.history(sort(history, 'timestamp', true)); //биндим очки истории и сортируем по дате

});

socket.on('scores',function(scores) {

race.scores(sort(scores,'score', true));

if (scores.length){ //effect

$('.scores').addClass('selected');

setTimeout(function (){

$('.scores').removeClass('selected')

}, 200);

}

});

socket.on('hall_of_fame',function(hall_of_fame) {

race.hall_of_fame(sort(hall_of_fame,'score', true));

});

socket.on('new_game',function(result) {

print_msg ('Новая игра, обнуление результатов, Удачи!!', 'new', 2000);

});

socket.on('result_operation',function(result) {

if (result==1)

print_msg ('Отлично!!', 'success');

else if (result==2)

print_msg ('Другой игрок ответил быстрее чем ты!', 'warning', 1000);

else

print_msg ('Неееееееет!', 'error');

});

//конец socket.io -------------------------

//knockout модель и биндинг приложения

function Race () {

var self=this;

self.name = ko.observable();

self.input_player1 = ko.observable();

self.scores = ko.observableArray();

self.history = ko.observableArray();

self.hall_of_fame = ko.observableArray();

self.time = ko.observableArray();

self.valid_name = ko.computed(function() {

return (self.name() && self.name().length>2);

}, self);

self.sendOperationResult = function() {

var data = {operation: self.input_player1(), name : self.name()};

socket.emit('solve_operation', data);

}

}

var race = new Race();

ko.applyBindings(race);

//конец биндинга

//jQuery биндинг

$('input.input_player').click(function(e){

this.select();

});

$('#name').focus();

$('input.input_player').keydown(function(e){

if (e.keyCode=='13'){ //нажатие клавиши

race.sendOperationResult();

$('input.input_player').select();

}

});

});

</script>

<div class="alert alert-warning" data-bind="visible: (!valid_name())">

<h2>Кто быстрее вычислит элементарные мат. выражения, например: 12 + 14 = ??</h2>

<h3>Игра идет в режиме реального времени</h3>

<p> Введите свое имя и игра начнется!</p>

</div>

<p>Введите никнейм: <input maxlength="10" type="text" id="name" name="name" value="" data-bind="value: name, valueUpdate: 'afterkeydown'" /></p>

<div style="display:none" data-bind="visible: valid_name">

<div class="row-fluid">

<div class="span12 main">

<span id="operations"></span>

<span class="equal">=</span>

<input class="input_player" maxlength="4" type="text" name="player1" value="" data-bind="value: input_player1, valueUpdate: 'afterkeydown'" />

<div id="msg"></div>

</div>

</div>

<div class="row-fluid results">

<div class="span4 current_game">

<h3>Текущая игра

<small>(закончится через <span id="time" data-bind="text: time, css: { red: time() < 10 }"></span> сек.)</small>

</h3>

<div class="scores alert alert-warning">

<ol data-bind="foreach: scores">

<li><span data-bind="text: player"></span>:

<span class="score" data-bind="text: score"></span>

</li>

</ol>

<p data-bind="visible: (scores().length==0)">Реши мат. выражение и введи ответ быстрее других. Стань первым в списке лидеров!</p>

</div>

</div>

<div class="span4">

<h3>История игр</h3>

<div data-bind="visible: history().length">

<div data-bind="foreach: history">

<div class="game_history alert alert-warning">

<h4><small>игра сыграна: </small> <span data-bind="text: name"> </span></h4>

<ol data-bind="foreach: scores">

<li><span data-bind="text: player"></span>: <span class="score" data-bind="text: score"></span></li>

</ol>

</div>

</div>

</div>

</div>

<div class="span4 hall_of_fame">

<h3>Рейтинг игроков (ТОП-10)</h3>

<ol data-bind="foreach: hall_of_fame">

<li>

<strong>

<span data-bind="text: player"></span> <span class="score" data-bind="text: score"></span>

</strong>

<span class="timestamp">

(<span data-bind="text: timestamp"></span>)

</span>

</li>

</ol>

</div>

</div>

</div>

Размещено на Allbest.ru