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.html324
1 files changed, 324 insertions, 0 deletions
diff --git a/public/simple-server-sent-events-based-pubsub-server.html b/public/simple-server-sent-events-based-pubsub-server.html
new file mode 100755
index 0000000..19f3dda
--- /dev/null
+++ b/public/simple-server-sent-events-based-pubsub-server.html
@@ -0,0 +1,324 @@
1<!doctype html><html lang=en-us><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><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 ."><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>body{padding:1rem;max-width:760px;background:#fff;font-family:sans-serif;line-height:1.35rem;font-size:16px;margin:0 auto}hr{margin-block-start:1.5rem}h1,h2,h3{line-height:initial}h1{font-size:xx-large}footer{margin-block-start:2rem}cap{text-transform:capitalize}table{max-width:100%;width:100%;border-collapse:separate;border-spacing:2px;border:1px solid #000;border-left:1px solid #999;border-top:1px solid #999}blockquote{font-style:italic}table thead{background:#eee}ul.list li{padding:.2em 0}ul{line-height:1.4em}td,th{border:1px solid #000;padding:4px;border-right:1px solid #999;border-bottom:1px solid #999;text-align:left}pre{text-wrap:nowrap;overflow-x:auto;padding:0 1em;border:1px solid #dcdcdc}code{padding:0 3px;font-size:14px;border:0}pre code{line-height:1.3em}pre,code,pre *,code *{font-family:monospace}figure{margin-inline-start:0;margin-inline-end:0}figcaption{text-align:center}figcaption p{margin:.3em 0 0}img,video,audio{max-width:100%}header{display:flex;flex-direction:row;gap:3rem}nav{display:flex;gap:.75rem}nav.main{flex-grow:1}.pstatus-orange{background:gold}.pstatus-green{background:#9acd32}.pstatus-red{background:#cd5c5c}@media only screen and (max-width:600px){body{padding:15px}header{flex-direction:column;gap:1rem}a{word-wrap:break-word}}</style><header><nav class=main itemscope itemtype=http://schema.org/SiteNavigationElement role=toolbar><a href=/>Home</a>
2<a href=https://git.mitjafelicijan.com/ target=_blank>Git</a>
3<a href=https://files.mitjafelicijan.com/ target=_blank>Files</a>
4<a href=/radio.pls target=_blank>Radio</a>
5<a href=/mitjafelicijan.pgp.pub.txt target=_blank>PGP</a>
6<a href=/curriculum-vitae.html>CV</a>
7<a href=/index.xml target=_blank>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
8out there, so writing a new one would be a waste of time if other solutions
9wouldn't have quite complex install procedures and weren't so hard to maintain.
10But to be fair, comparing this simple server with something like
11<a href=https://kafka.apache.org/>Kafka</a> or <a href=https://www.rabbitmq.com/>RabbitMQ</a> is
12laughable at the least. Those solutions are enterprise grade and have many
13mechanisms there to ensure messages aren't lost and much more. Regardless of
14these drawbacks, this method has been tested on a large website and worked until
15now 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
16form of asynchronous service-to-service communication used in serverless and
17microservices architectures. In a pub/sub model, any message published to a
18topic 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
19Events</a>
20to 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
21simple. We have subscribers that receive messages, and we have publishers that
22create and post messages. Similar model is also well know pattern that works on
23a 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
24<a href=https://en.wikipedia.org/wiki/FIFO_(computing_and_electronics)>FIFO</a> method
25for delivering messages,<li>if consumer wants to receive messages from a topic, producer and consumer
26topics 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
27<a href=https://en.wikipedia.org/wiki/Dead_letter_queue>DeadLetterQueue</a> so old
28messages 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
29Events</a>
30opens a long-running connection between the client and the server so make sure
31if your setup is load balanced that the load balancer in this case can have
32long 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
33page</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
34<a href="https://caniuse.com/#feat=eventsource">https://caniuse.com/#feat=eventsource</a>
35for 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
36automatically in case of a connection interrupt (bug)<li>Reportedly, CORS in EventSource is currently supported in Firefox 10+, Opera
3712+, 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
38</span></span><span style=display:flex><span>&lt;blank line&gt;
39</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
40</span></span><span style=display:flex><span>data: this is line one
41</span></span><span style=display:flex><span>data: this is line two
42</span></span><span style=display:flex><span>&lt;blank line&gt;
43</span></span></code></pre><p>And you can specify your own event types (the above messages will all trigger
44the message event):<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span>id: 36
45</span></span><span style=display:flex><span>event: price
46</span></span><span style=display:flex><span>data: 103.34
47</span></span><span style=display:flex><span>&lt;blank line&gt;
48</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
49server 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
50</span></span><span style=display:flex><span>Cache-Control: no-cache
51</span></span><span style=display:flex><span>Connection: keep-alive
52</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
53Events</a>
54which 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
55ones. For debugging server events add <code>console.log</code> to <code>server.js</code> code and
56print 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
57<a href=https://expressjs.com>Express</a> as our router since this is the easiest way to
58get started and we will use already written SSE library for node
59<a href=https://www.npmjs.com/package/sse-pubsub>sse-pubsub</a> so we don't reinvent the
60wheel.<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span>npm init --yes
61</span></span><span style=display:flex><span>
62</span></span><span style=display:flex><span>npm install express
63</span></span><span style=display:flex><span>npm install body-parser
64</span></span><span style=display:flex><span>npm install sse-pubsub
65</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>);
66</span></span><span style=display:flex><span><span style=color:#00f>const</span> bodyParser = require(<span style=color:#a31515>&#39;body-parser&#39;</span>);
67</span></span><span style=display:flex><span><span style=color:#00f>const</span> SSETopic = require(<span style=color:#a31515>&#39;sse-pubsub&#39;</span>);
68</span></span><span style=display:flex><span>
69</span></span><span style=display:flex><span><span style=color:#00f>const</span> app = express();
70</span></span><span style=display:flex><span><span style=color:#00f>const</span> port = process.env.PORT || 4000;
71</span></span><span style=display:flex><span>
72</span></span><span style=display:flex><span><span style=color:green>// topics container
73</span></span></span><span style=display:flex><span><span style=color:green></span><span style=color:#00f>const</span> sseTopics = {};
74</span></span><span style=display:flex><span>
75</span></span><span style=display:flex><span>app.use(bodyParser.json());
76</span></span><span style=display:flex><span>
77</span></span><span style=display:flex><span><span style=color:green>// open for all cors
78</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; {
79</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>);
80</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>);
81</span></span><span style=display:flex><span> next();
82</span></span><span style=display:flex><span>});
83</span></span><span style=display:flex><span>
84</span></span><span style=display:flex><span><span style=color:green>// preflight request error fix
85</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; {
86</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>);
87</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>);
88</span></span><span style=display:flex><span> res.send(<span style=color:#a31515>&#39;OK&#39;</span>);
89</span></span><span style=display:flex><span>});
90</span></span><span style=display:flex><span>
91</span></span><span style=display:flex><span><span style=color:green>// serve the event streams
92</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; {
93</span></span><span style=display:flex><span> <span style=color:#00f>const</span> topic = req.params.topic;
94</span></span><span style=display:flex><span>
95</span></span><span style=display:flex><span> <span style=color:#00f>if</span> (!(topic <span style=color:#00f>in</span> sseTopics)) {
96</span></span><span style=display:flex><span> sseTopics[topic] = <span style=color:#00f>new</span> SSETopic({
97</span></span><span style=display:flex><span> pingInterval: 0,
98</span></span><span style=display:flex><span> maxStreamDuration: 15000,
99</span></span><span style=display:flex><span> });
100</span></span><span style=display:flex><span> }
101</span></span><span style=display:flex><span>
102</span></span><span style=display:flex><span> <span style=color:green>// subscribing client to topic
103</span></span></span><span style=display:flex><span><span style=color:green></span> sseTopics[topic].subscribe(req, res);
104</span></span><span style=display:flex><span>});
105</span></span><span style=display:flex><span>
106</span></span><span style=display:flex><span><span style=color:green>// accepts new messages into topic
107</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; {
108</span></span><span style=display:flex><span> <span style=color:#00f>let</span> body = req.body;
109</span></span><span style=display:flex><span> <span style=color:#00f>let</span> status = 200;
110</span></span><span style=display:flex><span>
111</span></span><span style=display:flex><span> console.log(<span style=color:#a31515>&#39;Incoming message:&#39;</span>, req.body);
112</span></span><span style=display:flex><span>
113</span></span><span style=display:flex><span> <span style=color:#00f>if</span> (
114</span></span><span style=display:flex><span> body.hasOwnProperty(<span style=color:#a31515>&#39;topic&#39;</span>) &amp;&amp;
115</span></span><span style=display:flex><span> body.hasOwnProperty(<span style=color:#a31515>&#39;event&#39;</span>) &amp;&amp;
116</span></span><span style=display:flex><span> body.hasOwnProperty(<span style=color:#a31515>&#39;message&#39;</span>)
117</span></span><span style=display:flex><span> ) {
118</span></span><span style=display:flex><span> <span style=color:#00f>const</span> topic = req.body.topic;
119</span></span><span style=display:flex><span> <span style=color:#00f>const</span> event = req.body.event;
120</span></span><span style=display:flex><span> <span style=color:#00f>const</span> message = req.body.message;
121</span></span><span style=display:flex><span>
122</span></span><span style=display:flex><span> <span style=color:#00f>if</span> (topic <span style=color:#00f>in</span> sseTopics) {
123</span></span><span style=display:flex><span> <span style=color:green>// sends message to all the subscribers
124</span></span></span><span style=display:flex><span><span style=color:green></span> sseTopics[topic].publish(message, event);
125</span></span><span style=display:flex><span> }
126</span></span><span style=display:flex><span> } <span style=color:#00f>else</span> {
127</span></span><span style=display:flex><span> status = 400;
128</span></span><span style=display:flex><span> }
129</span></span><span style=display:flex><span>
130</span></span><span style=display:flex><span> res.status(status).send({
131</span></span><span style=display:flex><span> status,
132</span></span><span style=display:flex><span> });
133</span></span><span style=display:flex><span>});
134</span></span><span style=display:flex><span>
135</span></span><span style=display:flex><span><span style=color:green>// returns JSON object of all opened topics
136</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; {
137</span></span><span style=display:flex><span> res.send(sseTopics);
138</span></span><span style=display:flex><span>});
139</span></span><span style=display:flex><span>
140</span></span><span style=display:flex><span><span style=color:green>// health-check endpoint
141</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; {
142</span></span><span style=display:flex><span> res.send(<span style=color:#a31515>&#39;OK&#39;</span>);
143</span></span><span style=display:flex><span>});
144</span></span><span style=display:flex><span>
145</span></span><span style=display:flex><span><span style=color:green>// return a 404 if no routes match
146</span></span></span><span style=display:flex><span><span style=color:green></span>app.use((req, res, next) =&gt; {
147</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>);
148</span></span><span style=display:flex><span> res.status(404).end(<span style=color:#a31515>&#39;Not found&#39;</span>);
149</span></span><span style=display:flex><span>});
150</span></span><span style=display:flex><span>
151</span></span><span style=display:flex><span><span style=color:green>// starts the server
152</span></span></span><span style=display:flex><span><span style=color:green></span>app.listen(port, () =&gt; {
153</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>);
154</span></span><span style=display:flex><span>});
155</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
156accepts. Having structure like this allows us to have multiple separated type of
157events on each topic.<p>With this we can separate streams and only receive events that belong to the
158topic.<p>One example would be, that we have index page and we want to receive messages
159about new upvotes or new subscribers but we don't want to follow events for
160other pages. This reduces clutter and overall network. And structure is much
161nicer and maintanable.<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span>{
162</span></span><span style=display:flex><span> &#34;topic&#34;: <span style=color:#a31515>&#34;sample-topic&#34;</span>,
163</span></span><span style=display:flex><span> &#34;event&#34;: <span style=color:#a31515>&#34;sample-event&#34;</span>,
164</span></span><span style=display:flex><span> &#34;message&#34;: { &#34;name&#34;: <span style=color:#a31515>&#34;John&#34;</span> }
165</span></span><span style=display:flex><span>}
166</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
167follow along.<h3 id=publisher>Publisher</h3><p>As talked about above publisher is the one that send messages to the
168broker/server. Message inside the payload can be whatever you want (string,
169object, array). I would however personally avoid send large chunks of data like
170blobs and such.<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span><span style=color:#00f>&lt;!DOCTYPE html&gt;</span>
171</span></span><span style=display:flex><span>&lt;html lang=<span style=color:#a31515>&#34;en&#34;</span>&gt;
172</span></span><span style=display:flex><span>
173</span></span><span style=display:flex><span> &lt;head&gt;
174</span></span><span style=display:flex><span> &lt;meta charset=<span style=color:#a31515>&#34;UTF-8&#34;</span>&gt;
175</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;
176</span></span><span style=display:flex><span> &lt;title&gt;Publisher&lt;/title&gt;
177</span></span><span style=display:flex><span> &lt;/head&gt;
178</span></span><span style=display:flex><span>
179</span></span><span style=display:flex><span> &lt;body&gt;
180</span></span><span style=display:flex><span>
181</span></span><span style=display:flex><span> &lt;h1&gt;Publisher&lt;/h1&gt;
182</span></span><span style=display:flex><span>
183</span></span><span style=display:flex><span> &lt;fieldset&gt;
184</span></span><span style=display:flex><span> &lt;p&gt;
185</span></span><span style=display:flex><span> &lt;label&gt;Server:&lt;/label&gt;
186</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;
187</span></span><span style=display:flex><span> &lt;/p&gt;
188</span></span><span style=display:flex><span> &lt;p&gt;
189</span></span><span style=display:flex><span> &lt;label&gt;Topic:&lt;/label&gt;
190</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;
191</span></span><span style=display:flex><span> &lt;/p&gt;
192</span></span><span style=display:flex><span> &lt;p&gt;
193</span></span><span style=display:flex><span> &lt;label&gt;Event:&lt;/label&gt;
194</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;
195</span></span><span style=display:flex><span> &lt;/p&gt;
196</span></span><span style=display:flex><span> &lt;p&gt;
197</span></span><span style=display:flex><span> &lt;label&gt;Message:&lt;/label&gt;
198</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;
199</span></span><span style=display:flex><span> &lt;/p&gt;
200</span></span><span style=display:flex><span> &lt;p&gt;
201</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;
202</span></span><span style=display:flex><span> &lt;/p&gt;
203</span></span><span style=display:flex><span> &lt;/fieldset&gt;
204</span></span><span style=display:flex><span>
205</span></span><span style=display:flex><span> &lt;script&gt;
206</span></span><span style=display:flex><span>
207</span></span><span style=display:flex><span> <span style=color:#00f>const</span> button = document.querySelector(<span style=color:#a31515>&#39;#button&#39;</span>);
208</span></span><span style=display:flex><span> <span style=color:#00f>const</span> server = document.querySelector(<span style=color:#a31515>&#39;#server&#39;</span>);
209</span></span><span style=display:flex><span> <span style=color:#00f>const</span> topic = document.querySelector(<span style=color:#a31515>&#39;#topic&#39;</span>);
210</span></span><span style=display:flex><span> <span style=color:#00f>const</span> event = document.querySelector(<span style=color:#a31515>&#39;#event&#39;</span>);
211</span></span><span style=display:flex><span> <span style=color:#00f>const</span> message = document.querySelector(<span style=color:#a31515>&#39;#message&#39;</span>);
212</span></span><span style=display:flex><span>
213</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; {
214</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>, {
215</span></span><span style=display:flex><span> method: <span style=color:#a31515>&#39;post&#39;</span>,
216</span></span><span style=display:flex><span> headers: {
217</span></span><span style=display:flex><span> <span style=color:#a31515>&#39;Accept&#39;</span>: <span style=color:#a31515>&#39;application/json&#39;</span>,
218</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>,
219</span></span><span style=display:flex><span> },
220</span></span><span style=display:flex><span> body: JSON.stringify({
221</span></span><span style=display:flex><span> topic: topic.value,
222</span></span><span style=display:flex><span> event: event.value,
223</span></span><span style=display:flex><span> message: JSON.parse(message.value),
224</span></span><span style=display:flex><span> }),
225</span></span><span style=display:flex><span> });
226</span></span><span style=display:flex><span>
227</span></span><span style=display:flex><span> <span style=color:#00f>const</span> res = <span style=color:#00f>await</span> req.json();
228</span></span><span style=display:flex><span> console.log(res);
229</span></span><span style=display:flex><span> });
230</span></span><span style=display:flex><span>
231</span></span><span style=display:flex><span> &lt;/script&gt;
232</span></span><span style=display:flex><span>
233</span></span><span style=display:flex><span> &lt;/body&gt;
234</span></span><span style=display:flex><span>
235</span></span><span style=display:flex><span>&lt;/html&gt;
236</span></span></code></pre><h3 id=subscriber>Subscriber</h3><p>Subscriber is responsible for receiving new messages that come from server via
237publisher. The code bellow is very rudimentary but works and follows the
238implementation guidelines for EventSource.<p>You can use either Developer Tools Console to see incoming messages or you can
239defer to Debugging with Google Chrome section above to see all EventStream
240messages.<blockquote><p>Don't be alarmed if the subscriber gets disconnected from the server every so
241often. The code we have here resets connection every 15s but it automatically
242get reconnected and fetches all messages up to last received message id. This
243setting can be adjusted in <code>server.js</code> file; search for the
244<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>
245</span></span><span style=display:flex><span>&lt;html lang=<span style=color:#a31515>&#34;en&#34;</span>&gt;
246</span></span><span style=display:flex><span>
247</span></span><span style=display:flex><span> &lt;head&gt;
248</span></span><span style=display:flex><span> &lt;meta charset=<span style=color:#a31515>&#34;UTF-8&#34;</span>&gt;
249</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;
250</span></span><span style=display:flex><span> &lt;title&gt;Subscriber&lt;/title&gt;
251</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;
252</span></span><span style=display:flex><span> &lt;/head&gt;
253</span></span><span style=display:flex><span>
254</span></span><span style=display:flex><span> &lt;body&gt;
255</span></span><span style=display:flex><span>
256</span></span><span style=display:flex><span> &lt;h1&gt;Subscriber&lt;/h1&gt;
257</span></span><span style=display:flex><span>
258</span></span><span style=display:flex><span> &lt;fieldset&gt;
259</span></span><span style=display:flex><span> &lt;p&gt;
260</span></span><span style=display:flex><span> &lt;label&gt;Server:&lt;/label&gt;
261</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;
262</span></span><span style=display:flex><span> &lt;/p&gt;
263</span></span><span style=display:flex><span> &lt;p&gt;
264</span></span><span style=display:flex><span> &lt;label&gt;Topic:&lt;/label&gt;
265</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;
266</span></span><span style=display:flex><span> &lt;/p&gt;
267</span></span><span style=display:flex><span> &lt;p&gt;
268</span></span><span style=display:flex><span> &lt;label&gt;Event:&lt;/label&gt;
269</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;
270</span></span><span style=display:flex><span> &lt;/p&gt;
271</span></span><span style=display:flex><span> &lt;p&gt;
272</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;
273</span></span><span style=display:flex><span> &lt;/p&gt;
274</span></span><span style=display:flex><span> &lt;/fieldset&gt;
275</span></span><span style=display:flex><span>
276</span></span><span style=display:flex><span> &lt;script&gt;
277</span></span><span style=display:flex><span>
278</span></span><span style=display:flex><span> <span style=color:#00f>const</span> button = document.querySelector(<span style=color:#a31515>&#39;#button&#39;</span>);
279</span></span><span style=display:flex><span> <span style=color:#00f>const</span> server = document.querySelector(<span style=color:#a31515>&#39;#server&#39;</span>);
280</span></span><span style=display:flex><span> <span style=color:#00f>const</span> topic = document.querySelector(<span style=color:#a31515>&#39;#topic&#39;</span>);
281</span></span><span style=display:flex><span> <span style=color:#00f>const</span> event = document.querySelector(<span style=color:#a31515>&#39;#event&#39;</span>);
282</span></span><span style=display:flex><span>
283</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; {
284</span></span><span style=display:flex><span>
285</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>);
286</span></span><span style=display:flex><span>
287</span></span><span style=display:flex><span> es.addEventListener(event.value, <span style=color:#00f>function</span> (evt) {
288</span></span><span style=display:flex><span> console.log(<span style=color:#a31515>`incoming message`</span>, JSON.parse(evt.data));
289</span></span><span style=display:flex><span> });
290</span></span><span style=display:flex><span>
291</span></span><span style=display:flex><span> es.addEventListener(<span style=color:#a31515>&#39;open&#39;</span>, <span style=color:#00f>function</span> (evt) {
292</span></span><span style=display:flex><span> console.log(<span style=color:#a31515>&#39;connected&#39;</span>, evt);
293</span></span><span style=display:flex><span> });
294</span></span><span style=display:flex><span>
295</span></span><span style=display:flex><span> es.addEventListener(<span style=color:#a31515>&#39;error&#39;</span>, <span style=color:#00f>function</span> (evt) {
296</span></span><span style=display:flex><span> console.log(<span style=color:#a31515>&#39;error&#39;</span>, evt);
297</span></span><span style=display:flex><span> });
298</span></span><span style=display:flex><span>
299</span></span><span style=display:flex><span> });
300</span></span><span style=display:flex><span>
301</span></span><span style=display:flex><span> &lt;/script&gt;
302</span></span><span style=display:flex><span>
303</span></span><span style=display:flex><span> &lt;/body&gt;
304</span></span><span style=display:flex><span>
305</span></span><span style=display:flex><span>&lt;/html&gt;
306</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://chotrin.org/writing/2023-10-20.html target=_blank rel=noopener>OpenBSD upgrade and fall things.</a><div>Been AFK for a bit. It's autumn and I upgraded this server to OpenBSD 7.4! — <a href=https://chotrin.org>chötrin's wiki.</a><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><div>Getting "url" parameter is valid but upstream response is invalid error with Next/Image on WSL2 — <a href=https://mirzapandzo.com/>Mirza Pandzo's Blog</a><li><a href=https://drewdevault.com/2023/10/13/Going-off-script.html target=_blank rel=noopener>Going off-script</a><div>There is a phenomenon in society which I find quite bizarre. Upon our entry to
307this mortal coil, we are endowed with self-awareness, agency, and free will.
308Each of th… — <a href=https://drewdevault.com>Drew DeVault's blog</a><li><a href=https://solar.lowtechmagazine.com/2023/10/workshop-in-rotterdam-how-to-build-a-bike-generator/ target=_blank rel=noopener>Workshop in Rotterdam: How to Build a Bike Generator</a><div>Afbeelding: Low-tech Magazine workshop in Rotterdam, the Netherlands. Poster: Marie Verdeil. Image: Sara Vercauteren
309The workshop takes place on behalf of the “Hou… — <a href=https://solar.lowtechmagazine.com/posts/>LOW←TECH MAGAZINE English</a><li><a href="http://offbeatpursuit.com:80/blog/?id=24" target=_blank rel=noopener>Printf debugging</a><div>tags:
310plan9
311There’s no shame in that. Yes, there is documentation, code to be
312read, and debuggers to be used. But sometimes you just need to “see”
313what is happening.
314So… — <a href=http://offbeatpursuit.com:80/blog/>WLOG - blog</a><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><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. Ther… — <a href=https://neil.computer/>Neil Panchal</a><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><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 … — <a href=https://journal.valeriansaliou.name/>Valerian Saliou</a><li><a href=https://jcs.org/2023/10/17/wikipedia target=_blank rel=noopener>Wikipedia Reader 1.0 Released</a><div>Wikipedia Reader
3151.0 has been released:
316wikipedia-1.0.sit
317(StuffIt 3 archive, includes
318source code
319and THINK C 5 project file)
320SHA256: 360e12d064f6579695f1e627ce34cb2f0… — <a href=https://jcs.org/>joshua stein</a></ul><p><a href=https://git.sr.ht/~sircmpwn/openring>Generated with 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
321at <a href=mailto:m@mitjafelicijan.com>m@mitjafelicijan.com</a> or
322catch 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
323the <a href=https://creativecommons.org/licenses/by/4.0/ target=_blank rel=noreferrer>CC BY 4.0 license</a> unless specified
324otherwise. Blog is also available as <a href=/index.xml target=_blank>RSS feed</a>.</footer> \ No newline at end of file
generated by cgit v1.2.3 (git 2.46.0) at 2026-04-30 20:29:16 +0000