---
# System prepended metadata

title: '2022: Компьютерные системы и сети. Лекция 2.'
tags: [Old, CSN, Lecture]

---

# 2022: Компьютерные системы и сети. Лекция 2. 
[TOC]
# Разбор особенностей языка javascript и простейшего фреймворка express.js для реализации клиент-серверного программирования

 ## Почему javascript ?

Почему я отошел от TypeScript в своих React-проектах и куда / Илья Климов 
<iframe width="560" height="315" src="https://www.youtube.com/embed/jnSHRPCTFPc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Тимур Шемсединов — Ищем способ исправить все проблемы IT-индустрии — Мы обречены
<iframe width="560" height="315" src="https://www.youtube.com/embed/bPx4ajl0Tmw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Клиентская (браузерная) часть 
 ### Метафора работы клиентской части в браузере
     1. HTML -  своеобразная интерфейсная сцена
     2. CSS -  это оформление сцены
     3. script - сценарий работы
     4. DOM     - document object model (объектная модель документа)
 Кроме внутреннего мира браузера DOM у клиента есть возможность обращения к внешнему миру по протоколу HTTP, используя методы GET и POST (PUT)     
   
## Internet HTTP REST API and CRUD
 <iframe src="//www.slideshare.net/slideshow/embed_code/key/bWZ7awnie9woB6" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/PremSanil/rest-api-and-crud" title="REST API and CRUD" target="_blank">REST API and CRUD</a> </strong> from <strong><a href="//www.slideshare.net/PremSanil" target="_blank">Prem Sanil</a></strong> </div>

## Клиентский метод fetch()
 Метод fetch() — метод API браузера, позволяющий обращаться к серверу по протоколу HTTP, - современный и очень мощный. Он поддерживается  всеми современными браузерами.

### Базовый синтаксис:
```js
let promise = fetch(url, [options])
url – URL для отправки запроса.
options – дополнительные параметры: метод, заголовки и так далее.
Без options это простой GET-запрос, скачивающий содержимое по адресу url.
```
### Примеры использования метода fetch()

```js=
// Простой GET запрос по умолчанию
    async function middleTest(){
                          let response = await fetch('/hi');
                           if (response.ok) { // достаем текст из ответа: 
                                               let text = await response.text(); 
                                                InfoMiddle.innerHTML = text
                                            }
                                else  alert("Ошибка простого HTTP GET запроса: " + response.status);

    }
```

```js=
// "Сложный" POST запрос 
let data={}
let ctext='My name is Client!'
 data['clientText']=ctext
  sdata=JSON.stringify(data);
  
  async function longTest(){
                            try {
                                 let response = await fetch('/longpost',
                                                           {
                                                            method: 'POST',
                                                            body: sdata,
                                                            headers: {
                                                                      'Content-Type': 'application/json'
                                                                     }
                                                           });
                                   let text = await response.text(); 
                                    InfoLong.innerHTML = text
                                } catch (error) {
                                                 console.error('Ошибка after fetch:', error);
                                                }
                           } 
```

### Метод JavaScript Date getTime() 
Внутренние часы браузера для JavaScript отсчитывают количество миллисекунд от полуночи 1 января 1970 года.
Поэтому getTime() и возвращает количество миллисекунд, начиная с 1 января 1970 года.
```js=
(new Date()).getTime()
```
И уже вернуло такое время:
```+
(new Date()).getTime=1646133341156
```
## Пример простейшего серверного кода, использующего фреймворк express
```js=
const express = require('express');
const path = require('path');
const  app = express();
        app.use(express.json())

// Обработчики GET запросов 
app.get('/', (req, res) => {
                             res.sendFile(path.join(__dirname, '/index.html'));
                           });

app.get('/hi', (req, res) => {
                             res.send('Hi from Express app at server time: '+new Date())
                           });


// Обработчик POST запроса
app.post('/longpost', (req, res) => {
                                     let r=JSON.stringify(req.body.clientText)    
                                      res.send(r+' <br> .... at server time: '+new Date())
                                    })
// Запуск настроенного сервера на прослушивание порта 3000 
app.listen(3000, () => {console.log('server started');} );
```
# Ресурсы для самостоятельного изученя

1. [Метод точного измерения времени performance.now()](https://developer.mozilla.org/ru/docs/Web/API/Performance/now)
1. [Клиентский запрос - Fetch](https://learn.javascript.ru/fetch)
1. [Веб-фреймворк Express](https://developer.mozilla.org/ru/docs/Learn/Server-side/Express_Nodejs) 
2. [Ссылка на вариант начальной реализации на хостинге replit.com](https://replit.com/join/ckodvvccuo-arthmax)
3. [Ссылка на чуть более продвинутую реализацию на хостинге replit.com](https://replit.com/join/dcdvzldpvl-arthmax)
4. [Network JavaScript in Browsers](https://uk.javascript.info/network)