Лабораторна робота №8
ЗАДАНИЕ 1 Подготовка
1. Создайте папку 'chat'
2. В папкe 'chat' создайте папки 'tpl' и 'public'
3. В папке 'chat' создайте файл 'package.json' со следующим содержимым:
{
"name": "NodeChat",
"version": "1.0.0",
"description": "My first Node.js chat",
"dependencies": {
"socket.io": "latest",
"express": "latest",
"jade": "latest"
},
"author": "Ваше имя"
}
4. В командной строке перейдите в директорию 'chat' и выполните команду 'npm install'
5. Дождитесь установки модулей и убедитесь, что в папке 'chat' появилась папка 'node_modules' с установленными модулями
ЗАДАНИЕ 2 Создание HTML-шаблона JADE (jade-lang.com)
1. В текстовом редакторе создайте файл 'chat\tpl\page.jade'
2. В созданном файле напишите следующий текст:
!!!
html
head
title= "Node chat"
body
#content(style="width: 500px; height: 300px; margin: 0 0 20px 0; border: solid 1px #999; overflow-y: scroll;")
form#form(action='', onsubmit='return false')
input#field(style="width:350px;")
input#send(type='submit', value='Послать')
3. Будьте аккуратны: используйте либо табуляцию, либо пробелы!!!
4. Сохраните файл 'page.jade'
ЗАДАНИЕ 3 Создание сервера
1. В текстовом редакторе создайте файл 'chat\_index.js'
2. Подключите модуль 'express'
3. Создайте сервер (переменная 'app') на основе фреймворка 'express'
4. Произведите настройки сервера:
- укажите, что файлы для представлений находятся в папке 'tpl'
- укажите, что для представлений используется движок 'jade'
- принициализируйте движок как:
app.engine("jade", require("jade").__express);
- укажите, что собираетесь использовать в качестве статической папки папку 'public'
5. Создайте для сервера обработчик метода 'get', который обрабатывает обращение к корню сервера
6. В обработчике осуществите рендеринг шаблона JADE используя метод 'render'
7. Подключите модуль 'socket.io' (переменная 'io') и поставьте его на прослушку порта '8080'
8. Создайте для сокета обработчик метода 'on', который обрабатывает событие 'connection'
9. Сохраните файл и запустите созданный сервер из командной строки.
10. Наберите в браузере 'http://localhost:8080' и убедитесь в корректной работе приложения
ЗАДАНИЕ 4 Создание клиента
1. В текстовом редакторе создайте файл 'chat\public\chat.js'
2. В этом файле опишите событие 'window.onload', в котором:
- создайте сокетное соединение к адресу 'http://localhost:8080'
- создайте массив 'messages' для хранения сообщений приходящих с сервера
- создайте для сокета обработчик метода 'on', который обрабатывает серверное сообщение 'message'
- создайте обработчик события 'onclick' для html-элемента 'input' c 'id="submit"' (кнопка)
3. Обработчик кнопки должен:
- выбрать введённые пользователем данные из текстового поля
- послать выбранные данные на сервер в сообщении под именем 'send'
4. Обработчик сокета должен:
- принять сообщение сервера и сохранить его в массиве 'messages'
- вывести содержимое массива 'messages' в html-элемент 'div'
5. Сохраните файл 'chat.js'
ЗАДАНИЕ 5 Подключение скриптов в щаблоне страницы
1. Откройте в текстовом редакторе файл page.jade
2. После строки описывающей заголовок страницы допишите:
script(src='/chat.js')
script(src='/socket.io/socket.io.js')
3. Сохраните файл page.jade
ЗАДАНИЕ 6 Обработка сообщений на сервере
1. Откройте в текстовом редакторе файл 'chat\_index.js'
2. В сокетном обработчике события 'connection' опишите следующий функционал:
- послать клиенту сообщение 'message' с содержимым
{ message: "Добро пожаловать в чат!" }
- принять сообщение клиента 'send' и переслать его содержимое всем клиентам (сокетам) в виде сообщения 'message' с содержимым
{ message: ТО-ЧТО-ПРИСЛАЛ-КЛИЕНТ }
3. Сохраните файл '_index.js'
4. Запустите сервер из консоли.
5. Используя разные браузеры или разные вкладки браузера протестируйте чат