Прежде чем углубиться в детали, давайте сначала разберемся, что такое данные в реальном времени (RTD)?

Данные в реальном времени (RTD) — это любая информация, которая доставляется и фиксируется сразу после ее создания. Таким образом, не будет никаких задержек в сроках предоставленной информации.

Сравнение скорости: данные в реальном времени ››››› Flash

Чтобы получить эти данные о спидометре в реальном времени, технически у нас есть два доступных подхода. Давайте углубимся в каждый из них один за другим.

  1. ТЕХНИКА 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.

Основные требования:

  1. Базовые знания веб-фреймворков (HTML, CSS, Javascript)
  2. Ноутбук
  3. Предустановленный 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].