Подразделы

Другие разделы

Дата и время

21/11/2024 17:21:52

Авторизация

Разработка веб-сервера в node.js

Проект 1: Пример взаимодействия с веб-сервером

Частичное обновление страницы выполняется через асинхронные запросы (технология AJAX).

Отправляем текст из поля ввода на сервер с помощью кнопки Отправить, получаем изменённый текст и выводим его в элемент с id="message".

Дополнительный эксперимент: чтобы увидеть получаемый от сервера ответ, запускаем запрос не через кнопку Отправить, а через URL браузера:\
``http://localhost:3000/ajax?name=Вася``

Код для браузера: public/index.html

```HTML
<html>
<body>
Имя: <input id="user" type="text" size="20"><br>
<button id="submit">Отправить</button>
<div id="message"></div>
</body>
<script>
submit.onclick= // при нажатии на кнопку
async function(){
// отправляем GET-запрос на сервер
let response = await fetch("/ajax?name="+encodeURIComponent(user.value));
if (response.ok) { // Успешно?
let data = await response.json(); // ждем результат в формате json
message.innerText=data.message; // выводим ответ
}
};
</script>
</html>
```

Код для сервера: server.js

```javascript
let express = require('express');
let app = express();
app.use(express.static(__dirname + '/public')); // для статических страниц
app.use(express.json()); // разрешаем обмен в формате JSON
app.use(express.urlencoded({ extended: false })); // обработка аргументов в url
// обработка GET-запроса с именем ajax
app.get('/ajax', function(req, res) {
console.log(req.query);
res.send({message:'Привет, '+req.query.name}); // отправляем ответ в формате JSON
});

app.listen(3000, function () {
console.log('Listening on port 3000!');
});
```

Архив с кодом

project1.zip (1.3Kb)

Проект 2: Чат

Каждую секунду получаем последние введенные сообщений.

При отправке сообщения получаем общее количество сообщений.

Код для браузера: public/index.html

```HTML
<html>
<body>
<pre id="chat"></pre>
Сообщение: <input id="newmsg" type="text" size="100"><br>
<button id="submit">Отправить</button>
<div id="message"></div>
</body>
<script>
submit.onclick=async function(){
let response = await fetch("/addcomment?newmsg="+encodeURIComponent(newmsg.value));
if (response.ok) {
let data = await response.json();
message.innerText=data.message;
}
};
// каждую секунду получаем сообщения и выводим в chat
setInterval(async function(){
let response = await fetch("/lastcomments");
if (response.ok) {
let data = await response.json();
chat.innerText=data.join('\n');
}
},1000);
</script>
</html>
```

Код для сервера: server.js

```javascript
let express = require('express');
let app = express();
app.use(express.static(__dirname + '/public'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
let msg=[]; // храним сообщения в массиве
// обработка запросов
app.get('/addcomment', function(req, res) { // добавить сообщение
msg.push(req.query.newmsg);
res.send({message:msg.length});
});
app.get('/lastcomments', function(req, res) { // последние 10 сообщений
res.send(msg.slice(-10));
});

app.listen(3000, function () {
console.log('Listening on port 3000!');
});
```

Архив с кодом

project2.zip (1.3Kb)

Проект 3: Улучшенный чат

Добавляем MongoDB для хранения сообщений между запусками сервера.

Файл public/index.html не меняется.

Установка клиента в node.js:\
``npm install -g mongodb``\
или\
``npm install mongodb``

Для сервера MongoDB скачать архив ниже, разархивировать и запустить ``run_mongod.cmd`` из папки mongodb.

Архив mongodb с настройками для локального запуска

mongodb.7z (9.3Mb)

Код для сервера: server.js

```javascript
const MongoClient = require("mongodb").MongoClient;
let express = require('express');
let app = express();
app.use(express.static(__dirname + '/public'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
MongoClient.connect('mongodb://localhost:27017/',
{useNewUrlParser:true,useUnifiedTopology:true},
function(err, client) {
if(err) throw err;
const db=client.db("messageDB");
const msg=db.collection('msg');
// обработка запросов
app.get('/addcomment', async function(req, res) { // добавить сообщение
// используем await, чтобы "дождаться" выполнения операций
// вставки и получения количества элементов в коллекции
await msg.insertOne({text : req.query.newmsg});
let n=await msg.estimatedDocumentCount({});
res.send({message : n});
});
app.get('/lastcomments', async function(req, res) { // последние 10 сообщений
let arr=[];
// сортируем коллекцию сообщений в порядке убывания _id и берем первые 10 объектов
let cursor=await msg.find().sort({ _id : -1 }).limit(10);
// переносим информацию в массив arr
await cursor.forEach((m)=>{ arr.push(m.text); });
res.send(arr.reverse());
});

app.listen(3000, function () {
console.log('Listening on port 3000!');
});

});
```

Архив с кодом

project3.zip (1.5Kb)

Пример

run1.7z (125.3Kb)

Назад

Подразделы

Другие разделы

Дата и время

Авторизация

Разработка веб-сервера в node.js

Проект 1: Пример взаимодействия с веб-сервером

Код для браузера: public/index.html

Код для сервера: server.js

Архив с кодом

Проект 2: Чат

Код для браузера: public/index.html

Код для сервера: server.js

Архив с кодом

Проект 3: Улучшенный чат

Архив mongodb с настройками для локального запуска

Код для сервера: server.js

Архив с кодом

Пример