Annotated code for a demo of WebSocket chat in Deno Deploy#

1
// listenAndServe is the Deno standard mechanism for creating an HTTP server
2
// https://deno.land/manual/examples/http_server#using-the-codestdhttpcode-library
3
import { listenAndServe } from "https://deno.land/std/http/server.ts"
4

5
// Set of all of the currently open WebSocket connections from browsers
6
const sockets = new Set<WebSocket>(),
7
/*
8
BroadcastChannel is a concept that is unique to the Deno Deploy environment.
9

10
https://deno.com/deploy/docs/runtime-broadcast-channel/
11

12
It is modelled after the browser API of the same name.
13

14
It sets up a channel between ALL instances of the server-side script running
15
in every one of the Deno Deploy global network of data centers.
16

17
The argument is the name of the channel, which apparently can be an empty string.
18
*/
19
    channel = new BroadcastChannel(""),
20
    headers = {"Content-type": "text/html"},
21
/*
22
This is the bare-bones HTML for the browser side of the application
23

24
It creates a WebSocket connection back to the host, and sets it up so any
25
message that arrives via that WebSocket will be appended to the textContent
26
of the pre element on the page.
27

28
The input element has an onkeyup that checks for the Enter key and sends
29
the value of that element over the WebSocket channel to the server.
30
*/
31
    html = `<script>let ws = new WebSocket("wss://"+location.host)
32
ws.onmessage = e => pre.textContent += e.data+"\\n"</script>
33
<input onkeyup="event.key=='Enter'&&ws.send(this.value)"><pre id=pre>`
34

35
/*
36
This bit does the broadcast work: any time a message is received from the
37
BroadcastChannel it is forwarded on to every single one of the currently
38
attached WebSocket connections, using the data in that "sockets" set.
39

40
Additionally, this covers the case of messages coming from a client connected
41
to THIS instance - these are also sent to the channel (see code below), but
42
here it spots that the message event's e.target is NOT the current instance
43
and sends the message to that channel so it broadcast to the other data centers.
44
*/
45
channel.onmessage = e => {
46
    (e.target != channel) && channel.postMessage(e.data)
47
    sockets.forEach(s => s.send(e.data))
48
}
49

50
/*
51
I tried removing the await here and the demo still worked.
52

53
But https://deno.land/std@0.113.0/http/server.ts#L224 shows that this function
54
is indeed an async that returns a Promise.
55
*/
56
await listenAndServe(":8080", (r: Request) => {
57
    try {
58
        /*
59
        Deno.upgradeWebSocket is a relatively new feature, added in Deno v1.12
60
        in July 2021:
61
        https://deno.com/blog/v1.12#server-side-websocket-support-in-native-http
62

63
        It gives you back a response that you should return to the client in order
64
        to finish establishing the WebSocket connection, and a socket object which
65
        you can then use for further WebSocket communication.
66
        */
67
        const { socket, response } = Deno.upgradeWebSocket(r)
68
        // Add it to the set so we can send to all of them later
69
        sockets.add(socket)
70
        /*
71
        This is a sneaky hack: when a message arrives from the WebSocket we pass it
72
        directly to the BroadcastChannel - then use the e.target != channel check
73
        above to broadcast it on to every other global instance.
74
        */
75
        socket.onmessage = channel.onmessage
76
        // When browser disconnects, remove the socket from the set of sockets
77
        socket.onclose = _ => sockets.delete(socket)
78
        return response
79
    } catch {
80
    /*
81
    I added code here to catch(e) and display e.toString() which showed me
82
    that the exception caught here is:
83

84
      exception: TypeError: Invalid Header: 'upgrade' header must be 'websocket'
85

86
    This is an exception thrown by Deno.upgradeWebSocket(r) if the incoming
87
    request does not include the "upgrade: websocket" HTTP header, which
88
    is added by browsers when using new WebSocket("wss://...")
89

90
    So here we return the HTML and headers for the application itself.
91
    */
92
    return new Response(html, {headers})
93
  }
94
})