intégration de flux avec l'API WebSocket

Evite que su aplicación se ahogue en mensajes de WebSocket o inunde un serveurLos servidores son ordenadores centrales y potentes dentro del campo de la tecnología de la información que procesan y proporcionan software y archivos en una red. Desde el punto de vista de un cliente, varios ordenadores en una red pueden ponerse en contacto con el servidor central para conseguir la información solicitada. En la arquitectura cliente-servidor, el servidor puede ser un software que proporciona un servicio y se ejecuta en Suite de WebSocket con mensajes aplicando contrapresión.

27 mars 2020

Antécédents

La APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene Suite de WebSocket

Les API WebSocket
proporciona una interfaz JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar Suite afin de Protocole WebSocket, lo que permite abrir una sesión de comunicación interactiva bidireccional entre el le navigateurUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los Suite del usuario y un servidor. Con esta API, puede enviar mensajes a un servidor y recibir respuestas basadas en eventos sin sondear el servidor para obtener una respuesta.

L'API Streams

Les API Streams
permite que JavaScript acceda mediante programmationConcepto de Programación¿Qué es la Programación?La Programación es el procedimiento al que se recurre para crear algún tipo de aplicación o software, para materializar un concepto o proyecto que requiere de la utilización de un lenguaje informático para poder llevarse a cabo. Es algo que está absolutamente ligado a la figura del programador, y que cada vez está cobrando más relevancia dentro del mundo del marketing.Decimos que tanto esta figura Suite a flujos de datos recibidos a través de la red y los procese como desee. Un concepto importante en el contexto de las corrientes es
contre-pression. C'est le processus par lequel un seul flux ou chaîne de tuyaux régule la vitesse de lecture ou d'écriture. Lorsque la transmission elle-même ou une transmission ultérieure dans le pipeline est toujours occupée et n'est pas encore prête à accepter plus de fragments, elle renvoie un signal à travers la chaîne pour ralentir la livraison en conséquence.

Le problème avec l'API WebSocket actuelle

Il est impossible d'appliquer une contre-pression aux messages reçus

Avec l'API WebSocket actuelle, la réaction à un message se produit dans
WebSocket.onmessage, une Gestionnaire d'événements appelé lorsqu'un message est reçu du serveur.

Supposons que vous ayez une application qui doit effectuer des opérations de traitement de données étendues à chaque fois qu'un nouveau message est reçu. Je mettrais probablement en place le flux similaire au code ci-dessous, et depuis attendre le résultat de la traiter () appel, ça devrait aller, non?

const process = asynchrone (Les données) => {
revenir new Promise((resolve) => {
la fenêtre.setTimeout(() => {
console.Journal('WebSocket message processed:', Les données);
revenir resolve('done');
}, 1000);
});
};
webSocket.onmessage = asynchrone (un événement) => {
const Les données = un événement.Les données;
attendre process(Les données);
};

Incorrect! Le problème avec l'API WebSocket actuelle est qu'il n'y a aucun moyen d'appliquer une contre-pression. Lorsque les messages arrivent plus vite que le traiter () La méthode peut les gérer, le processus de rendu remplira la mémoire en mettant ces messages en mémoire tampon, il cessera de répondre en raison de l'utilisation du processeur à 100%, ou les deux.

Appliquer une contre-pression aux messages envoyés n'est pas ergonomique

Il est possible d'appliquer une contre-pression aux messages envoyés, mais cela implique d'interroger le
WebSocket.bufferedAmount

propriété, qui est inefficace et non ergonomique. Cette propriété en lecture seule renvoie le nombre d'octets de données mis en file d'attente par les appels à
WebSocket.send (), mais pas encore transmis au réseau. Cette valeur est remise à zéro après l'envoi de toutes les données en file d'attente, mais si vous continuez d'appeler WebSocket.send (), il continuera d'augmenter.

Qu'est-ce que l'API WebSocketStream?

L'API WebSocketStream résout le problème de la contre-pression inexistante ou non ergonomique en intégrant des flux avec l'API WebSocket. Cela signifie que la contre-pression peut être appliquée «gratuitement», sans frais supplémentaires.

Cas d'utilisation suggérés pour l'API WebSocketStream

Voici quelques exemples de sites pouvant utiliser cette API:

• Applications WebSocket à large bande passante qui doivent maintenir l'interactivité, en particulier le partage de vidéo et d'écran.
• De même, la capture vidéo et d'autres applications qui génèrent une grande quantité de données dans le navigateur qui doivent être téléchargées sur le serveur. Avec la contre-pression, le client peut arrêter de produire des données au lieu d'accumuler des données en mémoire.

État actuel

Comment utiliser l'API WebSocketStream

Exemple introductif

L'API WebSocketStream est basée sur la promesse, ce qui rend sa gestion naturelle dans un monde JavaScript moderne. Commencez par construire un nouveau WebSocketStream y pasándole la URLEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo Suite del servidor WebSocket. A continuación, espere el lien établie, résultant en un
ReadableStream

et / ou un
WritableStream.

Appelant le
ReadableStream.getReader ()

méthode, vous obtenez enfin un
ReadableStreamDefaultReader, que plus tard tu pourras lis ()

données de jusqu'à la fin de la séquence, c'est-à-dire jusqu'à ce qu'elle renvoie un objet de la forme
{valeur: undefined, done: true}.

Par conséquent, appeler le
WritableStream.getWriter ()

méthode, vous obtenez enfin un
WritableStreamDefaultWriter, que plus tard tu pourras écrivez ()

données a.

  const wss = new WebSocketStream(WSS_URL);
const {lisible, inscriptible} = attendre wss.lien;
const lecteur = lisible.getReader();
const writer = inscriptible.getWriter();
tandis que (vrai) {
const {valeur, Fini} = attendre lecteur.read();
si (Fini) {
break;
}
const result = attendre process(valeur);
attendre writer.write(result);
}

Contre-pression

Qu'en est-il de la fonction de contre-pression promise? Comme je l'ai écrit plus tôt, vous l'obtenez "gratuitement", aucune étape supplémentaire n'est requise. Oui traiter () prend plus de temps, le message suivant ne sera consommé qu'une fois le pipeline prêt. Également WritableStreamDefaultWriter.write () L'étape ne se poursuivra que s'il est sécuritaire de le faire.

Exemples avancés

Le deuxième argument de WebSocketStream est un ensemble d'options permettant une extension future. Actuellement, la seule option est protocoles, qui se comporte de la même manière que le
deuxième argument du constructeur WebSocket:

const chatWSS = new WebSocketStream(CHAT_URL, {protocoles: ['chat', 'chatv2']});
const {protocole} = attendre chatWSS.lien;

La sélection protocole ainsi que le potentiel extensions font partie du dictionnaire disponible via le WebSocketStream.connection promettre. Toutes les informations sur la connexion en direct sont fournies par cette promesse, car elles ne sont pas pertinentes si la connexion échoue.

const {lisible, inscriptible, protocole, extensions} = attendre chatWSS.lien;

Informations sur la connexion WebSocketStream fermée

Les informations disponibles dans le
WebSocket.onclose y
WebSocket.onerror les événements de l'API WebSocket sont désormais disponibles via le WebSocketStream.closed promettre. La promesse est rejetée en cas de clôture impure, sinon elle est résolue avec le code et la raison envoyés par le serveur.

Tous les codes d'état possibles et leur signification sont expliqués dans le
Liste de CloseEvent codes d'état.

const {code, reason} = attendre chatWSS.fermé;

Fermer une connexion WebSocketStream

Un WebSocketStream peut être fermé avec un
AbortController. Par conséquent, passez un AbortSignal

au WebSocketStream constructeur.

const controller = new AbortController();
const wss = new WebSocketStream(URL, {signal: controller.signal});
setTimeout(() => controller.abort(), 1000);

Vous pouvez également utiliser le WebSocketStream.close () méthode, mais son objectif principal est de vous permettre de spécifier le
code
et la raison pour laquelle il est envoyé au serveur.

wss.close({code: 4000, reason: 'Game over'});

Interoperabilidad y mejora progresivaLa mejora progresiva es una estrategia de diseño web diseñada para permitir que el contenido básico de una web se muestre independientemente de la tecnología del navegador, la conexión a Internet o el tipo de dispositivo final. A la vez, no obstante, la web en cuestión además debería ofrecer una versión completa diseñada para satisfacer los mejores requerimientos técnicos posibles. Un resultado de esta estrategia es un diseño responsive. Una Suite

Actuellement, Chrome est le seul navigateur qui implémente l'API WebSocketStream. Pour l'interopérabilité avec l'API WebSocket classique, il n'est pas possible d'appliquer une contre-pression aux messages reçus. Il est possible d'appliquer une contre-pression aux messages envoyés, mais cela implique d'interroger le
WebSocket.bufferedAmount

propriété, qui est inefficace et non ergonomique.

Détection des fonctionnalités

Pour vérifier si l'API WebSocketStream est prise en charge, utilisez:

si ('WebSocketStream' dans la fenêtre) {
}

Manifestation

Dans les navigateursConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet Suite compatibles, puede ver la API de WebSocketStream en acción en el iframeConcepto de Iframe¿Qué es un Iframe?Un Iframe es un documento de una web que se inserta en otra página web. Consiste en un elemento que puede albergar cualquier tipo de contenido en su interior y que ayuda, entre otras cosas, a ampliar el mensaje que se ofrece con fuentes externas o con material complementario que pueda resultar de interés para el usuario que entra.Este elemento web se usa especialmente al Suite incrustado, o directement dans Glitch.

Retour

L'équipe Chrome souhaite connaître vos expériences avec l'API WebSocketStream.

Parlez-nous de la conception de l'API

Y a-t-il quelque chose dans l'API qui ne fonctionne pas comme prévu? Ou vous manquez-vous des méthodes ou des propriétés dont vous avez besoin pour mettre en œuvre votre idée? Vous avez une question ou un commentaire sur le modèle de sécurité? Déposer un problème de spécification dans le Dépôt GitHubou ajoutez vos réflexions à un problème existant.

Signaler un problème avec le déploiement

Vous avez trouvé un bogue avec la mise en œuvre de Chrome? Ou la mise en œuvre est-elle différente de la spécification? Signaler un bogue dans new.crbug.com. Assurez-vous d'inclure autant de détails que possible, des instructions simples à reproduire et de saisir Clignotement> Réseau> WebSockets dans le Composants (modifier) boîte.
Échec fonctionne très bien pour un partage de cas de relecture rapide et facile.

Afficher la prise en charge de l'API

Vous envisagez d'utiliser l'API WebSocketStream? Votre assistance publique aide l'équipe Chrome à hiérarchiser les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est important de les prendre en charge.

Envoyer un tweeterUn tweet es un mensaje corto que puede ser enviado por medio de del servicio de microblogging Twitter. ¿Qué es un tweet? Un tweet es un mensaje de estado en Twitter que puede tener hasta 280 caracteres. Los tweets solían limitarse a 140 caracteres, pero esta cantidad se incrementó a 280 en septiembre de 2017. Debido al espacio limitado para el texto, las URLs para uso en tweets son normalmente Suite à @Cromodev avec lui #WebSocketStream hashtagConcepto de Hashtag¿Qué es un Hashtag?Un Hashtag es una almohadilla (#), o más bien, una palabra que se adjunta a esta para crear una etiqueta en determinadas redes sociales. Utilizada en un comienzo por Twitter, poco a poco se ha ido extendiendo por demás rincones de la red de redes, hasta el punto de ser uno de los componentes esenciales al momento de transmitir información, agrupar contenidos o catalogar tendencias.Facebook, Suite et faites-nous savoir où et comment vous l'utilisez.

Liens utiles

Merci

L'API WebSocketStream a été implémentée par Adam Rice y
Yutaka hirano. Image de héros de Daan mooij au
Unsplash.