Прежде чем углубиться в детали, давайте сначала разберемся, что такое данные в реальном времени (RTD)?
Данные в реальном времени (RTD) — это любая информация, которая доставляется и фиксируется сразу после ее создания. Таким образом, не будет никаких задержек в сроках предоставленной информации.
Сравнение скорости: данные в реальном времени ››››› Flash
Чтобы получить эти данные о спидометре в реальном времени, технически у нас есть два доступных подхода. Давайте углубимся в каждый из них один за другим.
- ТЕХНИКА AJAX
Голодный клиент всегда пытается отправить запрос на сервер для получения данных, если были сделаны какие-либо изменения. Если есть какие-либо обновления, клиент получит только данные, а не всю страницу.
ПРИМЕЧАНИЕ. Весь процесс выполняется без перезагрузки. (СЛАВА БОГУ)
2. ТЕХНИКА ПРОТОКОЛА WS
Когда происходят изменения, сервер сам обращается к клиенту и говорит ему: «привет, смотрите, некоторые данные были изменены». так что теперь клиент может отразить эти изменения на своей стороне. Вот как мы можем очень быстро перехватить данные, используя протокол WS.
( Превосходство клиента : 100 )
Запутались? ›› ЧТО ВЫБРАТЬ? и почему?
До сих пор мы исследовали оба подхода для сбора данных. Теперь вам может быть интересно, какой подход следует использовать для извлечения данных. Сделайте глубокий вдох; ответ на ваш вопрос будет ниже.
Оба подхода имеют свои преимущества и недостатки. Первый метод использует протокол HTTP для обновления данных посредством обслуживания HTTP-запросов. Однако такой подход может привести к нерациональному использованию ресурсов, поскольку клиент постоянно занят запросом обновлений. Это связано с однонаправленным характером протокола HTTP.
неплохо, неплохо, теперь ты
Второй метод, с другой стороны, решает эту проблему с помощью двунаправленного протокола передачи данных, называемого WebSocket (WS). С помощью WebSocket сервер может заранее отправлять обновления клиенту, при этом клиенту не нужно постоянно запрашивать их, вот как сервер приближается к клиенту. Это делает общение более эффективным и снижает ненужное потребление ресурсов.
Второй подход довольно крутой, а здесь я расскажу вам о чем-то еще круче — Socket.IO.
Socket IO — это библиотека JS, упрощающая создание приложения для чата в реальном времени поверх протокола WS. С помощью потрясающей документации Socket.io вы также можете создать собственное приложение для чата.
SOCKET.IO:
Давайте создадим базовое приложение для чата, используя socket.io.
чего ждать??
ага! будьте готовы создать чат-приложение с помощью socket.io.
Основные требования:
- Базовые знания веб-фреймворков (HTML, CSS, Javascript)
- Ноутбук
- Предустановленный Node.JS
Давайте черт возьми
Перейдите в любой каталог, откройте терминал и введите код:
mkdir chatapp cd chatapp
Инициализировать модуль:
npm init -y
Установите Express и Socket.io как зависимость:
npm i express socket.io
Создайте файл index.js в корневом каталоге и код:
const express = require('express'); const app = express(); const http = require('http'); const server = http.createServer(app); const { Server } = require("socket.io"); const io = new Server(server); // First Component io.on('connection', (socket) => { console.log('a user connected'); // Second Component }); server.listen(3000, () => { console.log('Server running at http://localhost:3000'); });
Создайте файл index.html в корневом каталоге и код:
<!DOCTYPE html> <html> <head> <title>Socket.IO chat</title> <style> body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); } #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; } #input:focus { outline: none; } #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages > li { padding: 0.5rem 1rem; } #messages > li:nth-child(odd) { background: #efefef; } </style> </head> <body> <ul id="messages"></ul> <form id="form" action=""> <input id="input" autocomplete="off" /><button>Send</button> </form> <script src="/socket.io/socket.io.js"></script> <script> var socket = io(); var form = document.getElementById('form'); var input = document.getElementById('input'); form.addEventListener('submit', function(e) { e.preventDefault(); if (input.value) { socket.emit('chat message', input.value); input.value = ''; } }); socket.on('chat message two', function(msg) { var item = document.createElement('li'); item.textContent = msg; messages.appendChild(item); window.scrollTo(0, document.body.scrollHeight); }); </script> </body> </html>
В приведенном выше сценарии мы создаем новый экземпляр socket.io, через который сервер узнает, что запрос поступает от клиента с использованием протокола WS.
Подход к передаче данных точно такой же, как и программирование, управляемое событиями, и выглядит следующим образом:
когда мы нажимаем кнопку отправки, генерируется событие с именем сообщение чата, и позже вы увидите, что оно обрабатывается на стороне сервера.
Отправьте html на сервер, заменив компонент // First кодом в файле server.js:
app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); });
Теперь замените // второй компонент кодом в файле server.js:
socket.on('chat message', (msg) => { io.emit('chat message two', msg); });
Здесь на стороне сервера мы видим, что мы обрабатываем событие сообщение чата, которое было отправлено на стороне клиента, вместе с ним мы также получаем сообщение в виде данных имени переменной. В конце концов, сервер должен был снова отправить это сообщение клиенту, чтобы клиент мог отобразить его в своем пользовательском интерфейсе.
Полный файл server.js
const express = require('express'); const app = express(); const http = require('http'); const server = http.createServer(app); const { Server } = require("socket.io"); const io = new Server(server); app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }); io.on('connection', (socket) => { console.log('a user connected'); socket.on('chat message', (msg) => { io.emit('chat message two', msg); }); }); server.listen(3000, () => { console.log('Server running at http://localhost:3000'); });
Запустите команду в терминале, чтобы увидеть, что вы построили
node server.js
;
ПОЗДРАВЛЯЕМ! Вы создали собственное приложение для чата.
Попробуйте добавить некоторые интересные функции, используя свои собственные знания JS.
«Помните, что Бог всегда с нами в наших проблемах; Точно так же Stackoverflow работает с программистами».
Я также создал свое собственное приложение для чата, используя socket.io, его функции:
- Уникальное имя для каждого пользователя при вводе пользователем.
- Восстановить журналы чата
- Пользователь вводит…
- Приватный чат с другом
- Трансляция, если кто-то в сети
Если вам нужна еще одна статья о построении логики всех этих функций, просто напишите мне по адресу [email protected].