WebSocket:

Когда мы попадаем на URL-адрес из клиента браузера, этот запрос получает внутренний сервер в форме HTTP или https. Каждый раз, когда запрос отправляется на веб-сервер, устанавливается TCP-соединение, и это соединение будет закрыто, когда клиент получит ответ от веб-сервера.

Веб-сокеты определяются как двунаправленная связь между серверами и клиентами, что означает, что обе стороны обмениваются данными и общаются одновременно. Веб-сокеты создаются с использованием ws: // или wss: // в отличие от http: // или htpps: //

Таким образом, основное различие заключается в том, что HTTP-протоколы являются однонаправленными, когда отправитель должен инициировать запрос на получение данных, но WebSockets являются двунаправленными, когда отправитель или получатель могут отправлять данные. Лучшим примером для этого является приложение для чата. Предположим, вы отправили Привет своему другу, а затем отправляете запрос на сервер. Но в то же время сервер отправит данные в чат вашего друга. То, как WebSocket достигает этого, означает, что они не закрывают соединение после установки.

Приведу один пример использования WebSocket. Если вы используете VS-код для разработки пользовательского интерфейса, возможно, вы использовали плагин Live Reload. Этот плагин фактически использует WebSocket для Live Reload. Вот код для этого

if ('WebSocket' in window) {
  (function () {
   function refreshCSS() {
    //Function to refresh CSS
   }
   var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
   var address = protocol + window.location.host + window.location.pathname + '/ws';
   var socket = new WebSocket(address);
   socket.onmessage = function (msg) {
    if (msg.data == 'reload') window.location.reload();
    else if (msg.data == 'refreshcss') refreshCSS();
   };
   if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
    console.log('Live reload enabled.');
    sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
   }
  })();
 }
 else {
  console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
 }

Вот список событий WebSocket.

socket.onopen - это событие происходит, когда установлено соединение с сокетом.
socket.onmessage - это событие происходит, когда клиент получает данные с сервера.
socket.onerror - это событие происходит при ошибке связи.
socket.onclose - это событие происходит при закрытии соединения.

Вот список методов WebSocket.

socket.send () - метод send (data) передает данные, используя соединение.
socket.close () - будет использоваться метод close () чтобы разорвать любое существующее соединение.

Посмотрите еще один пример на примере в реальном времени на сайте pro.coinbase.com.

Подробнее об этом читайте здесь: https://www.tutorialspoint.com/html5/html5_websocket.htm

WebWorker

При выполнении сценариев на HTML-странице страница перестает отвечать, пока сценарий не будет завершен. Веб-воркер - это JavaScript, который работает в фоновом режиме, независимо от других скриптов, не влияя на производительность страницы. Вы можете продолжать делать все, что захотите: щелкать, выбирать объекты и т. Д., Пока веб-воркер работает в фоновом режиме. Здесь объясняется, как мы можем использовать WebWorker для создания автономной страницы.

Шаг 1.. Проверьте, регистрирует нового сервис-воркера.

if ("serviceWorker" in navigator) {
  navigator
   .serviceWorker   
   .register("service-worker.js")          
   .then(function(reg) {            
     console.log("Registred with scope: ",reg.scope);          
   })          
   .catch(function(err) {
     console.log("ServiceWorker registration failed: ", err);               });
}

Шаг 2. В service-worker.js мы можем инициализировать кеш и добавлять в него файлы для автономного использования.

let cacheName = "myappCache";
var filesToCache = [
  "index.html",
  "js/site.js",
  "css/style.css",
  "images/favicon.png",
  "images/desktop-bg.jpg",
  "images/mobile-bg-copy.jpg",
  "images/og-image.jpg"
];
self.addEventListener("install", function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(filesToCache);
    })
  );
});

что делает ExtendableEvent.waitUntil и что представляет собой объект caches - Service worker не устанавливает, пока не будет выполнен код внутри waitUntil. Он возвращает обещание - этот подход необходим, потому что установка может занять некоторое время, поэтому нам нужно дождаться ее завершения. caches - это специальный CacheStorage объект, доступный в рамках данного Service Worker, чтобы разрешить сохранение данных.

Шаг 3: на service-worker.js у нас есть событие активации . После того, как новый ServiceWorker установлен, а предыдущая версия больше не используется, новая активируется, и вы получаете событие activate. Его можно использовать для очистки старого кеша, который нам больше не нужен.

self.addEventListener("activate", function(e) {
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(
        keyList.map(function(key) {
          if (key !== cacheName) {
            return caches.delete(key);
          }
        })
      );
    })
  );
  return self.clients.claim();
});

Шаг 4. В service-worker.js у нас есть событие выборки, которое запускается каждый раз, когда HTTP-запрос запускается из нашего приложения. .

self.addEventListener("fetch", function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        return response;
      } else {
        return fetch(event.request)
          .then(function(res) {
            return caches.open(cacheName).then(function(cache) {
              cache.put(event.request.url, res.clone());
              return res;
            });
          })
          .catch(function(err) {
            return caches.open(cacheName).then(function(cache) {
              return cache.match("/offline.html");
            });
          });
      }
    })
  );
});

Здесь мы отвечаем на событие выборки функцией, которая пытается найти ресурс в кеше и вернуть ответ, если он там есть. Если нет, мы используем другой запрос на выборку, чтобы получить его из сети, а затем сохраняем ответ в кеше, чтобы он был доступен там при следующем запросе.

Вот и все! Наше приложение кэширует свои ресурсы при установке и обслуживает их с помощью выборки из кеша, поэтому оно работает, даже если пользователь не в сети. Он также кэширует новый контент всякий раз, когда он добавляется.

Подробнее об этом читайте здесь: https://jakearchibald.com/2014/offline-cookbook/

Приятного чтения!