{"id":27933,"date":"2025-01-26T23:24:19","date_gmt":"2025-01-26T22:24:19","guid":{"rendered":"https:\/\/www.angulararchitects.io\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/"},"modified":"2025-06-03T16:38:20","modified_gmt":"2025-06-03T14:38:20","slug":"streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/","title":{"rendered":"Streaming Resources for a Chat with Web Sockets: Messages in a Glitch-Free World"},"content":{"rendered":"
\n\t\t\t\n\t\n\t\n\t\t

\n\t\t\tThis is post 8 of 9 in the series “Signals”<\/em>\t\t<\/p>\n\t\t\t<\/label>\n\n\t\t\t

\n\t\t\t
    \n\t\t\t\t\t\t\t\t\t
  1. Signals in Angular: Building Blocks<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  2. Component Communication with Signals: Inputs, Two-Way Bindings, and Content\/ View Queries<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  3. Successful with Signals in Angular – 3 Effective Rules for Your Architecture<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  4. Skillfully Using Signals in Angular – Selected Hints for Professional Use<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  5. When (Not) to use Effects in Angular — and what to do instead<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  6. Asynchronous Data Flow with Angular’s new Resource API<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  7. Streaming Resources in Angular – Details and Semantics<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  8. Streaming Resources for a Chat with Web Sockets: Messages in a Glitch-Free World<\/span><\/li>\n\t\t\t\t\t\t\t\t\t
  9. Angular’s new httpResource<\/a><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n

    The minimal example in the privous article was already comprehensive enough to discuss the use of Streaming Resources and their semantic details. With this article, I would like to go a step further and show a more practical use case. This is a simple chat client, allowing further details to be discussed.<\/p>\n<\/p>\n

    \"A<\/p>\n

    Technically speaking, this chat example differs from the Timer in one crucial aspect: all messages received are relevant, not just the last one. This presents a small challenge in the signal-based world but can be solved.<\/p>\n

    A fork of a sample project from the Mozilla Developer Network<\/a> is used as the chat server. This Node-based server is included in the sample project<\/a> and its readme.md<\/em> shows how to start it.<\/p>\n

    \ud83d\udcc2 Source Code<\/a><\/p>\n

    \nBig thanks to Alex Rickabaugh<\/a> from the Angular team for reviewing the examples and for the insightful discussions about the proper usage of Streaming Resources for messaging.\n<\/p><\/blockquote>\n

    This article has been updated for the changes introduced to the -- back then -- experimental API with Angular 20. In Angular 19, there are some minor differences.<\/p>\n

    Consumer's Perspective<\/h2>\n

    In our example, the Angular client initializes the chat with the chatConnection<\/em> factory. It provides a structure representing the individual chat messages as a streaming resource and offers additional Signals and a send<\/em> method:<\/p>\n

    @Component([\u2026])\nexport class ChatResourceComponent {\n  ResourceStatus = ResourceStatus;\n\n  userName = signal('');\n  chat = chatConnection('ws:\/\/localhost:6502', this.userName);\n  messages = computed(() => this.chat.resource.value() ?? []);\n\n  userNameInField = linkedSignal(() => this.chat.acceptedUserName());\n  currentMessage = signal<string>('');\n\n  send() {\n    this.chat.send(this.currentMessage());\n    this.currentMessage.set('');\n  }\n\n  join() {\n    this.userName.set(this.userNameInField());\n  }\n}<\/code><\/pre>\n
    The userName<\/em> Signal passed to chatConnection<\/em> triggers the Resource and establishes a connection with the chat server. The userNameInField<\/em> and currentMessages<\/em> Signals are bound to input fields. To establish a connection, the join<\/em> function writes the value of userNameInField<\/em> to the userName Signal<\/em>.<\/p>\n
    The server can correct the requested username to ensure uniqueness. Therefore, userNameInField<\/em> is implemented with linkedSignal<\/em>. This Linked Signal overwrites the local value with the corrected value from the server, which is contained in the accpetedUserName<\/em> Signal.<\/p>\n
    When the user wants to send a message, the application passes the currentMessage<\/em> to the send<\/em> method. It then resets the currentMessage<\/em> so that the user can enter the next message.<\/p>\n
    Glitch-Free Property as Challenge at Streaming Resources<\/h2>\n
    The chat example differs from the timer discussed in the previous article in one essential aspect: while the timer was only interested in the latest message from the stream, the chat is interested in all messages received so far, or at least all messages from a defined time window. In other words, the timer represents an object that changes over time. In contrast, the chat represents several events with messages the application has to take into account in their entirety.<\/p>\n
    The way we look at the timer here fits well with signals, especially since signals always reflect the most recent value. The glitch-free property, which ignores unnecessary intermediate values, also fits here: If the Resource were to change the timer from 0 to 1, from 1 to 2, and from 2 to 3 in one single task, the resource consumer would only see the value 3.<\/p>\n
    However, this behavior would be fatal in an event-based use, such as chat. Here, individual messages would be lost. This behavior can easily be tested by having the chat server send the same message several times in a row to the same client. Most of these repetitions would be lost in an implementation that only considers the last message received.<\/p>\n
    This consideration shows that, unlike Observables in RxJS, Signals are not well suited to representing events or messages! This presents us with a challenge when using streaming resources, which fortunately can be overcome by simply adjusting our perspective: If we let the Resource represent not only the current value but all messages received so far, or at least all messages in a time window that is of interest to us, we can again view this totality of messages as a value that changes over time.<\/p>\n
    In other words, we need to move the collection and management of individual messages to the Resource. This view also fits well with the observation in the previous article that in the Signals world, use case-specific and, thus, coarse-grained building blocks are used.<\/p>\n
    More on this: Angular Architecture Workshop (Remote, Interactive, Advanced)<\/h2>\n
    Become an expert for enterprise-scale and maintainable Angular applications with our Angular Architecture workshop!<\/a>\"\"<\/p>\n
    English Version<\/a> | German Version<\/a><\/p>\n
    Messages and Protocol<\/h2>\n
    The example defines several types for the individual messages that the client exchanges with the chat server:<\/p>\n
    export type ChatRequest =\n  | {\n      type: 'username';\n      id: number;\n      name: string;\n    }\n  | {\n      type: 'message';\n      id: number;\n      text: string;\n    };\n\nexport type ChatResponse =\n  | {\n      type: 'id';\n      id: number;\n    }\n  | {\n      type: 'username';\n      id: number;\n      name: string;\n    }\n  | {\n      type: 'message';\n      id: number;\n      name: string;\n      text: string;\n    };<\/code><\/pre>\n
    The protocol between the client and server is as follows:<\/p>\n
      \n
    1. The client establishes a web socket connection.<\/li>\n
    2. The server responds with a ChatResponse<\/em> of type id<\/em>, via which the client receives a unique session id.<\/li>\n
    3. The client sends a ChatRequest<\/em> of type username<\/em> to inform the user's name.<\/li>\n
    4. The server confirms this username with a ChatResponse<\/em> of type username<\/em>. If the desired username is already taken, the client receives a corrected username via this message, which the server creates by appending a number to the preferred one.<\/li>\n
    5. The client sends ChatRequests<\/em> with its messages (type message)<\/em>. The server distributes this message to all clients as a ChatResponse<\/em> of type message.<\/em><\/li>\n<\/ol>\n
      Representation of the Chat<\/h2>\n
      The connection to the chat is represented by the example with the type ChatConnection<\/em>:<\/p>\n
      export type SendFn = (message: string) => void;\n\nexport type ChatConnection = {\n  resource: ResourceRef<ChatResponse[] | undefined>;\n  connected: () => boolean;\n  acceptedUserName: () => string;\n  send: SendFn;\n};<\/code><\/pre>\n
      The heart of the ChatConnection<\/em> is a Resource that represents all messages received so far in the form of an array. It also provides further status information as signals. This includes the connection status (connected<\/em>) and the username (acceptedUserName<\/em>) corrected by the server if necessary.<\/p>\n
      The send<\/em> method allows the chat to send messages to the server. The implementation maps the passed string to a ChatRequest<\/em> of type message<\/em>.<\/p>\n
      Factory for the Chat<\/h2>\n
      The factory for the chat is structured similarly to the one for the timer discussed previously. However, it initially prepares a few additional variables:<\/p>\n
      export function chatConnection(\n  websocketUrl: string,\n  userName: () => string\n): ChatConnection {\n\n  let connection: WebSocket;\n\n  const connected = signal(false);\n  const id = signal(0);\n  const acceptedUserName = signal('');\n\n  const params = computed(() => ({\n    userName: userName(),\n  }));\n\n  const chatResource = resource({\n    params,\n    stream: async (loaderParams) => {\n      \/\/ init web socket connection\n      \/\/ handle and collect messages\n      [\u2026]\n    },\n  });\n\n  const send: SendFn = (message: string) => {\n    const request: ChatRequest = {\n      type: 'message',\n      id: id(),\n      text: message,\n    };\n    connection.send(JSON.stringify(request));\n  };\n\n  return {\n    connected,\n    resource: chatResource,\n    acceptedUserName,\n    send,\n  };\n}<\/code><\/pre>\n
      These variables include the connection<\/em>, which reflects the web socket connection established by the Streaming Loader, the previously mentioned connected<\/em> and accpetedUserName<\/em> Signals, and an id<\/em> Signal representing the current user session. In the end, the factory returns a few of these Signals, the created Streaming Resource, and the send<\/em> method as a ChatConnection<\/em>. It does not publish the id<\/em> Signal, as this is an implementation detail.<\/p>\n
      The streaming loader of the resource first creates an Array messages<\/em> in which it collects the received chat messages:<\/p>\n
      const chatResource = resource({\n  request,\n  stream: async (loaderParams) => {\n    const userName = loaderParams.params.userName;\n\n    let messages: ChatResponse[] = [];\n\n    \/\/ 1. Create Signal representing the Stream\n    const resultSignal = signal<ResourceStreamItem<ChatResponse>>({\n      value: messages,\n    });\n\n    if (!userName) {\n      return resultSignal;\n    }\n\n    \/\/ 2. Set up async logic updating the Signal\n    connection = new WebSocket(websocketUrl, 'json');\n\n    connection.addEventListener('open', (event) => {\n      console.log('[open]');\n      connected.set(true);\n    });\n\n    connection.addEventListener('message', (event) => {\n      const value = JSON.parse(event.data) as ChatResponse;\n      console.log('[message]', value);\n\n      if (value.type === 'id') {\n        id.set(value.id);\n        sendUserName(value.id, userName, connection);\n      }\n\n      if (value.type === 'username' && value.id == id()) {\n        acceptedUserName.set(value.name);\n      }\n\n      if (value.type === 'message' || value.type === 'username') {\n        messages = [...messages, value];\n        resultSignal.set({ value: messages });\n      }\n    });\n\n    connection.addEventListener('error', (event) => {\n      const error = new Error(Error with websocket connection<\/code>);\n      console.log('[event]', event);\n      resultSignal.set({ error });\n    });\n\n    \/\/ 3. Set up clean-up handler triggered by AbortSignal\n    params.abortSignal.addEventListener('abort', () => {\n      console.log('clean up!');\n      connection.close();\n      connected.set(false);\n      id.set(0);\n      acceptedUserName.set('');\n    });\n\n    \/\/ 4. Return Signal\n    return resultSignal;\n  },\n});\n\nfunction sendUserName(id: number, userName: string, connection: WebSocket) {\n  const message: ChatRequest = {\n    type: 'username',\n    id: id,\n    name: userName,\n  };\n  connection.send(JSON.stringify(message));\n}<\/code><\/pre>\n
      The rest of the implementation follows the four points discussed in the previous article. The prepared signal reflects the stream and contains the managed Array with the received messages.<\/p>\n
      The client receives information from the server via the configured event handlers. The message<\/em> event takes care of the protocol described above. It adds all received messages to the messages Array. This must be done immutably, i.e., using a shallow copy, so the Signal perceives the change.<\/p>\n
      The open<\/em> event sets connected<\/em> to true,<\/em> and the error<\/em> event writes the current error to the stream. The AbortSignal\u2019s abort<\/em> event closes the web socket connection and resets the managed properties. At the end, the Streaming Loader returns the signal reflecting the stream as usual.<\/p>\n
      Conclusion<\/h2>\n
      Signals in Angular always only represent the current value. Intermediate values for changes that follow one another in the same task are ignored (Glitch Free property). This is well suited for changing states, such as a counter, but can lead to data loss in event flows - such as a chat that should display all received messages. <\/p>\n
      The solution is to collect the messages received (in the time window of interest) in the Resource and publish the resulting array via the resource. This array, therefore, corresponds to a value that changes over time.<\/p>\n
      While this is an interesting pattern, of course, no one prevents us from using different approaches such as RxJS that directly represent the flow of events.<\/p>\n","protected":false},"excerpt":{"rendered":"
      This is post 8 of 9 in the series “Signals” Signals in Angular: Building Blocks Component Communication with Signals: Inputs, Two-Way Bindings, and Content\/ View Queries Successful with Signals in Angular – 3 Effective Rules for Your Architecture Skillfully Using Signals in Angular – Selected Hints for Professional Use When (Not) to use Effects in […]<\/p>\n","protected":false},"author":9,"featured_media":27915,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-27933","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","post_series-signals"],"acf":[],"yoast_head":"\nStreaming Resources for a Chat with Web Sockets: Messages in a Glitch-Free World - ANGULARarchitects<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Streaming Resources for a Chat with Web Sockets: Messages in a Glitch-Free World - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"This is post 8 of 9 in the series “Signals” Signals in Angular: Building Blocks Component Communication with Signals: Inputs, Two-Way Bindings, and Content\/ View Queries Successful with Signals in Angular – 3 Effective Rules for Your Architecture Skillfully Using Signals in Angular – Selected Hints for Professional Use When (Not) to use Effects in […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-26T22:24:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-03T14:38:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/01\/chat.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Manfred Steyer, GDE\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/01\/chat.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@daniel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manfred Steyer, GDE\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/\"},\"author\":{\"name\":\"Manfred Steyer, GDE\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\"},\"headline\":\"Streaming Resources for a Chat with Web Sockets: Messages in a Glitch-Free World\",\"datePublished\":\"2025-01-26T22:24:19+00:00\",\"dateModified\":\"2025-06-03T14:38:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/\"},\"wordCount\":1276,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/01\/shutterstock_610351277.jpg\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/\",\"name\":\"Streaming Resources for a Chat with Web Sockets: Messages in a Glitch-Free World - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/01\/shutterstock_610351277.jpg\",\"datePublished\":\"2025-01-26T22:24:19+00:00\",\"dateModified\":\"2025-06-03T14:38:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/01\/shutterstock_610351277.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/01\/shutterstock_610351277.jpg\",\"width\":1000,\"height\":395},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Streaming Resources for a Chat with Web Sockets: Messages in a Glitch-Free World\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\",\"name\":\"Manfred Steyer, GDE\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"caption\":\"Manfred Steyer, GDE\"},\"sameAs\":[\"https:\/\/x.com\/daniel\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Streaming Resources for a Chat with Web Sockets: Messages in a Glitch-Free World - ANGULARarchitects","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:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/","og_locale":"en_US","og_type":"article","og_title":"Streaming Resources for a Chat with Web Sockets: Messages in a Glitch-Free World - ANGULARarchitects","og_description":"This is post 8 of 9 in the series “Signals” Signals in Angular: Building Blocks Component Communication with Signals: Inputs, Two-Way Bindings, and Content\/ View Queries Successful with Signals in Angular – 3 Effective Rules for Your Architecture Skillfully Using Signals in Angular – Selected Hints for Professional Use When (Not) to use Effects in […]","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/","og_site_name":"ANGULARarchitects","article_published_time":"2025-01-26T22:24:19+00:00","article_modified_time":"2025-06-03T14:38:20+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/01\/chat.jpg","type":"image\/jpeg"}],"author":"Manfred Steyer, GDE","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/01\/chat.jpg","twitter_creator":"@daniel","twitter_misc":{"Written by":"Manfred Steyer, GDE","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/"},"author":{"name":"Manfred Steyer, GDE","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951"},"headline":"Streaming Resources for a Chat with Web Sockets: Messages in a Glitch-Free World","datePublished":"2025-01-26T22:24:19+00:00","dateModified":"2025-06-03T14:38:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/"},"wordCount":1276,"commentCount":0,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/01\/shutterstock_610351277.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/","name":"Streaming Resources for a Chat with Web Sockets: Messages in a Glitch-Free World - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/01\/shutterstock_610351277.jpg","datePublished":"2025-01-26T22:24:19+00:00","dateModified":"2025-06-03T14:38:20+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/01\/shutterstock_610351277.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/01\/shutterstock_610351277.jpg","width":1000,"height":395},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/streaming-resources-for-a-chat-with-web-sockets-messages-in-a-glitch-free-world\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"Streaming Resources for a Chat with Web Sockets: Messages in a Glitch-Free World"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951","name":"Manfred Steyer, GDE","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","caption":"Manfred Steyer, GDE"},"sameAs":["https:\/\/x.com\/daniel"]}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/27933","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=27933"}],"version-history":[{"count":10,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/27933\/revisions"}],"predecessor-version":[{"id":30466,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/27933\/revisions\/30466"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/27915"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=27933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=27933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=27933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}