5 способів створювати програми в режимі реального часу за допомогою JavaScript

Був момент, коли ми не очікували занадто багато від веб-сторінок. Що нагадує мені, веб-сайт фільму Space Jam все ще знаходиться в Інтернеті в оригінальній формі. І він використовує фреймсет. Не iFrames. КАДРИ .

Космічний джем

SPACE JAM, символи, імена та всі пов’язані знаки є товарними знаками Warner Bros. © 1996 www.warnerbros.com

Warner Bros має кілька акуратно використаних копій Dreamweaver MX.

Це був 1996 рік. Це 2019 рік. Часи змінилися, і користувачі очікують набагато більше від веб-сайтів. Вони не просто очікують, що вони виглядатимуть добре, вони очікують, що вони будуть наповнені програмами, і це включає перебування в режимі реального часу.

Додатки в режимі реального часу

Додатки в режимі реального часу - це програми, які реагують на зміни в будь-якій точці системи підключеного додатка, а не лише на програми, внесені поточним користувачем.

Канонічним прикладом реального часу є програма обміну повідомленнями. Як, коли ви відправляєте групі друзів смс-повідомлення про те, як у п’ятницю зібратися за крила. Потім хвилину за хвилиною оновлюйте інформацію про свій прогрес на шляху до роботи до бару. Дякую, Тревор. Тепер ми всі потрапили в пекло сповіщень, на яке ми не підписалися. Я ПРОСТО ХОТЕЛ ВІД ЯКИХ КРИЛЬ.

Що стосується Інтернету, існує кілька різних моделей, технологій, бібліотек та служб, які ви можете використовувати для отримання функціональних можливостей у реальному часі, які зазвичай зарезервовані для власних програм. Нещодавно я сидів з Ентоні Чу, який дав мені 5 способів, як можна створювати програми в режимі реального часу на JavaScript.

Ентоні Чу #MSIgniteTheTour (@nthonyChu) | Twitter

Останні твіти від Ентоні Чу #MSIgniteTheTour (@nthonyChu). Cloud Advocate @Microsoft. Azure, ASP .NET, Node.js ... twitter.com

1. Довгий опитування

Це коли програма вимагає оновлення від сервера за розкладом. Додаток “опитує” сервер.

Це чистий еквівалент дітей, які запитують: "ми вже там?" кожні п’ять хвилин. Схоже, ми ще там, дитино? Попросіть мене ще раз, і я клянусь вам, що я кину цю копію фільму про бджіл у кювет, і ви зможете дивитись у вікно на траву, як ми, коли я був дитиною.

Довге опитування можна здійснити вручну за допомогою будь-якої бібліотеки HTTP JavaScript, наприклад jQuery або Axios. Я сам цього ніколи не реалізовував. Виконуючи деякі дослідження для цієї статті, я виявив, що найкращий спосіб зробити це - використовувати рекурсивну функцію з setTimeout. Це пов’язано з тим, що використання setIntervalне враховує невдалі запити чи час очікування. У результаті ви можете отримати купу дзвінків Ajax, які всі обробляються не в порядку.

Ось приклад з дуже приємної статті про Tech Octave.

(function poll(){ setTimeout(function(){ $.ajax({ url: "server", success: function(data){ //Update your dashboard gauge salesGauge.setValue(data.value); //Setup the next poll recursively poll(); }, dataType: "json"}); }, 30000); })();

Існують також такі бібліотеки, як pollymer (не плутати з Polymer), які спеціально призначені для тривалого опитування. Зрозумів? "Опитування" ymer? Тому що це опитування? Ця річ увімкнена?

фанаут / полімер

Загальна мета AJAX / бібліотека з довгими опитуваннями. Сприяйте розвитку фанатів / полімерів, створивши обліковий запис на GitHub. github.com

Довгі опитування корисні тим, що вони працюють у кожному браузері; навіть супер старі. Це погано, тому що це надзвичайно неефективно і не зовсім в реальному часі. У ньому також є деякі дивні випадки (наприклад, помилки запитів), які вам доводиться програмувати, як ми вже бачили setInterval.

Кращою альтернативою довгому опитуванню є Події, надіслані сервером, або SSE.

2. Події, що надсилаються сервером

Події, що надсилаються сервером (SSE), схожі на тривалі опитування, оскільки клієнт запитує у сервера інформацію. Велика різниця полягає в тому, що при SSE сервер просто тримає з'єднання відкритим. Коли відбувається подія і є інформація, яку слід надіслати клієнту, сервер надсилає подію клієнту.

Події, що надсилаються сервером

Традиційно веб-сторінка повинна надсилати на сервер запит на отримання нових даних; тобто сторінка запитує дані від… developer.mozilla.org

Повертаючись до нашої аналогії "дорожньої подорожі з пекла", це було б так, якби дитина сказала "Ми вже там?", А потім терпляче чекала вашої відповіді. Через чотири піднесені години мовчання ви прибуваєте до місця призначення, обертаєтесь і говорите "так". Це найреальніший сценарій, який я коли-небудь придумував у своєму житті.

SSE є частиною EventSourceAPI браузера . Зверніть увагу, що згідно caniuse.com, ні IE 11, ні Edge не підтримують SSE. Це робить його якоюсь жорсткою технологією для вибору, якою б цікавою вона не була.

Хороша новина полягає в тому, що майже кожен браузер підтримує Web Sockets.

3. Веб-розетки

Web Sockets - це технологія, яка забезпечує справжній двосторонній канал зв'язку між клієнтом та сервером. На відміну від Server-Sent Events, що є лише зв’язком від сервера до клієнта, Web Sockets можна використовувати для зв’язку в обох напрямках.

Веб-сокети - це, якось багатослівно. Вони насправді не є тими API, з якими ви хочете створювати додатки. Ви могли б зробити HTTP-запит із об'єктом XHR, але OMG NO. Я погуглив “Зразок веб-розетки PHP” і знайшов цей дозу з PHP-документів. Я повністю збільшив масштаб у Chrome і ледве отримав все на одному скріншоті.

І це ТІЛЬКИ серверна частина. Вам все одно потрібно підключити браузер.

Так що ... .that це НЕ для мене.

На щастя, існує безліч бібліотек, які ще більше абстрагують Web Sockets, тому вам не потрібно писати нічого з цього. Одна з цих бібліотек називається “SignalR”.

4. SignalR

SignalR is a library that implements Web Sockets both in JavaScript AND .NET. On the server, you create what is known as a “hub” in SignalR. This hub sends and receives messages from clients.

Clients then connect to the hub (using the SignalR JavaScript library) and respond to events from the hub, or send their own events into the hub.

SignalR also falls back to long-polling whenever Web Sockets is unavailable. Although that’s not super likely unless you’re using IE 9 or lower.

Here is an example of setting up SignalR on the server…

using System; using System.Web; using Microsoft.AspNet.SignalR; namespace SignalRChat { public class ChatHub : Hub { public void Send(string name, string message) { // Call the broadcastMessage method to update clients. Clients.All.broadcastMessage(name, message); } } }

OK, ok. I know this is not an apples to apples comparison with the PHP example from above, but I’m trying to make a point here. Just go with it. Do it for me. I’m having a rough morning.

So SignalR makes it more fun to program Web Sockets, but you know what’s even more fun than programming them? Not programming them.

5. Azure SignalR

Often, when we want to set up real-time applications, building out a Web Socket server isn’t exactly a value-added activity. We do it, but only because we have to to get the real-time. We’d prefer that it “just worked”.

Azure SignalR is exactly that. It is a SignalR Hub that you can consume on demand as a service. That means that you only have to send and respond to events — which is what you’re after in the first place.

What is Azure SignalR

An overview of the Azure SignalR service.docs.microsoft.com

You create the SignalR Hub in Azure as an Azure Service, and then you just connect to it from the client and send/receive messages.

And now you know….

Check out the interview below with Anthony. We shot this one in Vegas while we were both at a conference and had a good time with a wig that I bought at Party City. Best 8$ I ever spent.