{"id":83958,"date":"2022-08-22T10:44:24","date_gmt":"2022-08-22T08:44:24","guid":{"rendered":"https:\/\/rmarketingdigital.com\/integracion-de-transmisiones-con-la-api-de-websocket\/"},"modified":"2020-09-17T04:45:57","modified_gmt":"2020-09-17T07:45:57","slug":"integracion-de-transmisiones-con-la-api-de-websocket","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/","title":{"rendered":"Stream-Integration mit der WebSocket-API"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Antecedentes\" >Antecedentes<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#La-API-de-WebSocket\" >La API de WebSocket<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#La-API-de-Streams\" >La API de Streams<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#El-problema-con-la-API-de-WebSocket-actual\" >El problema con la API de WebSocket actual<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Aplicar-contrapresion-a-los-mensajes-recibidos-es-imposible\" >Aplicar contrapresi\u00f3n a los mensajes recibidos es imposible<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Aplicar-contrapresion-a-los-mensajes-enviados-no-es-ergonomico\" >Aplicar contrapresi\u00f3n a los mensajes enviados no es ergon\u00f3mico<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#%C2%BFQue-es-la-API-WebSocketStream\" >\u00bfQu\u00e9 es la API WebSocketStream?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Casos-de-uso-sugeridos-para-la-API-WebSocketStream\" >Casos de uso sugeridos para la API WebSocketStream<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Estado-actual\" >Estado actual<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Como-utilizar-la-API-de-WebSocketStream\" >C\u00f3mo utilizar la API de WebSocketStream<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Ejemplo-introductorio\" >Ejemplo introductorio<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Contrapresion\" >Contrapresi\u00f3n<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Ejemplos-avanzados\" >Ejemplos avanzados<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Informacion-sobre-la-conexion-WebSocketStream-cerrada\" >Informaci\u00f3n sobre la conexi\u00f3n WebSocketStream cerrada<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Cerrar-una-conexion-WebSocketStream\" >Cerrar una conexi\u00f3n WebSocketStream<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Interoperabilidad-y-mejora-progresiva\" >Interoperabilidad y mejora progresiva<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Deteccion-de-caracteristicas\" >Detecci\u00f3n de caracter\u00edsticas<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Manifestacion\" >Manifestaci\u00f3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Realimentacion\" >Realimentaci\u00f3n<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Cuentanos-sobre-el-diseno-de-la-API\" >Cu\u00e9ntanos sobre el dise\u00f1o de la API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Informar-un-problema-con-la-implementacion\" >Informar un problema con la implementaci\u00f3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Mostrar-apoyo-a-la-API\" >Mostrar apoyo a la API<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Enlaces-Utiles\" >Enlaces \u00datiles<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#Agradecimientos\" >Agradecimientos<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Evite que su aplicaci\u00f3n se ahogue en mensajes de WebSocket o inunde un servidor de WebSocket con mensajes aplicando contrapresi\u00f3n.<\/p>\n<p>\n          <time>27 de marzo de 2020<\/time><\/p>\n<\/header>\n<h2 id=\"background\"><span class=\"ez-toc-section\" id=\"Antecedentes\"><\/span>Antecedentes <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"the-websocket-api\"><span class=\"ez-toc-section\" id=\"La-API-de-WebSocket\"><\/span>La API de WebSocket <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>los <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebSockets_API\">API de WebSocket<\/a><br \/>\nproporciona una interfaz JavaScript para <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/tools.ietf.org\/html\/rfc6455\">Protocolo WebSocket<\/a>, lo que permite abrir una sesi\u00f3n de comunicaci\u00f3n interactiva bidireccional entre el navegador 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.<\/p>\n<h3 id=\"the-streams-api\"><span class=\"ez-toc-section\" id=\"La-API-de-Streams\"><\/span>La API de Streams <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>los <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Streams_API\">API de Streams<\/a><br \/>\npermite que JavaScript acceda mediante programaci\u00f3n a flujos de datos recibidos a trav\u00e9s de la red y los procese como desee.  Un concepto importante en el contexto de las corrientes es<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Streams_API\/Concepts#Backpressure\">contrapresi\u00f3n<\/a>.  Este es el proceso mediante el cual una sola corriente o una cadena de tuber\u00edas regula la velocidad de lectura o escritura.  Cuando la transmisi\u00f3n en s\u00ed o una transmisi\u00f3n posterior en la cadena de tuber\u00edas todav\u00eda est\u00e1 ocupada y a\u00fan no est\u00e1 lista para aceptar m\u00e1s fragmentos, env\u00eda una se\u00f1al hacia atr\u00e1s a trav\u00e9s de la cadena para ralentizar la entrega seg\u00fan corresponda.<\/p>\n<h3 id=\"the-problem-with-the-current-websocket-api\"><span class=\"ez-toc-section\" id=\"El-problema-con-la-API-de-WebSocket-actual\"><\/span>El problema con la API de WebSocket actual <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4 id=\"applying-backpressure-to-received-messages-is-impossible\"><span class=\"ez-toc-section\" id=\"Aplicar-contrapresion-a-los-mensajes-recibidos-es-imposible\"><\/span>Aplicar contrapresi\u00f3n a los mensajes recibidos es imposible <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Con la API de WebSocket actual, la reacci\u00f3n a un mensaje ocurre en<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebSocket\/onmessage\"><code>WebSocket.onmessage<\/code><\/a>, un <code>EventHandler<\/code> se llama cuando se recibe un mensaje del servidor.<\/p>\n<p>Supongamos que tiene una aplicaci\u00f3n que necesita realizar grandes operaciones de procesamiento de datos cada vez que se recibe un mensaje nuevo.  Probablemente configurar\u00eda el flujo similar al c\u00f3digo a continuaci\u00f3n, y dado que <code>await<\/code> el resultado de la <code>process()<\/code> llama, deber\u00edas estar bien, \u00bfverdad?<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><br><span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">process<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">data<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">return<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Promise<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">resolve<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>window<span class=\"token punctuation\">.<\/span><span class=\"token function\">setTimeout<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'WebSocket message processed:'<\/span><span class=\"token punctuation\">,<\/span> data<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">return<\/span> <span class=\"token function\">resolve<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'done'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><p>webSocket<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onmessage<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> data <span class=\"token operator\">=<\/span> event<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">await<\/span> <span class=\"token function\">process<\/span><span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>\u00a1Incorrecto!  El problema con la API de WebSocket actual es que no hay forma de aplicar contrapresi\u00f3n.  Cuando los mensajes llegan m\u00e1s r\u00e1pido que el <code>process()<\/code> El m\u00e9todo puede manejarlos, el proceso de renderizado llenar\u00e1 la memoria almacenando esos mensajes en b\u00fafer, dejar\u00e1 de responder debido al uso del CPU al 100%, o ambos.<\/p>\n<h4 id=\"applying-backpressure-to-sent-messages-is-non-ergonomic\"><span class=\"ez-toc-section\" id=\"Aplicar-contrapresion-a-los-mensajes-enviados-no-es-ergonomico\"><\/span>Aplicar contrapresi\u00f3n a los mensajes enviados no es ergon\u00f3mico <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Es posible aplicar contrapresi\u00f3n a los mensajes enviados, pero implica sondear el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebSocket\/bufferedAmount\"><code>WebSocket.bufferedAmount<\/code><\/a><\/p>\n<p>propiedad, que es ineficiente y no ergon\u00f3mica.  Esta propiedad de solo lectura devuelve el n\u00famero de bytes de datos que se han puesto en cola mediante llamadas a<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebSocket\/send\"><code>WebSocket.send()<\/code><\/a>, pero a\u00fan no transmitido a la red.  Este valor se restablece a cero una vez que se han enviado todos los datos en cola, pero si sigue llamando <code>WebSocket.send()<\/code>, seguir\u00e1 subiendo.<\/p>\n<h2 id=\"what\"><span class=\"ez-toc-section\" id=\"%C2%BFQue-es-la-API-WebSocketStream\"><\/span>\u00bfQu\u00e9 es la API WebSocketStream? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La API de WebSocketStream se ocupa del problema de la contrapresi\u00f3n inexistente o no ergon\u00f3mica mediante la integraci\u00f3n de flujos con la API de WebSocket.  Esto significa que la contrapresi\u00f3n se puede aplicar \u00abgratis\u00bb, sin ning\u00fan costo adicional.<\/p>\n<h3 id=\"use-cases\"><span class=\"ez-toc-section\" id=\"Casos-de-uso-sugeridos-para-la-API-WebSocketStream\"><\/span>Casos de uso sugeridos para la API WebSocketStream <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ejemplos de sitios que pueden usar esta API incluyen:<\/p>\n<ul>\n<li>Aplicaciones WebSocket de gran ancho de banda que necesitan mantener la interactividad, en particular, compartir video y pantalla.<\/li>\n<li>Del mismo modo, la captura de video y otras aplicaciones que generan una gran cantidad de datos en el navegador que deben cargarse en el servidor.  Con contrapresi\u00f3n, el cliente puede dejar de producir datos en lugar de acumular datos en la memoria.<\/li>\n<\/ul>\n<h2 id=\"status\"><span class=\"ez-toc-section\" id=\"Estado-actual\"><\/span>Estado actual <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"w-table-wrapper\">\n<div class=\"w-table-wrapper\">\n<table>\n<thead>\n<tr>\n<th>Paso<\/th>\n<th>Estado<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>1. Crea un explicador<\/td>\n<td><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/ricea\/websocketstream-explainer\/blob\/master\/README.md\">Completar<\/a><\/td>\n<\/tr>\n<tr>\n<td>2. Crear borrador inicial de especificaci\u00f3n<\/td>\n<td><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/ricea\/websocketstream-explainer\/blob\/master\/README.md\">En progreso<\/a><\/td>\n<\/tr>\n<tr>\n<td>3. Recopile comentarios y repita el dise\u00f1o<\/td>\n<td>En progreso<\/td>\n<\/tr>\n<tr>\n<td>4. Prueba de origen<\/td>\n<td><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.chrome.com\/origintrials\/#\/view_trial\/1977080236415647745\">Completar<\/a><\/td>\n<\/tr>\n<tr>\n<td>5. Lanzamiento<\/td>\n<td>No empezado<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h2 id=\"use\"><span class=\"ez-toc-section\" id=\"Como-utilizar-la-API-de-WebSocketStream\"><\/span>C\u00f3mo utilizar la API de WebSocketStream <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"introductory-example\"><span class=\"ez-toc-section\" id=\"Ejemplo-introductorio\"><\/span>Ejemplo introductorio <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La API de WebSocketStream se basa en promesas, lo que hace que lidiar con ella se sienta natural en un mundo JavaScript moderno.  Empiece por construir un nuevo <code>WebSocketStream<\/code> y pas\u00e1ndole la URL del servidor WebSocket.  A continuaci\u00f3n, espere el <code>connection<\/code> que se establezca, lo que da lugar a una<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/ReadableStream\/ReadableStream\"><code>ReadableStream<\/code><\/a><\/p>\n<p>y \/ o un<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WritableStream\/WritableStream\"><code>WritableStream<\/code><\/a>.<\/p>\n<p>Llamando al<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/ReadableStream\/getReader\"><code>ReadableStream.getReader()<\/code><\/a><\/p>\n<p>m\u00e9todo, finalmente obtienes un<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/ReadableStreamDefaultReader\"><code>ReadableStreamDefaultReader<\/code><\/a>, que luego puedes <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/ReadableStreamDefaultReader\/read\"><code>read()<\/code><\/a><\/p>\n<p>datos desde hasta que finaliza la secuencia, es decir, hasta que devuelve un objeto del formulario<br \/>\n<code>{value: undefined, done: true}<\/code>.<\/p>\n<p>En consecuencia, llamando al<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WritableStream\/getWriter\"><code>WritableStream.getWriter()<\/code><\/a><\/p>\n<p>m\u00e9todo, finalmente obtienes un<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WritableStreamDefaultWriter\"><code>WritableStreamDefaultWriter<\/code><\/a>, que luego puedes <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WritableStreamDefaultWriter\/write\"><code>write()<\/code><\/a><\/p>\n<p>datos a.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">  <span class=\"token keyword\">const<\/span> wss <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">WebSocketStream<\/span><span class=\"token punctuation\">(<\/span><span class=\"token constant\">WSS_URL<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span>readable<span class=\"token punctuation\">,<\/span> writable<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> wss<span class=\"token punctuation\">.<\/span>connection<span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> reader <span class=\"token operator\">=<\/span> readable<span class=\"token punctuation\">.<\/span><span class=\"token function\">getReader<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> writer <span class=\"token operator\">=<\/span> writable<span class=\"token punctuation\">.<\/span><span class=\"token function\">getWriter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">while<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token boolean\">true<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span>value<span class=\"token punctuation\">,<\/span> done<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> reader<span class=\"token punctuation\">.<\/span><span class=\"token function\">read<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>done<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token keyword\">const<\/span> result <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">process<\/span><span class=\"token punctuation\">(<\/span>value<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">await<\/span> writer<span class=\"token punctuation\">.<\/span><span class=\"token function\">write<\/span><span class=\"token punctuation\">(<\/span>result<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h4 id=\"backpressure\"><span class=\"ez-toc-section\" id=\"Contrapresion\"><\/span>Contrapresi\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u00bfQu\u00e9 pasa con la funci\u00f3n de contrapresi\u00f3n prometida?  Como escrib\u00ed anteriormente, lo obtienes \u00abgratis\u00bb, no se necesitan pasos adicionales.  Si <code>process()<\/code> toma m\u00e1s tiempo, el siguiente mensaje solo se consumir\u00e1 una vez que la canalizaci\u00f3n est\u00e9 lista.  Asimismo el <code>WritableStreamDefaultWriter.write()<\/code> El paso solo continuar\u00e1 si es seguro hacerlo.<\/p>\n<h3 id=\"advanced-examples\"><span class=\"ez-toc-section\" id=\"Ejemplos-avanzados\"><\/span>Ejemplos avanzados <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>El segundo argumento de WebSocketStream es una bolsa de opciones para permitir una extensi\u00f3n futura.  Actualmente la \u00fanica opci\u00f3n es <code>protocols<\/code>, que se comporta igual que el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebSocket\/WebSocket#Parameters:~:text=respond.-,protocols\">segundo argumento para el constructor de WebSocket<\/a>:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> chatWSS <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">WebSocketStream<\/span><span class=\"token punctuation\">(<\/span><span class=\"token constant\">CHAT_URL<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>protocols<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">'chat'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'chatv2'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span>protocol<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> chatWSS<span class=\"token punctuation\">.<\/span>connection<span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>El seleccionado <code>protocol<\/code> as\u00ed como potencial <code>extensions<\/code> son parte del diccionario disponible a trav\u00e9s del <code>WebSocketStream.connection<\/code> promesa.  Toda la informaci\u00f3n sobre la conexi\u00f3n en vivo es proporcionada por esta promesa, ya que no es relevante si falla la conexi\u00f3n.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span>readable<span class=\"token punctuation\">,<\/span> writable<span class=\"token punctuation\">,<\/span> protocol<span class=\"token punctuation\">,<\/span> extensions<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> chatWSS<span class=\"token punctuation\">.<\/span>connection<span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"information-about-closed-websocketstream-connection\"><span class=\"ez-toc-section\" id=\"Informacion-sobre-la-conexion-WebSocketStream-cerrada\"><\/span>Informaci\u00f3n sobre la conexi\u00f3n WebSocketStream cerrada <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La informaci\u00f3n que estaba disponible en el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebSocket\/onclose\"><code>WebSocket.onclose<\/code><\/a>  y<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebSocket\/onerror\"><code>WebSocket.onerror<\/code><\/a>  eventos en la API de WebSocket ahora est\u00e1 disponible a trav\u00e9s de la <code>WebSocketStream.closed<\/code> promesa.  La promesa se rechaza en caso de un cierre no limpio, de lo contrario se resuelve con el c\u00f3digo y el motivo enviado por el servidor.<\/p>\n<p>Todos los c\u00f3digos de estado posibles y su significado se explican en la<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CloseEvent#Status_codes\">lista de <code>CloseEvent<\/code> c\u00f3digos de estado<\/a>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span>code<span class=\"token punctuation\">,<\/span> reason<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> chatWSS<span class=\"token punctuation\">.<\/span>closed<span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"closing-a-websocketstream-connection\"><span class=\"ez-toc-section\" id=\"Cerrar-una-conexion-WebSocketStream\"><\/span>Cerrar una conexi\u00f3n WebSocketStream <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Un WebSocketStream se puede cerrar con un<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/AbortController\"><code>AbortController<\/code><\/a>.  Por lo tanto, pase un <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/AbortSignal\"><code>AbortSignal<\/code><\/a><\/p>\n<p>al <code>WebSocketStream<\/code> constructor.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> controller <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">AbortController<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> wss <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">WebSocketStream<\/span><span class=\"token punctuation\">(<\/span><span class=\"token constant\">URL<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>signal<span class=\"token operator\">:<\/span> controller<span class=\"token punctuation\">.<\/span>signal<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token function\">setTimeout<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> controller<span class=\"token punctuation\">.<\/span><span class=\"token function\">abort<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Como alternativa, tambi\u00e9n puede utilizar el <code>WebSocketStream.close()<\/code> m\u00e9todo, pero su prop\u00f3sito principal es permitir especificar el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CloseEvent#Status_codes\">c\u00f3digo<\/a><br \/>\ny motivo por el que se env\u00eda al servidor.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">wss<span class=\"token punctuation\">.<\/span><span class=\"token function\">close<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>code<span class=\"token operator\">:<\/span> <span class=\"token number\">4000<\/span><span class=\"token punctuation\">,<\/span> reason<span class=\"token operator\">:<\/span> <span class=\"token string\">'Game over'<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"progressive-enhancement-and-interoperability\"><span class=\"ez-toc-section\" id=\"Interoperabilidad-y-mejora-progresiva\"><\/span>Interoperabilidad y mejora progresiva <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Actualmente, Chrome es el \u00fanico navegador que implementa la API WebSocketStream.  Para la interoperabilidad con la API de WebSocket cl\u00e1sica, no es posible aplicar contrapresi\u00f3n a los mensajes recibidos.  Es posible aplicar contrapresi\u00f3n a los mensajes enviados, pero implica sondear el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebSocket\/bufferedAmount\"><code>WebSocket.bufferedAmount<\/code><\/a><\/p>\n<p>propiedad, que es ineficiente y no ergon\u00f3mica.<\/p>\n<h4 id=\"feature-detection\"><span class=\"ez-toc-section\" id=\"Deteccion-de-caracteristicas\"><\/span>Detecci\u00f3n de caracter\u00edsticas <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Para comprobar si la API de WebSocketStream es compatible, utilice:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">'WebSocketStream'<\/span> <span class=\"token keyword\">in<\/span> window<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"demo\"><span class=\"ez-toc-section\" id=\"Manifestacion\"><\/span>Manifestaci\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>En los navegadores compatibles, puede ver la API de WebSocketStream en acci\u00f3n en el iframe incrustado, o <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/websocketstream-demo.glitch.me\/\">directamente en Glitch<\/a>.<\/p>\n<p>\n  <iframe allow=\"camera; clipboard; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi; vr\" loading=\"lazy\" src=\"https:\/\/glitch.com\/embed\/#!\/embed\/websocketstream-demo?attributionHidden=true&amp;sidebarCollapsed=true&amp;path=public%2Findex.html&amp;previewSize=100\" style=\"height: 100%; width: 100%; border: 0;\" title=\"websocketstream-demo on Glitch\"><\/iframe>\n<\/p>\n<h2 id=\"feedback\"><span class=\"ez-toc-section\" id=\"Realimentacion\"><\/span>Realimentaci\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El equipo de Chrome desea conocer sus experiencias con la API WebSocketStream.<\/p>\n<h3 id=\"tell-us-about-the-api-design\"><span class=\"ez-toc-section\" id=\"Cuentanos-sobre-el-diseno-de-la-API\"><\/span>Cu\u00e9ntanos sobre el dise\u00f1o de la API <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u00bfHay algo en la API que no funciona como esperabas?  \u00bfO faltan m\u00e9todos o propiedades que necesita para implementar su idea?  \u00bfTiene alguna pregunta o comentario sobre el modelo de seguridad?  Presentar un problema de especificaciones en el correspondiente <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/ricea\/websocketstream-explainer\/issues\">Repositorio de GitHub<\/a>o agregue sus pensamientos a un problema existente.<\/p>\n<h3 id=\"report-a-problem-with-the-implementation\"><span class=\"ez-toc-section\" id=\"Informar-un-problema-con-la-implementacion\"><\/span>Informar un problema con la implementaci\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u00bfEncontraste un error con la implementaci\u00f3n de Chrome?  \u00bfO la implementaci\u00f3n es diferente de la especificaci\u00f3n?  Presentar un error en <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/new.crbug.com\">new.crbug.com<\/a>.  Aseg\u00farese de incluir todos los detalles que pueda, instrucciones simples para reproducir e ingrese <code>Blink&gt;Network&gt;WebSockets<\/code> en el <strong>Componentes<\/strong> caja.<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/glitch.com\/\">Falla<\/a> funciona muy bien para compartir casos de reproducci\u00f3n r\u00e1pida y f\u00e1cil.<\/p>\n<h3 id=\"show-support-for-the-api\"><span class=\"ez-toc-section\" id=\"Mostrar-apoyo-a-la-API\"><\/span>Mostrar apoyo a la API <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u00bfEst\u00e1 pensando en utilizar la API de WebSocketStream?  Su soporte p\u00fablico ayuda al equipo de Chrome a priorizar funciones y muestra a otros proveedores de navegadores lo importante que es brindarles soporte.<\/p>\n<p>Enviar un tweet a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/ChromiumDev\">@Cromodev<\/a> con el <code>#WebSocketStream<\/code> hashtag y h\u00e1ganos saber d\u00f3nde y c\u00f3mo lo est\u00e1 usando.<\/p>\n<h2 id=\"helpful\"><span class=\"ez-toc-section\" id=\"Enlaces-Utiles\"><\/span>Enlaces \u00datiles <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h2 id=\"acknowledgements\"><span class=\"ez-toc-section\" id=\"Agradecimientos\"><\/span>Agradecimientos <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La API WebSocketStream fue implementada por <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/ricea\">Adam Rice<\/a> y<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/yutakahirano\">Yutaka Hirano<\/a>.  Imagen de h\u00e9roe de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/@daanmooij\">Daan Mooij<\/a> en<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/photos\/91LGCVN5SAI\">Unsplash<\/a>.<\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Evite que su aplicaci\u00f3n se ahogue en mensajes de WebSocket o inunde un servidor de WebSocket con mensajes aplicando contrapresi\u00f3n. 27 de marzo de 2020 Antecedentes La API de WebSocket&#8230;<\/p>","protected":false},"author":1,"featured_media":83959,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83958","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>integraci\u00f3n de transmisiones con la API de WebSocket - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Evite que su aplicaci\u00f3n se ahogue en mensajes de WebSocket o inunde un servidor de WebSocket con mensajes aplicando contrapresi\u00f3n. 27 de marzo de 2020\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"integraci\u00f3n de transmisiones con la API de WebSocket\" \/>\n<meta property=\"og:description\" content=\"Evite que su aplicaci\u00f3n se ahogue en mensajes de WebSocket o inunde un servidor de WebSocket con mensajes aplicando contrapresi\u00f3n. 27 de marzo de 2020\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-22T08:44:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-5081875.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/integracion-de-transmisiones-con-la-api-de-websocket\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/integracion-de-transmisiones-con-la-api-de-websocket\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"integraci\u00f3n de transmisiones con la API de WebSocket\",\"datePublished\":\"2022-08-22T08:44:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/integracion-de-transmisiones-con-la-api-de-websocket\\\/\"},\"wordCount\":1276,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/integracion-de-transmisiones-con-la-api-de-websocket\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-5081875.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/integracion-de-transmisiones-con-la-api-de-websocket\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/integracion-de-transmisiones-con-la-api-de-websocket\\\/\",\"name\":\"integraci\u00f3n de transmisiones con la API de WebSocket - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/integracion-de-transmisiones-con-la-api-de-websocket\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/integracion-de-transmisiones-con-la-api-de-websocket\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-5081875.jpg\",\"datePublished\":\"2022-08-22T08:44:24+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Evite que su aplicaci\u00f3n se ahogue en mensajes de WebSocket o inunde un servidor de WebSocket con mensajes aplicando contrapresi\u00f3n. 27 de marzo de 2020\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/integracion-de-transmisiones-con-la-api-de-websocket\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/integracion-de-transmisiones-con-la-api-de-websocket\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-5081875.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-5081875.jpg\",\"width\":1200,\"height\":360,\"caption\":\"hero-5081875-4487101-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"integraci\u00f3n de transmisiones con la API de WebSocket - R Marketing Digital","description":"Verhindern Sie, dass Ihre Anwendung in WebSocket-Nachrichten ertrinkt oder einen WebSocket-Server mit Nachrichten \u00fcberflutet, indem Sie Gegendruck aus\u00fcben. 27. M\u00e4rz 2020","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/","og_locale":"de_DE","og_type":"article","og_title":"integraci\u00f3n de transmisiones con la API de WebSocket","og_description":"Evite que su aplicaci\u00f3n se ahogue en mensajes de WebSocket o inunde un servidor de WebSocket con mensajes aplicando contrapresi\u00f3n. 27 de marzo de 2020","og_url":"https:\/\/rmarketingdigital.com\/de\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/","og_site_name":"R Marketing Digital","article_published_time":"2022-08-22T08:44:24+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-5081875.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"integraci\u00f3n de transmisiones con la API de WebSocket","datePublished":"2022-08-22T08:44:24+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/"},"wordCount":1276,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-5081875.jpg","articleSection":["Dev"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/","url":"https:\/\/rmarketingdigital.com\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/","name":"integraci\u00f3n de transmisiones con la API de WebSocket - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-5081875.jpg","datePublished":"2022-08-22T08:44:24+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Verhindern Sie, dass Ihre Anwendung in WebSocket-Nachrichten ertrinkt oder einen WebSocket-Server mit Nachrichten \u00fcberflutet, indem Sie Gegendruck aus\u00fcben. 27. M\u00e4rz 2020","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/dev\/integracion-de-transmisiones-con-la-api-de-websocket\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-5081875.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-5081875.jpg","width":1200,"height":360,"caption":"hero-5081875-4487101-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=83958"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83958\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/83959"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=83958"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=83958"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=83958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}