MySportsFeeds
MySportsFeeds/node.js/practice
How to Make a Real-Time Sports Application Using Node.js https://code.tutsplus.com/tutorials/real-time-sports-application-using-nodejs--cms-30594 https://habr.com/company/skillbox/blog/413957/
The technologies that will be used to create the application are:
Node.js
Socket.io
MySportsFeed.com https://www.mysportsfeeds.com/data-feeds/
| <!-- | |
| Теперь давайте создадим простенький клиент. Для этого | |
| нужно сделать файл index.html и разместить внутри | |
| такой код: | |
| --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Socket.IO Example</title> | |
| </head> | |
| <body> | |
| <script src="/socket.io/socket.io.js"></script> | |
| <script> | |
| var socket = io(); | |
| socket.on('sendToClient', function (data) { | |
| console.log(data); | |
| socket.emit('receivedFromClient', { | |
| my: 'data' | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| <!--Используя встроенную переменную сокета, получаем похожую | |
| логику на сервере с функцией socket.on. Клиент прослушивает | |
| событие sendToClient. Как только клиент подключен, сервер | |
| отправляет это сообщение. Клиент, получая его, записывает | |
| событие в консоли браузера. После этого клиент использует | |
| тот же socket.emit, что ранее сервер для отправки оригинального события. | |
| В этом случае клиент отправляет полученное событие FromClient на сервер. | |
| Когда тот получает сообщение, это логируется в окне консоли. | |
| Попробуйте сами. Сначала, в консоли, запустите ваше Node-приложение: node index.js. | |
| Затем загрузите в браузере localhost:3000. | |
| Проверьте консоль браузера, и вы увидите в логах JSON следующее: {hello: «world»} | |
| Затем, пока выполняется приложение Node, вы увидите следующее: | |
| HTTP server started on port 3000 | |
| Client connection received | |
| { my: 'data' } | |
| --> |
| /**включаеm библиотеку Express, здесь идет | |
| * создание нового HTTP-сервера. В примере | |
| * HTTP-сервер слушает порт 3000, | |
| * т.е. localhost:3000. Путь идет к корню, “/”. | |
| * Результат возвращается в виде HTML-файла index.html | |
| * | |
| */ | |
| var app = require('express')(); | |
| var http = require('http').Server(app); | |
| app.get('/', function(req, res){ | |
| res.sendFile(__dirname + '/index.html'); | |
| }); | |
| http.listen(3000, function(){ | |
| console.log('HTTP server started on port 3000'); | |
| }); | |
| /**код начинается с импорта библиотеки Socket.io. | |
| * Это указывается переменной io. Далее, используя | |
| * эту переменную, создаем обработчик события с | |
| * функцией on. Это событие вызывается | |
| * каждый раз, когда клиент подключается к серверу | |
| * | |
| * настроиm Socket.io. Для создания | |
| * сервера Socket выполняем следующие команды: | |
| */ | |
| var io = require('socket.io')(http); | |
| io.on('connection', function(socket){ | |
| console.log('Client connection received'); | |
| //socket.emit, отправляет сообщение клиенту | |
| socket.emit('sendToClient', { hello: "world" }); | |
| /**sendToClient — имя события. Именуя события, вы получаете | |
| * возможность отправлять разные типы сообщений, так что клиент | |
| * сможет интерпретировать их по-разному. */ | |
| /**Еще одно обновление — socket.on, где тоже есть название события: receivedFromClient. | |
| * Все это создает функцию, которая принимает данные от клиента. В этом случае они также | |
| * записываются в окне консоли. | |
| Выполненные действия завершают подготовку сервера. Теперь он может принимать и отправлять | |
| данные от любого подключенного клиента. | |
| Давайте завершим этот пример, обновив клиент путем получения ивента sendToClient. Когда | |
| событие получено, дается ответ receivedFromClient. */ | |
| socket.on('receivedFromClient', function (data) { | |
| console.log(data); | |
| }); | |
| }); |