aboutsummaryrefslogtreecommitdiff
path: root/public/simple-server-sent-events-based-pubsub-server.html
diff options
context:
space:
mode:
Diffstat (limited to 'public/simple-server-sent-events-based-pubsub-server.html')
-rwxr-xr-xpublic/simple-server-sent-events-based-pubsub-server.html343
1 files changed, 0 insertions, 343 deletions
diff --git a/public/simple-server-sent-events-based-pubsub-server.html b/public/simple-server-sent-events-based-pubsub-server.html
deleted file mode 100755
index 9d316b5..0000000
--- a/public/simple-server-sent-events-based-pubsub-server.html
+++ /dev/null
@@ -1,343 +0,0 @@
1<!doctype html><html lang=en-us><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=generator content="JBMAFP - github.com/mitjafelicijan/jbmafp"><link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL69vf8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv76+/8LBwQkAAAAAAAAAAAAAAAC+vb3/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL+9vf/Bv78JAAAAAAAAAAAAAAAAu7q6/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC7ubr/vr29CAAAAAAAAAAAy8nJAZ6foP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnqGj/6GipAoAAAAAHLjU/xcXHf/BwsL/I8XY/yPK3v8XGiD/IbjL/yPF2f8XGiD/Fxkf/yLF2f8gnK3/Fxog/62ztv8fwNf/FRcd/x271v8mz93/GRsi/xkXHf8p097/GiIp/xobIv8p0t3/KdPe/xocIv8fYmr/KNPe/xoZH/8aHCL/J87c/xy81/8VFxz/IsPZ/8zS0/8XGiD/Ir/R/yPH2/8XGiD/Fxkf/yPH2/8dd4T/GBog/yPJ3f8jyNr/uru9/xcUGv8cudb/EhITDKi5vRKlvMP/RUpOERwcHRAdOj4QHTk8EBwdHRAdNTgQHTo/EBwcHRAcHB0QSGduEKW4vf+koqQfHzg+EBqz0ewSFRv7EyMr/xq51vsTERb7ExUb+xq41fsau9j7ExUb+xiPp/sZudb7ExUb+xMVG/sZuNX/GKvI/BIUGfMdvdn/IrfL/xcaIP8n1eb/J9Dh/xkcIf8ZGR7/J8/f/xxCSv8ZGyH/J9Dg/ybQ4P8ZHCL/FSQs/yPK3/8UExj/GE1b/ybS5P8ZGB7/Ghwj/ynW5P8p2Ob/Ghwi/yWrtv8p1eH/Ghwi/xocIv8p1uT/J8XT/xkcIv8m1un/Hb7d/xUYH/8hzOr/HtHu/xcaIf8XGB//I8vi/xgxOv8XGSD/I8rg/yPK4P8XGiD/GUFL/yPP6f8SERj/Fhkh/x3A4f8AAAAAJ2f9/ydr//8mZPH/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlYu38J2v//ydo/f8AAAAAAAAAAAd8/fkFqf//Iob8sAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMY39awWr//8FfP3/AAAAAAAAAAAFm/7/SfD//wR+/f8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOB/f9B7v//BaX+/wAAAAAAAAAAQ878SAyZ/v9n1v4KAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADu9v8DDJb+/z3N/XgAAAAA3/sAAN/7AADf+wAA3/sAAAAAAAAAAAAAAAAAAN/7AAAAAAAAAAAAAAAAAAAAAAAAj/EAAI/5AACP8QAA3/sAAA==" rel=icon type=image/x-icon><title>Simple Server-Sent Events based PubSub Server</title><meta name=description content="Before we continue ."><meta name=author content="Mitja Felicijan"><link rel=alternate type=application/rss+xml title="Mitja Felicijan's posts" href=https://mitjafelicijan.com/index.xml><link rel=alternate type=application/rss+xml title="Mitja Felicijan's notes" href=https://mitjafelicijan.com/notes.xml><style>:root{--border-color:gainsboro;--border-size:2px;--link-color:blue;--bg-color:#eee}*::selection{background:var(--link-color);color:#fff}*::-moz-selection{background:var(--link-color);color:#fff}*::-webkit-selection{background:var(--link-color);color:#fff}body{padding:2.5rem;max-width:1900px;background:#fff;font-family:sans-serif;line-height:1.35rem;font-size:16px}hr{border:0;border-bottom:var(--border-size)solid var(--border-color);margin-block-start:1.5rem}a{color:var(--link-color);text-decoration:none}h1,h2,h3{line-height:initial}h1{font-size:xx-large}footer{margin-block-start:2rem}cap{text-transform:capitalize}blockquote{font-style:italic}table{max-width:100%;border:var(--border-size)solid var(--border-color);border-collapse:separate;border-spacing:0}table thead tr th{border-bottom:var(--border-size)solid var(--border-color);text-align:left}table th,table td{padding:.5em .8em}ul.list li{padding:.2em 0}ul{line-height:1.35em}pre{text-wrap:nowrap;overflow-x:auto;padding:0 1em;border:var(--border-size)solid var(--border-color)}code{padding:0 3px;font-size:14px;border:0;background:var(--bg-color)}pre code{line-height:1.3em;background:#fff}pre,code,pre *,code *{font-family:monospace}figure{margin-inline-start:0;margin-inline-end:0}figcaption{width:800px;max-width:100%;text-align:center}figcaption p{margin:.3em 0 1.5em;font-style:italic}img,video,audio{width:800px;max-width:100%;border:var(--border-size)solid var(--border-color);padding:.5em}header nav{display:flex;gap:.9rem}article iframe{margin:0!important}audio::-webkit-media-controls-enclosure{border-radius:0}@media only screen and (max-width:600px){body{padding:.5em;word-wrap:break-word}header nav{gap:.7rem}header nav .hob{display:none}a{word-wrap:break-word}img,video,audio{padding:0}}</style><header><nav class=main itemscope itemtype=http://schema.org/SiteNavigationElement role=navigation aria-label="Main navigation"><a href=/>Home</a>
2<a href=/#posts>Posts</a>
3<a href=/#notes>Notes</a>
4<a href=/#sideprojects class=hob>Side Projects</a>
5<a href=/vault.html>Vault</a>
6<a href=https://github.com/mitjafelicijan target=_blank>Code</a>
7<a href=/mitjafelicijan.pgp.pub.txt target=_blank class=hob>PGP</a>
8<a href=/curriculum-vitae.html>CV</a>
9<a href=/index.xml target=_blank class=hob>RSS</a></nav></header><main role=main><article itemtype=http://schema.org/Article><h1 itemtype=headline>Simple Server-Sent Events based PubSub Server</h1><p><cap>post</cap>, Mar 22, 2020 on <a href=https://mitjafelicijan.com>Mitja Felicijan's blog</a><div><h2 id=before-we-continue->Before we continue ...</h2><p>Publisher Subscriber model is nothing new and there are many amazing solutions
10out there, so writing a new one would be a waste of time if other solutions
11wouldn't have quite complex install procedures and weren't so hard to maintain.
12But to be fair, comparing this simple server with something like
13<a href=https://kafka.apache.org/>Kafka</a> or <a href=https://www.rabbitmq.com/>RabbitMQ</a> is
14laughable at the least. Those solutions are enterprise grade and have many
15mechanisms there to ensure messages aren't lost and much more. Regardless of
16these drawbacks, this method has been tested on a large website and worked until
17now without any problems. So now, that we got that cleared up, let's continue.<p><em><strong>Wiki definition:</strong> Publish/subscribe messaging, or pub/sub messaging, is a
18form of asynchronous service-to-service communication used in serverless and
19microservices architectures. In a pub/sub model, any message published to a
20topic is immediately received by all the subscribers to the topic.</em><h2 id=general-goals>General goals</h2><ul><li>provide a simple server that relays messages to all the connected clients,<li>messages can be posted on specific topics,<li>messages get sent via <a href=https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events>Server-Sent
21Events</a>
22to all the subscribers.</ul><h2 id=how-exactly-does-the-pubsub-model-work>How exactly does the pub/sub model work?</h2><p>The easiest way to explain this is with diagram bellow. Basic function is
23simple. We have subscribers that receive messages, and we have publishers that
24create and post messages. Similar model is also well know pattern that works on
25a premise of consumers and producers, and they take similar roles.<figure><img src=/posts/simple-pubsub-server/pubsub-overview.png alt="How PubSub works"></figure><p><strong>These are some naive characteristics we want to achieve:</strong><ul><li>producer is publishing messages to subscribe topic,<li>consumer is receiving messages from subscribed topic,<li>servers is also known as Broker,<li>broker does not store messages or tracks success,<li>broker uses
26<a href=https://en.wikipedia.org/wiki/FIFO_(computing_and_electronics)>FIFO</a> method
27for delivering messages,<li>if consumer wants to receive messages from a topic, producer and consumer
28topics must match,<li>consumer can subscribe to multiple topics,<li>producer can publish to multiple topics,<li>each message has a messageId.</ul><p><strong>Known drawbacks:</strong><ul><li>messages will not be stored in a persistent queue or unreceived messages like
29<a href=https://en.wikipedia.org/wiki/Dead_letter_queue>DeadLetterQueue</a> so old
30messages could be lost on server restart,<li><a href=https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events>Server-Sent
31Events</a>
32opens a long-running connection between the client and the server so make sure
33if your setup is load balanced that the load balancer in this case can have
34long opened connection,<li>no system moderation due to the dynamic nature of creating queues.</ul><h2 id=server-sent-events>Server-Sent Events</h2><p>Read more about it on <a href=https://html.spec.whatwg.org/multipage/server-sent-events.html>official specification
35page</a>.<h3 id=current-browser-support>Current browser support</h3><figure><img src=/posts/simple-pubsub-server/caniuse.png alt="Browser support"></figure><p>Check
36<a href="https://caniuse.com/#feat=eventsource">https://caniuse.com/#feat=eventsource</a>
37for latest information about browser support.<h3 id=known-issues>Known issues</h3><ul><li>Firefox 52 and below do not support EventSource in web/shared workers<li>In Firefox prior to version 36 server-sent events do not reconnect
38automatically in case of a connection interrupt (bug)<li>Reportedly, CORS in EventSource is currently supported in Firefox 10+, Opera
3912+, Chrome 26+, Safari 7.0+.<li>Antivirus software may block the event streaming data chunks.</ul><p>Source: <a href="https://caniuse.com/#feat=eventsource">https://caniuse.com/#feat=eventsource</a><h3 id=message-format>Message format</h3><p>The simplest message that can be sent is only with data attribute:<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span>data: this is a simple message
40</span></span><span style=display:flex><span>&lt;blank line&gt;
41</span></span></code></pre><p>You can send message IDs to be used if the connection is dropped:<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span>id: 33
42</span></span><span style=display:flex><span>data: this is line one
43</span></span><span style=display:flex><span>data: this is line two
44</span></span><span style=display:flex><span>&lt;blank line&gt;
45</span></span></code></pre><p>And you can specify your own event types (the above messages will all trigger
46the message event):<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span>id: 36
47</span></span><span style=display:flex><span>event: price
48</span></span><span style=display:flex><span>data: 103.34
49</span></span><span style=display:flex><span>&lt;blank line&gt;
50</span></span></code></pre><h3 id=server-requirements>Server requirements</h3><p>The important thing is how you send headers and which headers are sent by the
51server that triggers browser to threat response as a EventStream.<p>Headers responsible for this are:<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span>Content-Type: text/event-stream
52</span></span><span style=display:flex><span>Cache-Control: no-cache
53</span></span><span style=display:flex><span>Connection: keep-alive
54</span></span></code></pre><h3 id=debugging-with-google-chrome>Debugging with Google Chrome</h3><p>Google Chrome provides build-in debugging and exploration tool for <a href=https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events>Server-Sent
55Events</a>
56which is quite nice and available from Developer Tools under Network tab.<blockquote><p>You can debug only client side events that get received and not the server
57ones. For debugging server events add <code>console.log</code> to <code>server.js</code> code and
58print out events.</blockquote><figure><img src=/posts/simple-pubsub-server/chrome-debugging.png alt="Google Chrome Developer Tools EventStream"></figure><h2 id=server-implementation>Server implementation</h2><p>For the sake of this example we will use <a href=https://nodejs.org/en/>Node.js</a> with
59<a href=https://expressjs.com>Express</a> as our router since this is the easiest way to
60get started and we will use already written SSE library for node
61<a href=https://www.npmjs.com/package/sse-pubsub>sse-pubsub</a> so we don't reinvent the
62wheel.<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span>npm init --yes
63</span></span><span style=display:flex><span>
64</span></span><span style=display:flex><span>npm install express
65</span></span><span style=display:flex><span>npm install body-parser
66</span></span><span style=display:flex><span>npm install sse-pubsub
67</span></span></code></pre><p>Basic implementation of a server (<code>server.js</code>):<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span><span style=color:#00f>const</span> express = require(<span style=color:#a31515>&#39;express&#39;</span>);
68</span></span><span style=display:flex><span><span style=color:#00f>const</span> bodyParser = require(<span style=color:#a31515>&#39;body-parser&#39;</span>);
69</span></span><span style=display:flex><span><span style=color:#00f>const</span> SSETopic = require(<span style=color:#a31515>&#39;sse-pubsub&#39;</span>);
70</span></span><span style=display:flex><span>
71</span></span><span style=display:flex><span><span style=color:#00f>const</span> app = express();
72</span></span><span style=display:flex><span><span style=color:#00f>const</span> port = process.env.PORT || 4000;
73</span></span><span style=display:flex><span>
74</span></span><span style=display:flex><span><span style=color:green>// topics container
75</span></span></span><span style=display:flex><span><span style=color:green></span><span style=color:#00f>const</span> sseTopics = {};
76</span></span><span style=display:flex><span>
77</span></span><span style=display:flex><span>app.use(bodyParser.json());
78</span></span><span style=display:flex><span>
79</span></span><span style=display:flex><span><span style=color:green>// open for all cors
80</span></span></span><span style=display:flex><span><span style=color:green></span>app.all(<span style=color:#a31515>&#39;*&#39;</span>, (req, res, next) =&gt; {
81</span></span><span style=display:flex><span> res.header(<span style=color:#a31515>&#39;Access-Control-Allow-Origin&#39;</span>, <span style=color:#a31515>&#39;*&#39;</span>);
82</span></span><span style=display:flex><span> res.header(<span style=color:#a31515>&#39;Access-Control-Allow-Headers&#39;</span>, <span style=color:#a31515>&#39;X-Requested-With, Content-Type&#39;</span>);
83</span></span><span style=display:flex><span> next();
84</span></span><span style=display:flex><span>});
85</span></span><span style=display:flex><span>
86</span></span><span style=display:flex><span><span style=color:green>// preflight request error fix
87</span></span></span><span style=display:flex><span><span style=color:green></span>app.options(<span style=color:#a31515>&#39;*&#39;</span>, <span style=color:#00f>async</span> (req, res) =&gt; {
88</span></span><span style=display:flex><span> res.header(<span style=color:#a31515>&#39;Access-Control-Allow-Origin&#39;</span>, <span style=color:#a31515>&#39;*&#39;</span>);
89</span></span><span style=display:flex><span> res.header(<span style=color:#a31515>&#39;Access-Control-Allow-Headers&#39;</span>, <span style=color:#a31515>&#39;X-Requested-With, Content-Type&#39;</span>);
90</span></span><span style=display:flex><span> res.send(<span style=color:#a31515>&#39;OK&#39;</span>);
91</span></span><span style=display:flex><span>});
92</span></span><span style=display:flex><span>
93</span></span><span style=display:flex><span><span style=color:green>// serve the event streams
94</span></span></span><span style=display:flex><span><span style=color:green></span>app.get(<span style=color:#a31515>&#39;/stream/:topic&#39;</span>, <span style=color:#00f>async</span> (req, res, next) =&gt; {
95</span></span><span style=display:flex><span> <span style=color:#00f>const</span> topic = req.params.topic;
96</span></span><span style=display:flex><span>
97</span></span><span style=display:flex><span> <span style=color:#00f>if</span> (!(topic <span style=color:#00f>in</span> sseTopics)) {
98</span></span><span style=display:flex><span> sseTopics[topic] = <span style=color:#00f>new</span> SSETopic({
99</span></span><span style=display:flex><span> pingInterval: 0,
100</span></span><span style=display:flex><span> maxStreamDuration: 15000,
101</span></span><span style=display:flex><span> });
102</span></span><span style=display:flex><span> }
103</span></span><span style=display:flex><span>
104</span></span><span style=display:flex><span> <span style=color:green>// subscribing client to topic
105</span></span></span><span style=display:flex><span><span style=color:green></span> sseTopics[topic].subscribe(req, res);
106</span></span><span style=display:flex><span>});
107</span></span><span style=display:flex><span>
108</span></span><span style=display:flex><span><span style=color:green>// accepts new messages into topic
109</span></span></span><span style=display:flex><span><span style=color:green></span>app.post(<span style=color:#a31515>&#39;/publish&#39;</span>, <span style=color:#00f>async</span> (req, res) =&gt; {
110</span></span><span style=display:flex><span> <span style=color:#00f>let</span> body = req.body;
111</span></span><span style=display:flex><span> <span style=color:#00f>let</span> status = 200;
112</span></span><span style=display:flex><span>
113</span></span><span style=display:flex><span> console.log(<span style=color:#a31515>&#39;Incoming message:&#39;</span>, req.body);
114</span></span><span style=display:flex><span>
115</span></span><span style=display:flex><span> <span style=color:#00f>if</span> (
116</span></span><span style=display:flex><span> body.hasOwnProperty(<span style=color:#a31515>&#39;topic&#39;</span>) &amp;&amp;
117</span></span><span style=display:flex><span> body.hasOwnProperty(<span style=color:#a31515>&#39;event&#39;</span>) &amp;&amp;
118</span></span><span style=display:flex><span> body.hasOwnProperty(<span style=color:#a31515>&#39;message&#39;</span>)
119</span></span><span style=display:flex><span> ) {
120</span></span><span style=display:flex><span> <span style=color:#00f>const</span> topic = req.body.topic;
121</span></span><span style=display:flex><span> <span style=color:#00f>const</span> event = req.body.event;
122</span></span><span style=display:flex><span> <span style=color:#00f>const</span> message = req.body.message;
123</span></span><span style=display:flex><span>
124</span></span><span style=display:flex><span> <span style=color:#00f>if</span> (topic <span style=color:#00f>in</span> sseTopics) {
125</span></span><span style=display:flex><span> <span style=color:green>// sends message to all the subscribers
126</span></span></span><span style=display:flex><span><span style=color:green></span> sseTopics[topic].publish(message, event);
127</span></span><span style=display:flex><span> }
128</span></span><span style=display:flex><span> } <span style=color:#00f>else</span> {
129</span></span><span style=display:flex><span> status = 400;
130</span></span><span style=display:flex><span> }
131</span></span><span style=display:flex><span>
132</span></span><span style=display:flex><span> res.status(status).send({
133</span></span><span style=display:flex><span> status,
134</span></span><span style=display:flex><span> });
135</span></span><span style=display:flex><span>});
136</span></span><span style=display:flex><span>
137</span></span><span style=display:flex><span><span style=color:green>// returns JSON object of all opened topics
138</span></span></span><span style=display:flex><span><span style=color:green></span>app.get(<span style=color:#a31515>&#39;/status&#39;</span>, <span style=color:#00f>async</span> (req, res) =&gt; {
139</span></span><span style=display:flex><span> res.send(sseTopics);
140</span></span><span style=display:flex><span>});
141</span></span><span style=display:flex><span>
142</span></span><span style=display:flex><span><span style=color:green>// health-check endpoint
143</span></span></span><span style=display:flex><span><span style=color:green></span>app.get(<span style=color:#a31515>&#39;/&#39;</span>, <span style=color:#00f>async</span> (req, res) =&gt; {
144</span></span><span style=display:flex><span> res.send(<span style=color:#a31515>&#39;OK&#39;</span>);
145</span></span><span style=display:flex><span>});
146</span></span><span style=display:flex><span>
147</span></span><span style=display:flex><span><span style=color:green>// return a 404 if no routes match
148</span></span></span><span style=display:flex><span><span style=color:green></span>app.use((req, res, next) =&gt; {
149</span></span><span style=display:flex><span> res.set(<span style=color:#a31515>&#39;Cache-Control&#39;</span>, <span style=color:#a31515>&#39;private, no-store&#39;</span>);
150</span></span><span style=display:flex><span> res.status(404).end(<span style=color:#a31515>&#39;Not found&#39;</span>);
151</span></span><span style=display:flex><span>});
152</span></span><span style=display:flex><span>
153</span></span><span style=display:flex><span><span style=color:green>// starts the server
154</span></span></span><span style=display:flex><span><span style=color:green></span>app.listen(port, () =&gt; {
155</span></span><span style=display:flex><span> console.log(<span style=color:#a31515>`PubSub server running on http://localhost:</span><span style=color:#a31515>${</span>port<span style=color:#a31515>}</span><span style=color:#a31515>`</span>);
156</span></span><span style=display:flex><span>});
157</span></span></code></pre><h3 id=our-custom-message-format>Our custom message format</h3><p>Each message posted on a server must be in a specific format that out server
158accepts. Having structure like this allows us to have multiple separated type of
159events on each topic.<p>With this we can separate streams and only receive events that belong to the
160topic.<p>One example would be, that we have index page and we want to receive messages
161about new upvotes or new subscribers but we don't want to follow events for
162other pages. This reduces clutter and overall network. And structure is much
163nicer and maintanable.<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span>{
164</span></span><span style=display:flex><span> &#34;topic&#34;: <span style=color:#a31515>&#34;sample-topic&#34;</span>,
165</span></span><span style=display:flex><span> &#34;event&#34;: <span style=color:#a31515>&#34;sample-event&#34;</span>,
166</span></span><span style=display:flex><span> &#34;message&#34;: { &#34;name&#34;: <span style=color:#a31515>&#34;John&#34;</span> }
167</span></span><span style=display:flex><span>}
168</span></span></code></pre><h2 id=publisher-and-subscriber-clients>Publisher and subscriber clients</h2><h3 id=publisher-and-subscriber-in-action>Publisher and subscriber in action</h3><p><video src=/posts/simple-pubsub-server/clients.m4v controls></video><p>You can download <a href=../simple-pubsub-server/sse-pubsub-server.zip>the code</a> and
169follow along.<h3 id=publisher>Publisher</h3><p>As talked about above publisher is the one that send messages to the
170broker/server. Message inside the payload can be whatever you want (string,
171object, array). I would however personally avoid send large chunks of data like
172blobs and such.<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span><span style=color:#00f>&lt;!DOCTYPE html&gt;</span>
173</span></span><span style=display:flex><span>&lt;html lang=<span style=color:#a31515>&#34;en&#34;</span>&gt;
174</span></span><span style=display:flex><span>
175</span></span><span style=display:flex><span> &lt;head&gt;
176</span></span><span style=display:flex><span> &lt;meta charset=<span style=color:#a31515>&#34;UTF-8&#34;</span>&gt;
177</span></span><span style=display:flex><span> &lt;meta name=<span style=color:#a31515>&#34;viewport&#34;</span> content=<span style=color:#a31515>&#34;width=device-width, initial-scale=1.0&#34;</span>&gt;
178</span></span><span style=display:flex><span> &lt;title&gt;Publisher&lt;/title&gt;
179</span></span><span style=display:flex><span> &lt;/head&gt;
180</span></span><span style=display:flex><span>
181</span></span><span style=display:flex><span> &lt;body&gt;
182</span></span><span style=display:flex><span>
183</span></span><span style=display:flex><span> &lt;h1&gt;Publisher&lt;/h1&gt;
184</span></span><span style=display:flex><span>
185</span></span><span style=display:flex><span> &lt;fieldset&gt;
186</span></span><span style=display:flex><span> &lt;p&gt;
187</span></span><span style=display:flex><span> &lt;label&gt;Server:&lt;/label&gt;
188</span></span><span style=display:flex><span> &lt;input type=<span style=color:#a31515>&#34;text&#34;</span> id=<span style=color:#a31515>&#34;server&#34;</span> value=<span style=color:#a31515>&#34;http://localhost:4000&#34;</span>&gt;
189</span></span><span style=display:flex><span> &lt;/p&gt;
190</span></span><span style=display:flex><span> &lt;p&gt;
191</span></span><span style=display:flex><span> &lt;label&gt;Topic:&lt;/label&gt;
192</span></span><span style=display:flex><span> &lt;input type=<span style=color:#a31515>&#34;text&#34;</span> id=<span style=color:#a31515>&#34;topic&#34;</span> value=<span style=color:#a31515>&#34;sample-topic&#34;</span>&gt;
193</span></span><span style=display:flex><span> &lt;/p&gt;
194</span></span><span style=display:flex><span> &lt;p&gt;
195</span></span><span style=display:flex><span> &lt;label&gt;Event:&lt;/label&gt;
196</span></span><span style=display:flex><span> &lt;input type=<span style=color:#a31515>&#34;text&#34;</span> id=<span style=color:#a31515>&#34;event&#34;</span> value=<span style=color:#a31515>&#34;sample-event&#34;</span>&gt;
197</span></span><span style=display:flex><span> &lt;/p&gt;
198</span></span><span style=display:flex><span> &lt;p&gt;
199</span></span><span style=display:flex><span> &lt;label&gt;Message:&lt;/label&gt;
200</span></span><span style=display:flex><span> &lt;input type=<span style=color:#a31515>&#34;text&#34;</span> id=<span style=color:#a31515>&#34;message&#34;</span> value=<span style=color:#a31515>&#39;{&#34;name&#34;: &#34;John&#34;}&#39;</span>&gt;
201</span></span><span style=display:flex><span> &lt;/p&gt;
202</span></span><span style=display:flex><span> &lt;p&gt;
203</span></span><span style=display:flex><span> &lt;button type=<span style=color:#a31515>&#34;button&#34;</span> id=<span style=color:#a31515>&#34;button&#34;</span>&gt;Publish message to topic&lt;/button&gt;
204</span></span><span style=display:flex><span> &lt;/p&gt;
205</span></span><span style=display:flex><span> &lt;/fieldset&gt;
206</span></span><span style=display:flex><span>
207</span></span><span style=display:flex><span> &lt;script&gt;
208</span></span><span style=display:flex><span>
209</span></span><span style=display:flex><span> <span style=color:#00f>const</span> button = document.querySelector(<span style=color:#a31515>&#39;#button&#39;</span>);
210</span></span><span style=display:flex><span> <span style=color:#00f>const</span> server = document.querySelector(<span style=color:#a31515>&#39;#server&#39;</span>);
211</span></span><span style=display:flex><span> <span style=color:#00f>const</span> topic = document.querySelector(<span style=color:#a31515>&#39;#topic&#39;</span>);
212</span></span><span style=display:flex><span> <span style=color:#00f>const</span> event = document.querySelector(<span style=color:#a31515>&#39;#event&#39;</span>);
213</span></span><span style=display:flex><span> <span style=color:#00f>const</span> message = document.querySelector(<span style=color:#a31515>&#39;#message&#39;</span>);
214</span></span><span style=display:flex><span>
215</span></span><span style=display:flex><span> button.addEventListener(<span style=color:#a31515>&#39;click&#39;</span>, <span style=color:#00f>async</span> (evt) =&gt; {
216</span></span><span style=display:flex><span> <span style=color:#00f>const</span> req = <span style=color:#00f>await</span> fetch(<span style=color:#a31515>`</span><span style=color:#a31515>${</span>server.value<span style=color:#a31515>}</span><span style=color:#a31515>/publish`</span>, {
217</span></span><span style=display:flex><span> method: <span style=color:#a31515>&#39;post&#39;</span>,
218</span></span><span style=display:flex><span> headers: {
219</span></span><span style=display:flex><span> <span style=color:#a31515>&#39;Accept&#39;</span>: <span style=color:#a31515>&#39;application/json&#39;</span>,
220</span></span><span style=display:flex><span> <span style=color:#a31515>&#39;Content-Type&#39;</span>: <span style=color:#a31515>&#39;application/json&#39;</span>,
221</span></span><span style=display:flex><span> },
222</span></span><span style=display:flex><span> body: JSON.stringify({
223</span></span><span style=display:flex><span> topic: topic.value,
224</span></span><span style=display:flex><span> event: event.value,
225</span></span><span style=display:flex><span> message: JSON.parse(message.value),
226</span></span><span style=display:flex><span> }),
227</span></span><span style=display:flex><span> });
228</span></span><span style=display:flex><span>
229</span></span><span style=display:flex><span> <span style=color:#00f>const</span> res = <span style=color:#00f>await</span> req.json();
230</span></span><span style=display:flex><span> console.log(res);
231</span></span><span style=display:flex><span> });
232</span></span><span style=display:flex><span>
233</span></span><span style=display:flex><span> &lt;/script&gt;
234</span></span><span style=display:flex><span>
235</span></span><span style=display:flex><span> &lt;/body&gt;
236</span></span><span style=display:flex><span>
237</span></span><span style=display:flex><span>&lt;/html&gt;
238</span></span></code></pre><h3 id=subscriber>Subscriber</h3><p>Subscriber is responsible for receiving new messages that come from server via
239publisher. The code bellow is very rudimentary but works and follows the
240implementation guidelines for EventSource.<p>You can use either Developer Tools Console to see incoming messages or you can
241defer to Debugging with Google Chrome section above to see all EventStream
242messages.<blockquote><p>Don't be alarmed if the subscriber gets disconnected from the server every so
243often. The code we have here resets connection every 15s but it automatically
244get reconnected and fetches all messages up to last received message id. This
245setting can be adjusted in <code>server.js</code> file; search for the
246<code>maxStreamDuration</code> variable.</blockquote><pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span><span style=color:#00f>&lt;!DOCTYPE html&gt;</span>
247</span></span><span style=display:flex><span>&lt;html lang=<span style=color:#a31515>&#34;en&#34;</span>&gt;
248</span></span><span style=display:flex><span>
249</span></span><span style=display:flex><span> &lt;head&gt;
250</span></span><span style=display:flex><span> &lt;meta charset=<span style=color:#a31515>&#34;UTF-8&#34;</span>&gt;
251</span></span><span style=display:flex><span> &lt;meta name=<span style=color:#a31515>&#34;viewport&#34;</span> content=<span style=color:#a31515>&#34;width=device-width, initial-scale=1.0&#34;</span>&gt;
252</span></span><span style=display:flex><span> &lt;title&gt;Subscriber&lt;/title&gt;
253</span></span><span style=display:flex><span> &lt;link rel=<span style=color:#a31515>&#34;stylesheet&#34;</span> href=<span style=color:#a31515>&#34;style.css&#34;</span>&gt;
254</span></span><span style=display:flex><span> &lt;/head&gt;
255</span></span><span style=display:flex><span>
256</span></span><span style=display:flex><span> &lt;body&gt;
257</span></span><span style=display:flex><span>
258</span></span><span style=display:flex><span> &lt;h1&gt;Subscriber&lt;/h1&gt;
259</span></span><span style=display:flex><span>
260</span></span><span style=display:flex><span> &lt;fieldset&gt;
261</span></span><span style=display:flex><span> &lt;p&gt;
262</span></span><span style=display:flex><span> &lt;label&gt;Server:&lt;/label&gt;
263</span></span><span style=display:flex><span> &lt;input type=<span style=color:#a31515>&#34;text&#34;</span> id=<span style=color:#a31515>&#34;server&#34;</span> value=<span style=color:#a31515>&#34;http://localhost:4000&#34;</span>&gt;
264</span></span><span style=display:flex><span> &lt;/p&gt;
265</span></span><span style=display:flex><span> &lt;p&gt;
266</span></span><span style=display:flex><span> &lt;label&gt;Topic:&lt;/label&gt;
267</span></span><span style=display:flex><span> &lt;input type=<span style=color:#a31515>&#34;text&#34;</span> id=<span style=color:#a31515>&#34;topic&#34;</span> value=<span style=color:#a31515>&#34;sample-topic&#34;</span>&gt;
268</span></span><span style=display:flex><span> &lt;/p&gt;
269</span></span><span style=display:flex><span> &lt;p&gt;
270</span></span><span style=display:flex><span> &lt;label&gt;Event:&lt;/label&gt;
271</span></span><span style=display:flex><span> &lt;input type=<span style=color:#a31515>&#34;text&#34;</span> id=<span style=color:#a31515>&#34;event&#34;</span> value=<span style=color:#a31515>&#34;sample-event&#34;</span>&gt;
272</span></span><span style=display:flex><span> &lt;/p&gt;
273</span></span><span style=display:flex><span> &lt;p&gt;
274</span></span><span style=display:flex><span> &lt;button type=<span style=color:#a31515>&#34;button&#34;</span> id=<span style=color:#a31515>&#34;button&#34;</span>&gt;Subscribe to topic&lt;/button&gt;
275</span></span><span style=display:flex><span> &lt;/p&gt;
276</span></span><span style=display:flex><span> &lt;/fieldset&gt;
277</span></span><span style=display:flex><span>
278</span></span><span style=display:flex><span> &lt;script&gt;
279</span></span><span style=display:flex><span>
280</span></span><span style=display:flex><span> <span style=color:#00f>const</span> button = document.querySelector(<span style=color:#a31515>&#39;#button&#39;</span>);
281</span></span><span style=display:flex><span> <span style=color:#00f>const</span> server = document.querySelector(<span style=color:#a31515>&#39;#server&#39;</span>);
282</span></span><span style=display:flex><span> <span style=color:#00f>const</span> topic = document.querySelector(<span style=color:#a31515>&#39;#topic&#39;</span>);
283</span></span><span style=display:flex><span> <span style=color:#00f>const</span> event = document.querySelector(<span style=color:#a31515>&#39;#event&#39;</span>);
284</span></span><span style=display:flex><span>
285</span></span><span style=display:flex><span> button.addEventListener(<span style=color:#a31515>&#39;click&#39;</span>, <span style=color:#00f>async</span> (evt) =&gt; {
286</span></span><span style=display:flex><span>
287</span></span><span style=display:flex><span> <span style=color:#00f>let</span> es = <span style=color:#00f>new</span> EventSource(<span style=color:#a31515>`</span><span style=color:#a31515>${</span>server.value<span style=color:#a31515>}</span><span style=color:#a31515>/stream/</span><span style=color:#a31515>${</span>topic.value<span style=color:#a31515>}</span><span style=color:#a31515>`</span>);
288</span></span><span style=display:flex><span>
289</span></span><span style=display:flex><span> es.addEventListener(event.value, <span style=color:#00f>function</span> (evt) {
290</span></span><span style=display:flex><span> console.log(<span style=color:#a31515>`incoming message`</span>, JSON.parse(evt.data));
291</span></span><span style=display:flex><span> });
292</span></span><span style=display:flex><span>
293</span></span><span style=display:flex><span> es.addEventListener(<span style=color:#a31515>&#39;open&#39;</span>, <span style=color:#00f>function</span> (evt) {
294</span></span><span style=display:flex><span> console.log(<span style=color:#a31515>&#39;connected&#39;</span>, evt);
295</span></span><span style=display:flex><span> });
296</span></span><span style=display:flex><span>
297</span></span><span style=display:flex><span> es.addEventListener(<span style=color:#a31515>&#39;error&#39;</span>, <span style=color:#00f>function</span> (evt) {
298</span></span><span style=display:flex><span> console.log(<span style=color:#a31515>&#39;error&#39;</span>, evt);
299</span></span><span style=display:flex><span> });
300</span></span><span style=display:flex><span>
301</span></span><span style=display:flex><span> });
302</span></span><span style=display:flex><span>
303</span></span><span style=display:flex><span> &lt;/script&gt;
304</span></span><span style=display:flex><span>
305</span></span><span style=display:flex><span> &lt;/body&gt;
306</span></span><span style=display:flex><span>
307</span></span><span style=display:flex><span>&lt;/html&gt;
308</span></span></code></pre><h2 id=reading-further>Reading further</h2><ul><li><a href=https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events>Using server-sent events</a><li><a href=https://www.smashingmagazine.com/2018/02/sse-websockets-data-flow-http2/>Using SSE Instead Of WebSockets For Unidirectional Data Flow Over HTTP/2</a><li><a href=https://apifriends.com/api-streaming/server-sent-events/>What is Server-Sent Events?</a><li><a href=https://tools.ietf.org/id/draft-xie-bidirectional-messaging-01.html>An HTTP/2 extension for bidirectional messaging communication</a><li><a href=https://developers.google.com/web/fundamentals/performance/http2>Introduction to HTTP/2</a><li><a href=https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API>The WebSocket API (WebSockets)</a></ul></div></article></main><section><hr><h2>Posts from blogs I follow around the net</h2><ul><li><a href=https://utcc.utoronto.ca/~cks/space/blog/linux/NFSv4ServerLockClients target=_blank rel=noopener>Finding which NFSv4 client owns a lock on a Linux NFS(v4) server</a> — <a href=https://utcc.utoronto.ca/~cks/space/blog/>Chris's Wiki :: blog</a><div>A while back I wrote an entry about finding which NFS client owns
309a lock on a Linux NFS server, which turned
310out to be specific to NFS v3 (which I really should have seen coming,
311since it involved NLM and lockd). Finding the NFS v4 client that
312owns a lock is, depending on your perspective, either simpl…<li><a href=http://www.landley.net/notes-2023.html#28-10-2023 target=_blank rel=noopener>October 28, 2023</a> — <a href=http://www.landley.net/notes-2023.html>Rob Landley's Blog Thing for 2023</a><div>Oh good grief, two of my least favorite licensing people, Larry Rosen
313and Bradley Kuhn, are interacting on the OSI's license-discuss
314list where the're doing
315bad computer history and insisting that a guy Larry Rosen
316coincidentally interviewed for a book years ago is clearly the origin of
317somethin…<li><a href="http://offbeatpursuit.com:80/blog/?id=25" target=_blank rel=noopener>A fix by any other name</a> — <a href=http://offbeatpursuit.com:80/blog/>WLOG - blog</a><div>tags:
318i2c, plan9
319Another month, another file system.
320Well, if you can’t fix it in software, fix it in hardware (looking at
321you, bme680, we’re not
322done yet). The show must go on, as they say, and I would like my
323experiments to go on.
324So a “new” addition to the environmental sensor family connected to
325the h…<li><a href=https://mirzapandzo.com/next-image-url-parameter-is-valid-but-upstream-response-is-invalid target=_blank rel=noopener>Next/Image "url" parameter is valid but upstream response is invalid</a> — <a href=https://mirzapandzo.com/>Mirza Pandzo's Blog</a><div>Getting "url" parameter is valid but upstream response is invalid error with Next/Image on WSL2<li><a href=https://drewdevault.com/2023/10/13/Going-off-script.html target=_blank rel=noopener>Going off-script</a> — <a href=https://drewdevault.com>Drew DeVault's blog</a><div>There is a phenomenon in society which I find quite bizarre. Upon our entry to
326this mortal coil, we are endowed with self-awareness, agency, and free will.
327Each of the 8 billion members of this human race represents a unique person, a
328unique worldview, and a unique agency. Yet, many of us have the sam…<li><a href=https://szymonkaliski.com/writing/2023-10-02-building-a-diy-pen-plotter/ target=_blank rel=noopener>Building a DIY Pen Plotter</a> — <a href=http://github.com/dylang/node-rss>Szymon Kaliski</a><div>This article documents my learnings from designing and building a DIY Pen Plotter during the summer of 2023.
329My ultimate goal is to build my…<li><a href=https://neil.computer/notes/chart-of-accounts-for-startups-and-saas-companies/ target=_blank rel=noopener>Chart of Accounts for Startups and SaaS Companies</a> — <a href=https://neil.computer/>Neil Panchal</a><div>Accounting is fundamental to starting a business. You need to have a basic understanding of accounting principles and essential bookkeeping. I had to learn it. There was no choice. For filing taxes, your CPA is going to ask you for an Income Statement (also known as P/L statement). If<li><a href=https://journal.valeriansaliou.name/deploy-a-nomad-cluster-on-alpine-linux-with-vultr/ target=_blank rel=noopener>Deploy a Nomad Cluster on Alpine Linux with Vultr</a> — <a href=https://journal.valeriansaliou.name/>Valerian Saliou</a><div>After spending countless hours trying to understand how to deploy my apps on Kubernetes for the first time to host Mirage, an AI API service that I run, I ended up making myself a promise that the next app I work on would be using a more productive & simpler<li><a href=https://jcs.org/2023/10/25/wifi_da target=_blank rel=noopener>BlueSCSI Wi-Fi Desk Accessory 1.0 Released</a> — <a href=https://jcs.org/>joshua stein</a><div>BlueSCSI Wi-Fi Desk Accessory
3301.0 has been released:
331wifi_da-1.0.sit
332(StuffIt 3 archive)
333SHA256: ccfc9d27dd5da7412d10cef73b81119a1fec3848e4d1d88ff652a07ffdc6a69aSHA1: ff124972f202ceda6d7fa4788110a67ccda6a13a
334This is the initial public release of my BlueSCSI Wi-Fi Desk Accessory for
335classic MacOS.<li><a href=https://michael.stapelberg.ch/posts/2023-10-25-my-all-flash-zfs-network-storage-build/ target=_blank rel=noopener>My 2023 all-flash ZFS NAS (Network Storage) build</a> — <a href=https://michael.stapelberg.ch/>Michael Stapelbergs Website</a><div>For over 10 years now, I run two self-built NAS (Network Storage) devices which serve media (currently via Jellyfin) and run daily backups of all my PCs and servers.
336In this article, I describe my goals, which hardware I picked for my new build (and why) and how I set it up.
337Design Goals
338I use my netw…</ul><p>Generated with <a href=https://git.sr.ht/~sircmpwn/openring target=_blank rel=noopener>openring</a>.</section><footer><hr><p><big><strong>Want to comment or have something to add?</strong></big><p>You can write me an email
339at <a href=mailto:mitja.felicijan@gmail.com>mitja.felicijan@gmail.com</a> or
340catch up with me <a href=https://telegram.me/mitjafelicijan target=_blank>on Telegram</a>.<hr><p>This website does not track you. Content is made available under the <a href=https://creativecommons.org/licenses/by/4.0/ target=_blank rel=noreferrer>CC BY 4.0 license</a> unless
341specified otherwise. Blog is also available as <a href=/index.xml target=_blank>RSS feed</a>.</footer><script>
342 window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
343 </script><script defer src=/_vercel/insights/script.js></script> \ No newline at end of file
generated by cgit v1.2.3 (git 2.46.0) at 2026-05-01 05:21:14 +0000