{"id":259,"date":"2024-07-31T00:14:08","date_gmt":"2024-07-30T18:44:08","guid":{"rendered":"https:\/\/farrukhnaveed.co\/blogs\/?p=259"},"modified":"2024-07-31T00:14:11","modified_gmt":"2024-07-30T18:44:11","slug":"building-real-time-applications-with-websockets-and-server-sent-events","status":"publish","type":"post","link":"https:\/\/farrukhnaveed.co\/blogs\/building-real-time-applications-with-websockets-and-server-sent-events\/","title":{"rendered":"Building Real-Time Applications with WebSockets and Server-Sent Events"},"content":{"rendered":"\n

Introduction<\/h3>\n\n\n\n

In the rapidly evolving landscape of web development, real-time applications have become crucial for delivering a seamless and interactive user experience. From chat applications and live notifications to collaborative tools and streaming services, real-time capabilities are now an integral part of modern web applications. This article explores two powerful technologies\u2014WebSockets and Server-Sent Events (SSE)\u2014that enable developers to build robust real-time applications.<\/p>\n\n\n\n

Understanding WebSockets<\/h3>\n\n\n\n

WebSockets provide a full-duplex communication channel over a single, long-lived TCP connection. Unlike the traditional HTTP request-response model, WebSockets allow for continuous two-way interaction between the client and the server, making them ideal for real-time applications.<\/p>\n\n\n\n

Key Features of WebSockets:<\/h4>\n\n\n\n
    \n
  1. Persistent Connection<\/strong>: A single connection remains open, reducing the overhead of establishing multiple connections.<\/li>\n\n\n\n
  2. Bidirectional Communication<\/strong>: Both the client and server can send and receive messages independently.<\/li>\n\n\n\n
  3. Low Latency<\/strong>: WebSockets offer lower latency compared to HTTP polling or long-polling methods.<\/li>\n<\/ol>\n\n\n\n

    Use Cases for WebSockets:<\/h4>\n\n\n\n
      \n
    • Chat applications<\/li>\n\n\n\n
    • Online gaming<\/li>\n\n\n\n
    • Collaborative editing tools<\/li>\n\n\n\n
    • Real-time notifications<\/li>\n<\/ul>\n\n\n\n

      Implementing WebSockets:<\/h4>\n\n\n\n

      To implement WebSockets, you need a server that supports the WebSocket protocol and a client that can open and manage the WebSocket connection.<\/p>\n\n\n\n

      Server-Side (Node.js with ws<\/code> library):<\/strong><\/p>\n\n\n\n

      <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
      const<\/span> <\/span>WebSocket<\/span> <\/span>=<\/span> <\/span>require<\/span>(<\/span>'<\/span>ws<\/span>'<\/span>)<\/span>;<\/span><\/span>\nconst<\/span> <\/span>server<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>WebSocket<\/span>.<\/span>Server<\/span>(<\/span>{<\/span> <\/span>port<\/span>:<\/span> <\/span>8080<\/span> <\/span>}<\/span>)<\/span>;<\/span><\/span>\n<\/span>\nserver<\/span>.<\/span>on<\/span>(<\/span>'<\/span>connection<\/span>'<\/span>,<\/span> <\/span>(<\/span>socket<\/span>)<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>Client connected<\/span>'<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n  <\/span>socket<\/span>.<\/span>on<\/span>(<\/span>'<\/span>message<\/span>'<\/span>,<\/span> <\/span>(<\/span>message<\/span>)<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>`<\/span>Received: <\/span>${<\/span>message<\/span>}<\/span>`<\/span>)<\/span>;<\/span><\/span>\n    <\/span>socket<\/span>.<\/span>send<\/span>(<\/span>`<\/span>Echo: <\/span>${<\/span>message<\/span>}<\/span>`<\/span>)<\/span>;<\/span><\/span>\n  <\/span>}<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n  <\/span>socket<\/span>.<\/span>on<\/span>(<\/span>'<\/span>close<\/span>'<\/span>,<\/span> <\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>Client disconnected<\/span>'<\/span>)<\/span>;<\/span><\/span>\n  <\/span>}<\/span>)<\/span>;<\/span><\/span>\n}<\/span>)<\/span>;<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
      Client-Side (JavaScript):<\/strong><\/p>\n\n\n\n
      <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
      const<\/span> <\/span>socket<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>WebSocket<\/span>(<\/span>'<\/span>ws:\/\/localhost:8080<\/span>'<\/span>)<\/span>;<\/span><\/span>\n<\/span>\nsocket<\/span>.<\/span>onopen<\/span> <\/span>=<\/span> <\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>Connected to server<\/span>'<\/span>)<\/span>;<\/span><\/span>\n  <\/span>socket<\/span>.<\/span>send<\/span>(<\/span>'<\/span>Hello Server!<\/span>'<\/span>)<\/span>;<\/span><\/span>\n}<\/span>;<\/span><\/span>\n<\/span>\nsocket<\/span>.<\/span>onmessage<\/span> <\/span>=<\/span> <\/span>(<\/span>event<\/span>)<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>`<\/span>Message from server: <\/span>${<\/span>event<\/span>.<\/span>data<\/span>}<\/span>`<\/span>)<\/span>;<\/span><\/span>\n}<\/span>;<\/span><\/span>\n<\/span>\nsocket<\/span>.<\/span>onclose<\/span> <\/span>=<\/span> <\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>Disconnected from server<\/span>'<\/span>)<\/span>;<\/span><\/span>\n}<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
      Exploring Server-Sent Events (SSE)<\/h3>\n\n\n\n
      Server-Sent Events (SSE) is a unidirectional communication protocol that allows the server to push updates to the client over a single HTTP connection. Unlike WebSockets, SSE is simpler and uses the standard HTTP protocol, making it easier to implement with existing infrastructure.<\/p>\n\n\n\n
      Key Features of SSE:<\/h4>\n\n\n\n
        \n
      1. Simple to Implement<\/strong>: Uses standard HTTP, making it straightforward to integrate with web servers.<\/li>\n\n\n\n
      2. Automatic Reconnection<\/strong>: The browser automatically handles reconnection in case of a dropped connection.<\/li>\n\n\n\n
      3. Event-Based<\/strong>: Supports sending named events, allowing for more structured communication.<\/li>\n<\/ol>\n\n\n\n
        Use Cases for SSE:<\/h4>\n\n\n\n
          \n
        • Live news or sports updates<\/li>\n\n\n\n
        • Real-time monitoring dashboards<\/li>\n\n\n\n
        • Stock price updates<\/li>\n\n\n\n
        • Social media feeds<\/li>\n<\/ul>\n\n\n\n
          Implementing SSE:<\/h4>\n\n\n\n
          To implement SSE, you need a server that can send events to the client and a client that can listen for these events.<\/p>\n\n\n\n
          Server-Side (Node.js with Express):<\/strong><\/p>\n\n\n\n
          <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
          const<\/span> <\/span>express<\/span> <\/span>=<\/span> <\/span>require<\/span>(<\/span>'<\/span>express<\/span>'<\/span>)<\/span>;<\/span><\/span>\nconst<\/span> <\/span>app<\/span> <\/span>=<\/span> <\/span>express<\/span>()<\/span>;<\/span><\/span>\n<\/span>\napp<\/span>.<\/span>get<\/span>(<\/span>'<\/span>\/events<\/span>'<\/span>,<\/span> <\/span>(<\/span>req<\/span>,<\/span> <\/span>res<\/span>)<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n  <\/span>res<\/span>.<\/span>setHeader<\/span>(<\/span>'<\/span>Content-Type<\/span>'<\/span>,<\/span> <\/span>'<\/span>text\/event-stream<\/span>'<\/span>)<\/span>;<\/span><\/span>\n  <\/span>res<\/span>.<\/span>setHeader<\/span>(<\/span>'<\/span>Cache-Control<\/span>'<\/span>,<\/span> <\/span>'<\/span>no-cache<\/span>'<\/span>)<\/span>;<\/span><\/span>\n  <\/span>res<\/span>.<\/span>setHeader<\/span>(<\/span>'<\/span>Connection<\/span>'<\/span>,<\/span> <\/span>'<\/span>keep-alive<\/span>'<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n  <\/span>const<\/span> <\/span>sendEvent<\/span> <\/span>=<\/span> <\/span>(<\/span>data<\/span>)<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>res<\/span>.<\/span>write<\/span>(<\/span>`<\/span>data: <\/span>${<\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>data<\/span>)<\/span>}<\/span>\\n\\n<\/span>`<\/span>)<\/span>;<\/span><\/span>\n  <\/span>}<\/span>;<\/span><\/span>\n<\/span>\n  <\/span>sendEvent<\/span>(<\/span>{<\/span> <\/span>message<\/span>:<\/span> <\/span>'<\/span>Hello Client!<\/span>'<\/span> <\/span>}<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n  <\/span>setInterval<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>sendEvent<\/span>(<\/span>{<\/span> <\/span>message<\/span>:<\/span> <\/span>'<\/span>Ping from server<\/span>'<\/span> <\/span>}<\/span>)<\/span>;<\/span><\/span>\n  <\/span>},<\/span> <\/span>5000<\/span>)<\/span>;<\/span><\/span>\n}<\/span>)<\/span>;<\/span><\/span>\n<\/span>\napp<\/span>.<\/span>listen<\/span>(<\/span>3000<\/span>,<\/span> <\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>Server running on port 3000<\/span>'<\/span>)<\/span>;<\/span><\/span>\n}<\/span>)<\/span>;<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
          Client-Side (JavaScript):<\/strong><\/p>\n\n\n\n
          <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
          const<\/span> <\/span>eventSource<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>EventSource<\/span>(<\/span>'<\/span>\/events<\/span>'<\/span>)<\/span>;<\/span><\/span>\n<\/span>\neventSource<\/span>.<\/span>onmessage<\/span> <\/span>=<\/span> <\/span>(<\/span>event<\/span>)<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>`<\/span>Message from server: <\/span>${<\/span>event<\/span>.<\/span>data<\/span>}<\/span>`<\/span>)<\/span>;<\/span><\/span>\n}<\/span>;<\/span><\/span>\n<\/span>\neventSource<\/span>.<\/span>onerror<\/span> <\/span>=<\/span> <\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>Error occurred<\/span>'<\/span>)<\/span>;<\/span><\/span>\n}<\/span>;<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
          Choosing Between WebSockets and SSE<\/h3>\n\n\n\n
          Both WebSockets and SSE are powerful tools for building real-time applications, but they have different strengths and use cases.<\/p>\n\n\n\n
          When to Use WebSockets:<\/h4>\n\n\n\n
            \n
          • When you need bidirectional communication.<\/li>\n\n\n\n
          • For applications requiring low latency, such as gaming or chat.<\/li>\n\n\n\n
          • When you need to handle a high volume of small messages.<\/li>\n<\/ul>\n\n\n\n
            When to Use SSE:<\/h4>\n\n\n\n
              \n
            • For unidirectional updates from server to client.<\/li>\n\n\n\n
            • When simplicity and ease of implementation are important.<\/li>\n\n\n\n
            • For applications with lower frequency updates, such as live feeds or notifications.<\/li>\n<\/ul>\n\n\n\n
              Conclusion<\/h3>\n\n\n\n
              Real-time applications are essential for creating engaging and interactive user experiences. WebSockets and Server-Sent Events are two effective technologies that enable real-time communication between the client and server. By understanding their features, use cases, and implementation, developers can choose the right tool for their specific application needs and build robust, scalable real-time applications.<\/p>\n","protected":false},"excerpt":{"rendered":"
              Introduction In the rapidly evolving landscape of web development, real-time applications have become crucial for delivering a seamless and interactive user experience. From chat applications […]<\/p>\n","protected":false},"author":1,"featured_media":260,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42],"tags":[59,57,58],"class_list":["post-259","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-javascript","tag-node-js","tag-real-time-applications"],"yoast_head":"\nBuilding Real-Time Applications with WebSockets and Server-Sent Events - Farrukh's Tech Space<\/title>\n<meta name=\"description\" content=\"Learn how to build real-time applications using WebSockets and Server-Sent Events (SSE). Discover the key features, use cases, and implementation strategies for these powerful technologies to enhance your web development projects\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/farrukhnaveed.co\/blogs\/building-real-time-applications-with-websockets-and-server-sent-events\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building Real-Time Applications with WebSockets and Server-Sent Events\" \/>\n<meta property=\"og:description\" content=\"Learn how to build real-time applications using WebSockets and Server-Sent Events (SSE). Discover the key features, use cases, and implementation strategies for these powerful technologies to enhance your web development projects\" \/>\n<meta property=\"og:url\" content=\"https:\/\/farrukhnaveed.co\/blogs\/building-real-time-applications-with-websockets-and-server-sent-events\/\" \/>\n<meta property=\"og:site_name\" content=\"Farrukh's Tech Space\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-30T18:44:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-30T18:44:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/farrukhnaveed.co\/blogs\/wp-content\/uploads\/2024\/07\/Building-Real-Time-Application.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=\"Farrukh Naveed Anjum\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Building Real-Time Applications with WebSockets and Server-Sent Events\" \/>\n<meta name=\"twitter:description\" content=\"Learn how to build real-time applications using WebSockets and Server-Sent Events (SSE). Discover the key features, use cases, and implementation strategies for these powerful technologies to enhance your web development projects\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/farrukhnaveed.co\/blogs\/wp-content\/uploads\/2024\/07\/Building-Real-Time-Application.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Farrukh Naveed Anjum\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/farrukhnaveed.co\/blogs\/building-real-time-applications-with-websockets-and-server-sent-events\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/farrukhnaveed.co\/blogs\/building-real-time-applications-with-websockets-and-server-sent-events\/\"},\"author\":{\"name\":\"Farrukh Naveed Anjum\",\"@id\":\"https:\/\/farrukhnaveed.co\/blogs\/#\/schema\/person\/ce7d07e6a917b9b73aa79007a2357d29\"},\"headline\":\"Building Real-Time Applications with WebSockets and Server-Sent Events\",\"datePublished\":\"2024-07-30T18:44:08+00:00\",\"dateModified\":\"2024-07-30T18:44:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/farrukhnaveed.co\/blogs\/building-real-time-applications-with-websockets-and-server-sent-events\/\"},\"wordCount\":475,\"publisher\":{\"@id\":\"https:\/\/farrukhnaveed.co\/blogs\/#organization\"},\"keywords\":[\"JavaScript\",\"Node JS\",\"Real Time Applications\"],\"articleSection\":[\"Software\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/farrukhnaveed.co\/blogs\/building-real-time-applications-with-websockets-and-server-sent-events\/\",\"url\":\"https:\/\/farrukhnaveed.co\/blogs\/building-real-time-applications-with-websockets-and-server-sent-events\/\",\"name\":\"Building Real-Time Applications with WebSockets and Server-Sent Events - Farrukh's Tech Space\",\"isPartOf\":{\"@id\":\"https:\/\/farrukhnaveed.co\/blogs\/#website\"},\"datePublished\":\"2024-07-30T18:44:08+00:00\",\"dateModified\":\"2024-07-30T18:44:11+00:00\",\"description\":\"Learn how to build real-time applications using WebSockets and Server-Sent Events (SSE). Discover the key features, use cases, and implementation strategies for these powerful technologies to enhance your web development projects\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/farrukhnaveed.co\/blogs\/building-real-time-applications-with-websockets-and-server-sent-events\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/farrukhnaveed.co\/blogs\/#website\",\"url\":\"https:\/\/farrukhnaveed.co\/blogs\/\",\"name\":\"Farrukh Naveed Anjum Blogs\",\"description\":\"Empowering Software Architects with Knowledge on Big Data and AI\",\"publisher\":{\"@id\":\"https:\/\/farrukhnaveed.co\/blogs\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/farrukhnaveed.co\/blogs\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/farrukhnaveed.co\/blogs\/#organization\",\"name\":\"Farrukh Naveed Anjum Blogs\",\"url\":\"https:\/\/farrukhnaveed.co\/blogs\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/farrukhnaveed.co\/blogs\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/farrukhnaveed.co\/blogs\/wp-content\/uploads\/2023\/06\/IMG_5018-scaled.jpg\",\"contentUrl\":\"https:\/\/farrukhnaveed.co\/blogs\/wp-content\/uploads\/2023\/06\/IMG_5018-scaled.jpg\",\"width\":1707,\"height\":2560,\"caption\":\"Farrukh Naveed Anjum Blogs\"},\"image\":{\"@id\":\"https:\/\/farrukhnaveed.co\/blogs\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/farrukhnaveed.co\/blogs\/#\/schema\/person\/ce7d07e6a917b9b73aa79007a2357d29\",\"name\":\"Farrukh Naveed Anjum\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/farrukhnaveed.co\/blogs\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bdf1af0d569259df562434e6dc99415a377c6fc053f9e1507aa34a6522561bb8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bdf1af0d569259df562434e6dc99415a377c6fc053f9e1507aa34a6522561bb8?s=96&d=mm&r=g\",\"caption\":\"Farrukh Naveed Anjum\"},\"description\":\"Full Stack Developer and Software Architect with 14 years of experience in various domains, including Enterprise Resource Planning, Data Retrieval, Web Scraping, Real-Time Analytics, Cybersecurity, NLP, ED-Tech, and B2B Price Comparison\",\"sameAs\":[\"https:\/\/farrukhnaveed.co\/blog\"],\"url\":\"https:\/\/farrukhnaveed.co\/blogs\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Building Real-Time Applications with WebSockets and Server-Sent Events - Farrukh's Tech Space","description":"Learn how to build real-time applications using WebSockets and Server-Sent Events (SSE). Discover the key features, use cases, and implementation strategies for these powerful technologies to enhance your web development projects","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:\/\/farrukhnaveed.co\/blogs\/building-real-time-applications-with-websockets-and-server-sent-events\/","og_locale":"en_US","og_type":"article","og_title":"Building Real-Time Applications with WebSockets and Server-Sent Events","og_description":"Learn how to build real-time applications using WebSockets and Server-Sent Events (SSE). Discover the key features, use cases, and implementation strategies for these powerful technologies to enhance your web development projects","og_url":"https:\/\/farrukhnaveed.co\/blogs\/building-real-time-applications-with-websockets-and-server-sent-events\/","og_site_name":"Farrukh's Tech Space","article_published_time":"2024-07-30T18:44:08+00:00","article_modified_time":"2024-07-30T18:44:11+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/farrukhnaveed.co\/blogs\/wp-content\/uploads\/2024\/07\/Building-Real-Time-Application.jpg","type":"image\/jpeg"}],"author":"Farrukh Naveed Anjum","twitter_card":"summary_large_image","twitter_title":"Building Real-Time Applications with WebSockets and Server-Sent Events","twitter_description":"Learn how to build real-time applications using WebSockets and Server-Sent Events (SSE). Discover the key features, use cases, and implementation strategies for these powerful technologies to enhance your web development projects","twitter_image":"https:\/\/farrukhnaveed.co\/blogs\/wp-content\/uploads\/2024\/07\/Building-Real-Time-Application.jpg","twitter_misc":{"Written by":"Farrukh Naveed Anjum","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/farrukhnaveed.co\/blogs\/building-real-time-applications-with-websockets-and-server-sent-events\/#article","isPartOf":{"@id":"https:\/\/farrukhnaveed.co\/blogs\/building-real-time-applications-with-websockets-and-server-sent-events\/"},"author":{"name":"Farrukh Naveed Anjum","@id":"https:\/\/farrukhnaveed.co\/blogs\/#\/schema\/person\/ce7d07e6a917b9b73aa79007a2357d29"},"headline":"Building Real-Time Applications with WebSockets and Server-Sent Events","datePublished":"2024-07-30T18:44:08+00:00","dateModified":"2024-07-30T18:44:11+00:00","mainEntityOfPage":{"@id":"https:\/\/farrukhnaveed.co\/blogs\/building-real-time-applications-with-websockets-and-server-sent-events\/"},"wordCount":475,"publisher":{"@id":"https:\/\/farrukhnaveed.co\/blogs\/#organization"},"keywords":["JavaScript","Node JS","Real Time Applications"],"articleSection":["Software"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/farrukhnaveed.co\/blogs\/building-real-time-applications-with-websockets-and-server-sent-events\/","url":"https:\/\/farrukhnaveed.co\/blogs\/building-real-time-applications-with-websockets-and-server-sent-events\/","name":"Building Real-Time Applications with WebSockets and Server-Sent Events - Farrukh's Tech Space","isPartOf":{"@id":"https:\/\/farrukhnaveed.co\/blogs\/#website"},"datePublished":"2024-07-30T18:44:08+00:00","dateModified":"2024-07-30T18:44:11+00:00","description":"Learn how to build real-time applications using WebSockets and Server-Sent Events (SSE). Discover the key features, use cases, and implementation strategies for these powerful technologies to enhance your web development projects","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/farrukhnaveed.co\/blogs\/building-real-time-applications-with-websockets-and-server-sent-events\/"]}]},{"@type":"WebSite","@id":"https:\/\/farrukhnaveed.co\/blogs\/#website","url":"https:\/\/farrukhnaveed.co\/blogs\/","name":"Farrukh Naveed Anjum Blogs","description":"Empowering Software Architects with Knowledge on Big Data and AI","publisher":{"@id":"https:\/\/farrukhnaveed.co\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/farrukhnaveed.co\/blogs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/farrukhnaveed.co\/blogs\/#organization","name":"Farrukh Naveed Anjum Blogs","url":"https:\/\/farrukhnaveed.co\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/farrukhnaveed.co\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/farrukhnaveed.co\/blogs\/wp-content\/uploads\/2023\/06\/IMG_5018-scaled.jpg","contentUrl":"https:\/\/farrukhnaveed.co\/blogs\/wp-content\/uploads\/2023\/06\/IMG_5018-scaled.jpg","width":1707,"height":2560,"caption":"Farrukh Naveed Anjum Blogs"},"image":{"@id":"https:\/\/farrukhnaveed.co\/blogs\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/farrukhnaveed.co\/blogs\/#\/schema\/person\/ce7d07e6a917b9b73aa79007a2357d29","name":"Farrukh Naveed Anjum","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/farrukhnaveed.co\/blogs\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bdf1af0d569259df562434e6dc99415a377c6fc053f9e1507aa34a6522561bb8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bdf1af0d569259df562434e6dc99415a377c6fc053f9e1507aa34a6522561bb8?s=96&d=mm&r=g","caption":"Farrukh Naveed Anjum"},"description":"Full Stack Developer and Software Architect with 14 years of experience in various domains, including Enterprise Resource Planning, Data Retrieval, Web Scraping, Real-Time Analytics, Cybersecurity, NLP, ED-Tech, and B2B Price Comparison","sameAs":["https:\/\/farrukhnaveed.co\/blog"],"url":"https:\/\/farrukhnaveed.co\/blogs\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/farrukhnaveed.co\/blogs\/wp-json\/wp\/v2\/posts\/259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/farrukhnaveed.co\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/farrukhnaveed.co\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/farrukhnaveed.co\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/farrukhnaveed.co\/blogs\/wp-json\/wp\/v2\/comments?post=259"}],"version-history":[{"count":1,"href":"https:\/\/farrukhnaveed.co\/blogs\/wp-json\/wp\/v2\/posts\/259\/revisions"}],"predecessor-version":[{"id":261,"href":"https:\/\/farrukhnaveed.co\/blogs\/wp-json\/wp\/v2\/posts\/259\/revisions\/261"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/farrukhnaveed.co\/blogs\/wp-json\/wp\/v2\/media\/260"}],"wp:attachment":[{"href":"https:\/\/farrukhnaveed.co\/blogs\/wp-json\/wp\/v2\/media?parent=259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/farrukhnaveed.co\/blogs\/wp-json\/wp\/v2\/categories?post=259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/farrukhnaveed.co\/blogs\/wp-json\/wp\/v2\/tags?post=259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}