https://ehosseini.info/component---src-templates-post-tsx-content-…ts-long-polling-mdx-b13a94e20e16118818f6.js

1"use strict";(self.webpackChunkblog=self.webpackChunkblog||[]).push([[1607],{8071:function(e,n,t){t.r(n),t.d(n,{default:function(){return E}});var a=t(8453),s=t(6540);function l(e){const n=Object.assign({h1:"h1",p:"p",hr:"hr",h2:"h2",span:"span",ol:"ol",li:"li",ul:"ul",h3:"h3"},(0,a.RP)(),e.components);return s.createElement(s.Fragment,null,s.createElement(n.h1,null,"Long Polling, Facilitating Real-Time Communication Without Persistent Connections"),"\n",s.createElement(n.p,null,"Long polling is a classic technique in the realm of real-time web applications, and its versatility remains unchallenged. It provides a clever workaround to emulate server push through the conventional HTTP by keeping a request open until the server has meaningful data to transmit. Once a response arrives, the client immediately re-initiates the connection, thus emulating a live stream without the need for complex socket programming."),"\n",s.createElement(n.p,null,"You may question the relevance of long polling in the era of WebSockets, Server-Sent Events (SSE), and push APIs. The answer lies in its universal applicability, surprising scalability, and independence from any special protocol support."),"\n",s.createElement(n.hr),"\n",s.createElement(n.h2,null,"Understanding the Mechanism of Long Polling"),"\n",s.createElement(n.p,null,"In traditional polling, the client periodically inquires from the server, typically every few seconds. Here's a simplified JavaScript example using the ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">fetch</code>'}})," function:"),"\n",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="ts"><pre style="counter-reset: linenumber NaN" class="language-ts line-numbers"><code class="language-ts"><span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">"/api/updates"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code><span aria-hidden="true" class="line-numbers-rows" style="white-space: normal; width: auto; left: 0;"><span></span></span></pre></div>'}}),"\n",s.createElement(n.p,null,"In contrast, long polling follows this procedure:"),"\n",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="ts"><pre style="counter-reset: linenumber NaN" class="language-ts line-numbers"><code class="language-ts"><span class="token keyword">function</span> <span class="token function">poll</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">"/api/updates"</span><span class="token punctuation">)</span>\n    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>res <span class="token operator">=></span> res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>\n    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>data <span class="token operator">=></span> <span class="token punctuation">{</span>\n      <span class="token function">updateUI</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>\n      <span class="token function">poll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// immediately re-issue</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n<span class="token function">poll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code><span aria-hidden="true" class="line-numbers-rows" style="white-space: normal; width: auto; left: 0;"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>'}}),"\n",s.createElement(n.p,null,"The fundamental difference lies in the server's behavior. In long polling, the server intentionally delays the response until it has fresh data to share or until a timeout condition is met. The client doesn’t retry unless it receives a response. This approach drastically reduces the request volume and ensures near-instantaneous data delivery once an event occurs."),"\n",s.createElement(n.hr),"\n",s.createElement(n.h2,null,"Lifespan of a Long Poll Request"),"\n",s.createElement(n.p,null,"The lifecycle of a long poll request typically includes these steps:"),"\n",s.createElement(n.ol,null,"\n",s.createElement(n.li,null,"The client makes a GET request to ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">/api/updates</code>'}}),"."),"\n",s.createElement(n.li,null,"The server checks if there’s new data:","\n",s.createElement(n.ul,null,"\n",s.createElement(n.li,null,"If yes: it responds immediately."),"\n",s.createElement(n.li,null,"If no: it holds the connection open for a certain duration (e.g., 30 seconds)."),"\n"),"\n"),"\n",s.createElement(n.li,null,"If a timeout occurs, the server returns an empty response."),"\n",s.createElement(n.li,null,"Once the client receives a response, it repeats the process."),"\n"),"\n",s.createElement(n.p,null,"This strategy creates an idle-efficient and latency-sensitive data stream using plain HTTP."),"\n",s.createElement(n.hr),"\n",s.createElement(n.h2,null,"Practical Use Cases of Long Polling"),"\n",s.createElement(n.h3,null,"Facebook Chat (Early Version)"),"\n",s.createElement(n.p,null,"Facebook's initial chat system leveraged long polling to keep an HTTP request open for message delivery. It successfully scaled across millions of users before WebSockets could effectively handle such a large user base."),"\n",s.createElement(n.h3,null,"Slack (Fallback Mechanism)"),"\n",s.createElement(n.p,null,"Slack utilizes long polling as a fallback mechanism when WebSockets are unavailable, particularly in enterprise firewalls or older browsers."),"\n",s.createElement(n.h3,null,"Notification Systems"),"\n",s.createElement(n.p,null,"Long polling is an excellent tool for applications that require real-time alerts but cannot guarantee socket support. Examples include real-time dashboards, customer messaging platforms, or trading apps."),"\n",s.createElement(n.hr),"\n",s.createElement(n.h2,null,"Pros and Cons of Long Polling"),"\n",s.createElement(n.p,null,"✅ Pros:"),"\n",s.createElement(n.ul,null,"\n",s.createElement(n.li,null,"Universally compatible with all browsers."),"\n",s.createElement(n.li,null,"No depen

1dency on socket servers or protocols."),"\n",s.createElement(n.li,null,"Easier to debug than WebSocket or SSE."),"\n",s.createElement(n.li,null,"Immediate response upon data change."),"\n"),"\n",s.createElement(n.p,null,"❌ Cons:"),"\n",s.createElement(n.ul,null,"\n",s.createElement(n.li,null,"Latency issues if the connection drops."),"\n",s.createElement(n.li,null,"HTTP overhead due to headers and revalidation."),"\n",s.createElement(n.li,null,"Unidirectional communication."),"\n",s.createElement(n.li,null,"Not as efficient as full-duplex protocols."),"\n"),"\n",s.createElement(n.p,null,"Despite some limitations, long polling remains a middle-ground solution: it is a step above short polling and simpler than sockets."),"\n",s.createElement(n.hr),"\n",s.createElement(n.h2,null,"Tips for Implementing Long Polling"),"\n",s.createElement(n.ul,null,"\n",s.createElement(n.li,null,"Employ a ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">timeout</code>'}})," to prevent clients from getting stuck (for example, a maximum wait of 30 seconds)."),"\n",s.createElement(n.li,null,"Use asynchronous server logic to suspend the request until the data is ready."),"\n",s.createElement(n.li,null,"Return a 204 status code if no data is available."),"\n",s.createElement(n.li,null,"Respond with batched events, if possible, to reduce the number of requests."),"\n"),"\n",s.createElement(n.p,null,"Here's how you can implement these tips in a Node.js backend using the Express framework:"),"\n",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre style="counter-reset: linenumber NaN" class="language-js line-numbers"><code class="language-js">app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">"/api/updates"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> update <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">waitForDataOrTimeout</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>update<span class="token punctuation">)</span> <span class="token keyword">return</span> res<span class="token punctuation">.</span><span class="token function">status</span><span class="token punctuation">(</span><span class="token number">204</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span>update<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code><span aria-hidden="true" class="line-numbers-rows" style="white-space: normal; width: auto; left: 0;"><span></span><span></span><span></span><span></span><span></span></span></pre></div>'}}),"\n",s.createElement(n.hr),"\n",s.createElement(n.h2,null,"Scaling Long Polling"),"\n",s.createElement(n.p,null,"Long polling requires connection concurrency, which can be expensive in thread-blocking servers (like PHP, Java with servlet containers) or resource-limited environments. To mitigate these challenges, consider the following:"),"\n",s.createElement(n.ul,null,"\n",s.createElement(n.li,null,"Utilize non-blocking I/O in technologies like Node.js, Go, or Nginx."),"\n",s.createElement(n.li,null,"Use queues and pub/sub models (e.g., Redis, RabbitMQ) to manage requests."),"\n",s.createElement(n.li,null,"Set connection limits to prevent abuse."),"\n"),"\n",s.createElement(n.p,null,"Regularly monitor active poll connections and backend latency to ensure optimal performance."),"\n",s.createElement(n.hr),"\n",s.createElement(n.h2,null,"Fallback Strategies"),"\n",s.createElement(n.p,null,"Long polling often serves as the fallback layer in a multi-tiered real-time system:"),"\n",s.createElement(n.ol,null,"\n",s.createElement(n.li,null,"Attempt to establish a WebSocket connection."),"\n",s.createElement(n.li,null,"If unsuccessful, fallback to SSE."),"\n",s.createElement(n.li,null,"If SSE fail

1s, fallback to long polling."),"\n",s.createElement(n.li,null,"If long polling fails, fallback to short polling."),"\n"),"\n",s.createElement(n.p,null,"This strategy is commonly used in SDKs like Firebase, PubNub, Pusher, and Microsoft SignalR."),"\n",s.createElement(n.hr),"\n",s.createElement(n.h2,null,"Client Resilience Patterns"),"\n",s.createElement(n.ul,null,"\n",s.createElement(n.li,null,"Always re-initiate polling after receiving a response."),"\n",s.createElement(n.li,null,"Implement a backoff strategy on failure (e.g., 5s, 10s, 20s)."),"\n",s.createElement(n.li,null,"Reconnect aggressively upon data receipt."),"\n",s.createElement(n.li,null,"Log dropped/aborted requests for diagnostic purposes."),"\n"),"\n",s.createElement(n.p,null,"Edge tip: Avoid revalidating ETags or caching, every request must reflect the most recent data."),"\n",s.createElement(n.hr),"\n",s.createElement(n.h2,null,"Anti-Patterns to Avoid"),"\n",s.createElement(n.ul,null,"\n",s.createElement(n.li,null,"Holding requests indefinitely without a timeout."),"\n",s.createElement(n.li,null,"Not validating client identity, which can lead to rate abuse."),"\n",s.createElement(n.li,null,"Polling the same resource from multiple tabs."),"\n",s.createElement(n.li,null,"Not measuring tail latencies under load."),"\n"),"\n",s.createElement(n.hr),"\n",s.createElement(n.h2,null,"Conclusion: The Dependable Real-Time Fallback"),"\n",s.createElement(n.p,null,"Long polling is akin to the trusty 4x4 in your backend garage, it might not be the most modern, but it is reliable and gets the job done in challenging conditions."),"\n",s.createElement(n.p,null,"When sockets fail, proxies interfere, or you have to deal with legacy technology, long polling delivers real-time updates with surprising reliability. It might not be cutting-edge, but its battle-tested robustness holds significant value in the real-time world."))}var r=function(e){void 0===e&&(e={});const{wrapper:n}=Object.assign({},(0,a.RP)(),e.components);return n?s.createElement(n,e,s.createElement(l,e)):l(e)},o=t(4794),i=t(8154),c=t(9807),p=t(7772),m=t(984),u=t(5154),d=t(1166),g=t(893);const h={MermaidDiagram:u.A,EmailOff:d.A,pre:e=>s.createElement("div",Object.assign({},e,{className:"overflow-auto"})),iframe:e=>s.createElement("div",{className:"aspect-video"},s.createElement("iframe",Object.assign({},e,{className:"w-full h-full rounded-lg"})))},k=e=>{let{data:n,children:t}=e;if(!n||!n.mdx)return s.createElement(c.A,null,s.createElement("div",{className:"max-w-4xl mx-auto px-4 py-8"},s.createElement("h1",{className:"text-4xl font-bold mb-8"},"Post not found"),s.createElement("p",null,"Sorry, the post you're looking for doesn't exist.")));const{frontmatter:l,fields:r}=n.mdx,{title:u,publishedAt:d,publishedAtISO:k,summary:E,label:f,tags:y}=l,{readingTimeMinutes:b}=r,{siteUrl:v}=n.site.siteMetadata,x=`${v}${r.slug}`,w=r.slug.split("/").at(-2)||"",N=`https://bx.ehosseini.info/?text=${w}&complexity=6&format=webp&width=1200&height=675&title=${encodeURIComponent(u)}&avatar=1`,I=`https://bx.ehosseini.info/?text=${w}&complexity=6&format=webp&width=1200&height=675&align=bottom`,S=n.relatedPosts.nodes.filter((e=>e.fields.slug!==r.slug)).slice(0,3),T={"@type":"BlogPosting",headline:u,datePublished:k,dateModified:k,description:E,author:{"@id":g.eo},publisher:{"@id":g.eo},mainEntityOfPage:x,keywords:null==y?void 0:y.join(", "),image:N,url:x};return s.createElement(c.A,{schemaExtra:[T]},s.createElement(i.m,null,s.createElement("title",null,u," | ",n.site.siteMetadata.title),s.createElement("meta",{name:"description",content:E}),s.createElement("meta",{name:"keywords",content:y.join(", ")}),s.createElement("meta",{property:"og:type",content:"article"}),s.createElement("meta",{property:"og:url",content:x}),s.createElement("meta",{property:"og:title",content:u}),s.createElement("meta",{property:"og:description",content:E}),s.createElement("meta",{property:"og:image",content:N}),s.createElement("meta",{property:"og:image:secure_url",content:N}),s.createElement("meta",{property:"og:image:alt",content:u}

1),s.createElement("meta",{property:"og:image:width",content:"1200"}),s.createElement("meta",{property:"og:image:height",content:"675"}),s.createElement("meta",{property:"og:site_name",content:n.site.siteMetadata.title}),s.createElement("meta",{property:"article:published_time",content:k}),s.createElement("meta",{name:"twitter:card",content:"summary_large_image"}),s.createElement("meta",{name:"twitter:site",content:g._l.xHandle}),s.createElement("meta",{name:"twitter:creator",content:g._l.xHandle}),s.createElement("meta",{name:"twitter:title",content:u}),s.createElement("meta",{name:"twitter:description",content:E}),s.createElement("meta",{name:"twitter:image",content:N}),s.createElement("meta",{name:"twitter:image:alt",content:u}),s.createElement("link",{rel:"canonical",href:x})),s.createElement("div",{className:"relative w-full"},s.createElement("div",{className:"post-hero-bg-layer absolute inset-0 z-0",style:{backgroundImage:`url(${I})`,backgroundSize:"cover",backgroundRepeat:"no-repeat",backgroundPosition:"center"},"aria-hidden":"true"}),s.createElement("header",{className:"relative z-10 mb-8 max-w-3xl mx-auto px-4 pt-8 pb-4"},s.createElement("div",{className:"flex flex-col sm:flex-row sm:items-center gap-3 text-sm text-gray-900 mb-4"},s.createElement("time",{className:"flex items-center"},s.createElement("svg",{className:"w-4 h-4 mr-2",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},s.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"})),d),s.createElement("span",{className:"flex items-center"},s.createElement("svg",{className:"w-4 h-4 mr-2",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},s.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"})),b," min read"),f&&s.createElement("span",{className:"flex items-center"},s.createElement("svg",{className:"w-4 h-4 mr-2",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},s.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"})),f)),s.createElement("div",{className:"mb-6"},s.createElement("h1",{className:"text-3xl font-playfair font-medium text-gray-900 leading-tight mb-4"},u)),s.createElement("div",{className:"mb-6"},s.createElement("p",{className:"text-md leading-relaxed mb-4 text-gray-900"},E),s.createElement("div",{className:"flex flex-wrap gap-2"},null==y?void 0:y.map((e=>s.createElement(p.A,{key:e,tag:e,className:"text-sm"}))))))),s.createElement("article",{className:"max-w-3xl mx-auto px-4 pyb-8"},s.createElement("div",{className:""},s.createElement("div",{className:"flex items-center justify-between mb-4"},s.createElement("div",null),s.createElement("div",{className:"flex space-x-3"},s.createElement("a",{href:`https://twitter.com/intent/tweet?text=${encodeURIComponent(u)}&url=${encodeURIComponent(x)}&hashtags=${encodeURIComponent(y.join(", "))}&image=${encodeURIComponent(I)}`,target:"_blank",rel:"noopener noreferrer",className:"inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"},s.createElement("svg",{className:"w-4 h-4 mr-1.5",fill:"currentColor",viewBox:"0 0 24 24"},s.createElement("path",{d:"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"})),"Share"),s.createElement("a",{href:`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(x)}&title=${encodeURIComponent(u)}&summary=${encodeURIComponent(E)}&image=${encodeURIComponent(I)}`,target:"_blank",rel:"noopener noreferrer",className:"inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"},s.createElement("svg",{className:"w-4 h-4 mr-1.5",fill:"currentColor",viewBox:"0 0 24 24"},s.createElement("path",{d:"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"})),"Share"),s.createElement("button",{onClick:()=>{navigator.clipboard.writeText(x)},className:"inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"},s.createElement("svg",{className:"w-4 h-4 mr-1.5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},s.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"})),"Copy Link")))),s.createElement("div",{className:"prose prose-md max-w-none  prose-headings:font-playfair prose-headings:font-medium  prose-a:text-blue-600 dar

1k:prose-a:text-blue-400  prose-a:no-underline hover:prose-a:text-blue-800 dark:hover:prose-a:text-blue-300 prose-img:rounded-lg prose-img:shadow-md dark:prose-invert dark:prose-headings:text-gray-100 dark:prose-p:text-gray-200 dark:prose-strong:text-gray-100 dark:prose-code:text-gray-200 dark:prose-pre:bg-gray-800 dark:prose-blockquote:text-gray-300 dark:prose-li:text-gray-200 dark:prose-td:text-gray-200 dark:prose-th:text-gray-200"},s.createElement(a.xA,{components:h},t)),s.createElement("div",{className:"mt-16 pt-8 border-t border-gray-200 dark:border-gray-700"},s.createElement(m.A,null)),S.length>0&&s.createElement("div",{className:"mt-16 pt-8 border-t border-gray-200 dark:border-gray-700"},s.createElement("h2",{className:"text-2xl font-playfair font-medium text-gray-900 dark:text-gray-100 mb-6"},"Related Posts"),s.createElement("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6"},S.map((e=>s.createElement(o.Link,{key:e.id,to:e.fields.slug,className:"block bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow"},s.createElement("h3",{className:"text-lg font-playfair font-medium text-gray-900 dark:text-gray-100 mb-2"},e.frontmatter.title),s.createElement("div",{className:"flex items-center text-sm text-gray-500 dark:text-gray-400 mb-2"},s.createElement("span",null,e.frontmatter.publishedAt)),s.createElement("p",{className:"text-gray-600 dark:text-gray-300 text-sm line-clamp-2"},e.frontmatter.summary),s.createElement("div",{className:"mt-3 flex flex-wrap gap-1"},e.frontmatter.tags.map((e=>s.createElement(p.A,{key:e,tag:e,className:"text-xs"})))))))))))};function E(e){return s.createElement(k,e,s.createElement(r,e))}}}]);
2//# sourceMappingURL=component---src-templates-post-tsx-content-file-path-src-posts-long-polling-mdx-b13a94e20e16118818f6.js.map