2b:null 2c:["$","title",null,{"children":"Introduction to Serverless Notebooks | Aaron Kyle Dennis | Observable"}] 31:T48d,md`All of these would be impossible without help from a server: * [A *You Draw It*-style chart](https://www.nytimes.com/interactive/2015/05/28/upshot/you-draw-it-how-family-income-affects-childrens-college-chances.html) revealing aggregate guesses * [A celebrity recognizability quiz](https://www.nytimes.com/interactive/2019/12/23/upshot/recognizability-quiz.html) * [A *Game of Thrones* character survey](https://www.nytimes.com/interactive/2017/08/09/upshot/game-of-thrones-chart.html) * [*Can you point to Ukraine on a map?*](/@chriszs/point-to-ukraine-on-a-map) * [*Quick, Draw!*](https://quickdraw.withgoogle.com/) and [*The Sheep Market*](http://www.aaronkoblin.com/work/thesheepmarket/) * Polls, surveys, guestbooks, comments, chat rooms * Social experiments (*e.g.*, [*Do Not Touch*](https://studiomoniker.com/projects/do-not-touch), Reddit’s Place and The Button) * Social games (*e.g.*, multiplayer crossword) * Proxies for accessing APIs (*e.g.*, [CORS Anywhere](https://github.com/Rob--W/cors-anywhere)) * … and much more `32:T53d,md`~~~js const AWS = require("aws-sdk"); const lambda = new AWS.Lambda() const dynamodb = new AWS.DynamoDB.DocumentClient(); exports.handler = async (event) => { // Validate the origin. if (event.headers.Origin !== "${origin}") { return {statusCode: 403}; } // Validate the requested counter. if (!event.queryStringParameters || !event.queryStringParameters.id || event.queryStringParameters.id.length > 40) { return {statusCode: 400}; } // Register the current client. // Send the initial count. await Promise.all([ dynamodb .put({ TableName: "helloclients", Item: { id: event.requestContext.connectionId, counter: event.queryStringParameters.id } }) .promise(), dynamodb .get({ TableName: "hellocounters", Key: {id: event.queryStringParameters.id}, ExpressionAttributeNames: {"#value": "value"}, ProjectionExpression: "#value" }) .promise() .then(({Item: {value} = {value: 0}}) => lambda .invoke({ FunctionName: "helloCount", InvocationType: "Event", Payload: JSON.stringify({ connectionId: event.requestContext.connectionId, count: value }) }) .promise()) ]); return {statusCode: 200}; }; ~~~`33:T694,md` ~~~js const AWS = require("aws-sdk"); const dynamodb = new AWS.DynamoDB.DocumentClient(); const gateway = new AWS.ApiGatewayManagementApi({ apiVersion: "2018-11-29", endpoint: "${gateway}.execute-api.${region}.amazonaws.com/${stage}" }); exports.handler = async (event) => { const counters = new Map; // Take the maximum value for each updated counter. for (const record of event.Records) { if (!record.dynamodb.NewImage) continue; // ? const id = record.dynamodb.NewImage.id.S; const value = +record.dynamodb.NewImage.value.N; if (counters.has(id)) { counters.set(id, Math.max(value, counters.get(id))); } else { counters.set(id, value); } } // Notify the clients for each update counter. // Delete any dead clients. await Promise.all(Array.from(counters, async ([id, count]) => { const data = JSON.stringify({type: "count", count}); const {Items: clients} = await dynamodb .scan({ TableName: "helloclients", ProjectionExpression: "id", ExpressionAttributeNames: {"#counter": "counter"}, ExpressionAttributeValues: {":counter": id}, FilterExpression: "#counter = :counter" }) .promise(); await Promise.all(clients.map(async ({id}) => { try { await gateway .postToConnection({ConnectionId: id, Data: data}) .promise(); } catch (error) { if (error.statusCode === 410) { await dynamodb .delete({ TableName: "helloclients", Key: {id} }) .promise(); } else { throw error; } } })); })); }; ~~~`34:[{"id":"f7291f43e81142ee385d1d1ac44fec4dd2e735a6351a629d11453b4bbe28c90e90d8fe38bda48b0fc34044d79aa71e473804973ee2d6f8b3c1cc2f595c94fff2","href":"https://static.observableusercontent.com/files/f7291f43e81142ee385d1d1ac44fec4dd2e735a6351a629d11453b4bbe28c90e90d8fe38bda48b0fc34044d79aa71e473804973ee2d6f8b3c1cc2f595c94fff2","name":"1024px-John_Constable_-_A_Cloud_Study,_Sunset_-_Google_Art_Project.jpg","type":"image/jpeg","lastModified":1594557910139.601,"size":175581}] 2f:{"id":"03a777f085211a22","slug":null,"title":"Introduction to Serverless Notebooks","thumbnail":"5a2a34405e8b5836f06b1669ba2c05fae7cfc638d73978fde0019799d26b78ae","access_level":"unlisted","create_time":"$D2020-07-12T12:45:10.139Z","update_time":"$D2020-07-12T12:45:10.139Z","view_time":null,"first_public_time":null,"fork":{"id":"c0b4a63b181fdeb9","slug":"introduction-to-serverless-notebooks","title":"Introduction to Serverless Notebooks","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":"starter_2024"},"version":2304,"publish_version":2304,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}],"members":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Introduction to Serverless Notebooks","cells":[{"id":310,"value":"md`# Introduction to Serverless Notebooks\n\n

\n\nObservable notebooks are great for running code in the browser. But sometimes you want *more*: to allow readers to interact with each other in realtime, say, or to survey readers and show aggregate responses.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2218,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"md`In the past you had to provision machines yourself, but thanks to serverless computing, you can now write code and let cloud services handle the rest! You can even build a fully-fledged web application directly from your browser, without installing software or touching the command line.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"md`I’ll show you how. In this notebook, we’ll build a **live click counter**: if you click the button below, the count will increase by one. Everyone reading will see the count go up, too! Open this notebook in multiple windows or computers to see.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"html`

${Object.assign(html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"md`A warning: this tutorial has many steps, much like [Tartine’s croissant recipe](https://www.amazon.com/Tartine-Revised-Revisited-Elisabeth-Prueitt/dp/1452178739). 🥐 The outcome here won’t be as delicious but I hope you find it rewarding nonetheless. While a click counter is not especially useful by itself, this basic idea can be expanded to create almost anything imaginable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"md`This notebook builds on Amazon Web Services:\n\n* [AWS DynamoDB](https://aws.amazon.com/dynamodb/) to store data (active clients and counts),\n* [AWS Lambda](https://aws.amazon.com/lambda/) to execute logic (reading, writing, messaging), and\n* [AWS API Gateway](https://aws.amazon.com/api-gateway/) to expose it to the web.\n\nThere are other cloud providers you could use in place of AWS, of course, and those might be easier to use. (Let me know if you fork this notebook to adapt it to other cloud providers!) But the breadth of services offered by Amazon is staggering. If you can get past the intimidating interface, you may be surprised by what you accomplish.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"md`Before we dive into code, let’s sketch out how the client and server will talk. We’ll use web sockets for bidirectional messaging: the client can send messages up ↑ to the server and the server can send messages down ↓ to the client. Messages can be represented however you like; here we’ll use JSON objects. Our objects have a *type* field to differentiate different types of messages. After the client connects, the server reports the *count* ↓ of the counter.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"({type: \"count\", count: 42})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"md`To increment the counter, the client sends an *increment* ↑ message. The server will then send a new *count* ↓ message to all interested clients, including the client who requested the increment.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"({type: \"increment\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`## Create the helloclient Gateway\n\nReaching our API from the browser requires a gateway. This gateway proxies requests from the client to the server and provides a public URL. Gateways have associated routes: for a REST API, routes might correspond to different paths; for our web sockets API, routes will correspond to different message types sent by the client. We’ll define those routes later. For now let’s create an empty gateway.\n\n1. Go to the [AWS API Gateway console](https://console.aws.amazon.com/apigateway/home)\n1. Click **Create API**\n1. Under *WebSocket API*, click **Build**\n1. Under *API name*, type **helloclient**\n1. Under *Route Selection Expression*, type **$request.body.type**\n1. Click **Create API**\n\n(For some reason AWS insisted on showing me an interstitial modal on creating my first API by example. Toggling the protocol to REST and back to WebSocket fixed it.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1344,"value":"md`After creating your gateway, note your gateway’s identifier by editing the cell below. The identifier is shown at the top of the page in parentheses (“helloclient (i3c3e2tpt9)”) and in the *id* column when browsing gateways.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"gateway = \"██████████\" // Replace this with your Gateway identifier.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1375,"value":"md`## Create the hellocounters table\n\nNow let’s talk about state: DynamoDB. If you’re accustomed to PostgreSQL, you may find DynamoDB limited and awkward; on the other hand, it’s free-ish and gets the job done! (I’d like to try [AWS Aurora Serverless](https://aws.amazon.com/rds/aurora/serverless/) sometime.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1545,"value":"md`To store counters, we’ll use a table with two columns: the counter’s *id* (name) and *value* (a positive integer). We’re naming our counters (*e.g.*, “example”) so that we can create as many counters as we like. If you’re going to the trouble of spining up a serverless API, you might as well add a dash of generality.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"counter = \"example\" // Edit this to change the counter.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"md`As a NoSQL store, DynamoDB does not require a schema: we merely declare the primary key column (*id*) and populate rows with whatever other fields we like. Each row will look something like this:\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n

id	value
${counter}	42

\n\nFollow these steps to create the first table:\n\n1. Go to the [AWS DynamoDB console](https://console.aws.amazon.com/dynamodb/home)\n1. Click **Create table**\n1. Under *Table name*, type **hellocounters**\n1. Under *Primary key*, type **id**\n1. Scroll down and click **Create**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1773,"value":"md`## Create the hellocounters stream\n\nLater we’ll need to create a trigger on the *hellocounters* table to notify clients when counters are updated; triggers require enabling streams, so let’s do that now.\n\n1. Go to the AWS DynamoDB *hellocounters* table\n1. Click **Manage Stream**\n1. Select **New image**\n1. Click **Enable**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"md`## Create the helloclients table\n\nTo send messages over the socket, we’ll also need to record the connection identifiers provided by AWS API Gateway and their associated counter, like so:\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n

id	counter
LJafucX7oAMAcUQ=	${counter}

\n\nTo create the second table:\n\n1. Go to the [AWS DynamoDB console](https://console.aws.amazon.com/dynamodb/home)\n1. Click **Create table**\n1. Under *Table name*, type **helloclients**\n1. Under *Primary key*, type **id**\n1. Click **Create**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"md`We use a column named “id” in both tables, but note these have different meaning: the *counter* identifier and the *client* (or connection) identifier. If you prefer more verbosity, you could use the names *counter_id* and *client_id* instead. (And if you like, you can create an index on the *counter* column to allow more efficient querying of clients for a particular counter. I opted to keep things simple under the assumption that most active clients will watch the same counter.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"md`## Create the helloclient IAM role\n\nAWS requires services to be granted privileges, such as reading or writing to DynamoDB tables, through AWS Identity and Access Management (IAM). I found many tutorials suggest loose permissions, such as full read-write access to all DynamoDB tables; this is convenient during development but dangerous, so I recommend minimizing privileges. Let’s start by creating a role.\n\n1. Go to the [AWS IAM console](https://console.aws.amazon.com/iam/home)\n1. Under *Access management*, click **Roles**\n1. Click **Create role**\n1. Under *Choose a use case*, click **Lambda**\n1. Click **Next: Permissions**\n1. Click **Next: Tags**\n1. Click **Next: Review**\n1. Under *Role name*, type **helloclient**\n1. Click **Create role**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"md`## Create an inline IAM policy\n\nWe’ll grant privileges to our role by associating a policy. IAM allows shared policies to simplify access control of complex systems; that’s overkill for us, so we’ll create a one-off “inline” policy directly attached to our role.\n\n1. Go to the *helloclient* AWS IAM role \n1. Click **Add inline policy**\n1. Click the **JSON** tab\n1. Copy-paste the policy below, replacing the elided numbers\n1. Click **Review policy**\n1. Click **Create policy**\n\nYou can use the visual policy editor if you prefer, but it takes more than forty steps—I figured it would be easier to use the provided policy below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1769,"value":"md`\n~~~json\n{\n \"Version\": \"2012-10-17\",\n \"Statement\": [\n {\n \"Sid\": \"VisualEditor0\",\n \"Effect\": \"Allow\",\n \"Action\": [\n \"dynamodb:DeleteItem\",\n \"dynamodb:DescribeStream\",\n \"dynamodb:GetItem\",\n \"dynamodb:GetRecords\",\n \"dynamodb:GetShardIterator\",\n \"dynamodb:ListStreams\",\n \"dynamodb:PutItem\",\n \"dynamodb:Scan\",\n \"dynamodb:UpdateItem\",\n \"execute-api:ManageConnections\",\n \"lambda:InvokeFunction\"\n ],\n \"Resource\": [\n \"arn:aws:dynamodb:${region}:${account}:table/helloclients\",\n \"arn:aws:dynamodb:${region}:${account}:table/hellocounters\",\n \"arn:aws:dynamodb:${region}:${account}:table/hellocounters/stream/*\",\n \"arn:aws:execute-api:${region}:${account}:${gateway}/*/*/*\",\n \"arn:aws:lambda:${region}:${account}:function:helloCount\"\n ]\n }\n ]\n}\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"account = \"████████████\" // Replace with your AWS account number.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"region = \"us-east-1\" // Replace with your AWS region, as needed.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Create the helloConnect Lambda function\n\nThe interesting parts of this API—the logic—live in AWS Lambda: little JavaScript functions invoked in response to clients connecting, sending messages, and disconnecting. (It’s possible to wire up API Gateway [directly to DynamoDB](https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/), but Lambda is more flexible as it allows us to define behavior in standard JavaScript.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1240,"value":"md`Our first Lambda function, called *helloConnect*, will be invoked by the API gateway whenever a client connects to our socket. As greeter for new clients, this function has several important responsibilities. It:\n\n* validates the request origin,\n* validates the requested counter name,\n* registers the client so it receives future *count* ↓ messages, and\n* sends the initial counter value to the client.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1601,"value":"md`Perhaps I should say “bouncer” rather than “greeter”: our API is only intended to be used from our team notebooks, so the request must originate from our Observable user domain (observablehq.static…). In addition, since we allow clients to create counters on-demand, we enforce reasonably short names.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1448,"value":"md`Follow these steps to create the helloConnect function:\n\n1. Go to the [AWS Lambda console](https://console.aws.amazon.com/lambda/home)\n1. Click **Create function**\n1. Click **Author from scratch**\n1. Under *Function name*, type **helloConnect**\n1. Under *Runtime*, select **Node.js 12.x**\n1. Under *Permissions*, select **Use an existing role**\n1. Under *Existing role*, select **helloclient**\n1. Click **Create function**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1472,"value":"md`Then under **Function code**, edit the *index.js* file as below, replacing the *origin* value with where you’d like to access your API. Lastly click **Save**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"origin = location.origin.replace(\"observablehq\", \"████████\") // Replace with your origin.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1671,"value":"md`The *helloConnect* function uses three AWS SDK methods:\n\n* [*dynamodb*.put](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB/DocumentClient.html#put-property) to register the current client,\n* [*dynamodb*.get](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB/DocumentClient.html#get-property) to get the initial counter value, and\n* [*lambda*.invoke](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Lambda.html#invoke-property) to (indirectly) send the count to the client.\n\nPlease refer to the linked documentation for details; note that we’re using DynamoDB’s [DocumentClient](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB/DocumentClient.html), an alternative interface to DynamoDB that supports JavaScript primitive types.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1581,"value":"md`In normal websocket routes, you can add an integration response and return a *body* string to reply to the client’s message. The $connect route is special, however: AWS doesn’t allow $connect routes to send messages directly. We must therefore invoke a *second* Lambda (below) to send the initial *count* ↓.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1592,"value":"md`To reduce latency when sending the initial count, we use [Promise.all](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) to register the client and report the initial count in parallel. We could reduce latency further by deploying Amazon’s in-memory [DynamoDB Accelerator](https://aws.amazon.com/dynamodb/dax/), but that would cost money.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"md`## Create the helloCount Lambda function\n\nSince the $connect route isn’t allowed to send messages to the client, we need a second Lambda function; this function calls [*gateway*.postToConnection](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/ApiGatewayManagementApi.html#postToConnection-property) to send the initial *count* ↓ message to the new client.\n\n1. Go to the [AWS Lambda console](https://console.aws.amazon.com/lambda/home)\n1. Click **Create function**\n1. Click **Author from scratch**\n1. Under *Function name*, type **helloCount**\n1. Under *Runtime*, select **Node.js 12.x**\n1. Under *Permissions*, select **Use an existing role**\n1. Under *Existing role*, select **helloclient**\n1. Click **Create function**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1704,"value":"md`Note that the code below requires a gateway identifier; if you didn’t already edit the *gateway* cell above, edit the code below accordingly.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"md`\n~~~js\nconst AWS = require(\"aws-sdk\");\n\nconst gateway = new AWS.ApiGatewayManagementApi({\n apiVersion: \"2018-11-29\",\n endpoint: \"${gateway}.execute-api.${region}.amazonaws.com/${stage}\"\n});\n\nexports.handler = async ({connectionId, count}) => {\n await gateway\n .postToConnection({\n ConnectionId: connectionId,\n Data: JSON.stringify({type: \"count\", count})\n })\n .promise();\n\n return {statusCode: 200};\n};\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"md`## Create the helloDisconnect Lambda function\n\nAs you might guess, we’ll also want a $disconnect route to unregister clients when they disconnect by [deleting](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB/DocumentClient.html#delete-property) the client’s row from the *helloclients* table.\n\n1. Go to the [AWS Lambda console](https://console.aws.amazon.com/lambda/home)\n1. Click **Create function**\n1. Click **Author from scratch**\n1. Under *Function name*, type **helloDisconnect**\n1. Under *Runtime*, select **Node.js 12.x**\n1. Under *Permissions*, select **Use an existing role**\n1. Under *Existing role*, select **helloclient**\n1. Click **Create function**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"md`~~~js\nconst AWS = require(\"aws-sdk\");\n\nconst dynamodb = new AWS.DynamoDB.DocumentClient();\n\nexports.handler = async event => {\n await dynamodb\n .delete({\n TableName: \"helloclients\",\n Key: {id: event.requestContext.connectionId}\n })\n .promise();\n\n return {statusCode: 200};\n};\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"md`## Create the helloIncrement Lambda function\n\nNow for the fun one! Let’s handle the client’s *increment* ↑ message by [updating](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB/DocumentClient.html#update-property) the counter, adding one to its value.\n\n1. Go to the [AWS Lambda console](https://console.aws.amazon.com/lambda/home)\n1. Click **Create function**\n1. Click **Author from scratch**\n1. Under *Function name*, type **helloIncrement**\n1. Under *Runtime*, select **Node.js 12.x**\n1. Under *Permissions*, select **Use an existing role**\n1. Under *Existing role*, select **helloclient**\n1. Click **Create function**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"md`\n~~~js\nconst AWS = require(\"aws-sdk\");\n\nconst dynamodb = new AWS.DynamoDB.DocumentClient();\n\nexports.handler = async event => {\n\n // Retrieve the current client’s counter.\n const {Item: {counter}} = await dynamodb\n .get({\n TableName: \"helloclients\",\n PojectionExpression: \"counter\",\n Key: {id: event.requestContext.connectionId}\n })\n .promise();\n\n // Increment the counter’s value.\n await dynamodb\n .update({\n TableName: \"hellocounters\",\n Key: {id: counter},\n ExpressionAttributeNames: {\"#value\": \"value\"},\n ExpressionAttributeValues: {\":i\": 1},\n UpdateExpression: \"ADD #value :i\"\n })\n .promise();\n\n return {statusCode: 200};\n};\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"md`Something’s conspicuously missing here: how are clients notified that the counter changed? It’s tempting to have this Lambda function notify clients directly, but that wouldn’t scale: if *n* clients simultaneously send an *increment* ↑, the server will send *n²* *count* ↓ replies. For 10,000 clients, that’s one *million* messages! 😳 Fortunately, it’s not much additional work to build a scalable solution.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1758,"value":"md`## Create the helloTrigger Lambda function\n\nAWS DynamoDB supports batched triggers: after a series of updates in a given time window, it will trigger our Lambda function. This allows us to throttle *count* ↓ messages.\n\n1. Go to the [AWS DynamoDB console](https://console.aws.amazon.com/dynamodb/home)\n1. Click **tables**\n1. Click **hellocounters**\n1. Click **Triggers** (may be hidden under *More*)\n1. Click **Create trigger**\n1. Click **New function**\n1. Under *Function name*, type **helloTrigger**\n1. Under *Execution role*, click **Use an existing role**\n1. Under *Role name*, select **helloclient**\n1. Under *DynamoDB table*, select **hellocounters**\n1. Under *Batch window*, type **1**\n1. Check **Enable trigger**\n1. Click **Create function**.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1790,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1719,"value":"md`Our function is passed the new records from the *hellocounters* table, indicating which counters changed. We deduplicate these records, then [scan](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB/DocumentClient.html#scan-property) the clients for each counter, and lastly report the new counter value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1745,"value":"md`The $disconnect route isn’t guaranteed to be invoked when a websocket disconnects: sometimes the connection dies without the server noticing. If you attempt to send a message over a dead connection, *gateway*.postToConnection will throw a 410 “gone” error; we then delete the dead client from the table.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1015,"value":"md`## Assign the Gateway routes\n\nWe’re almost done with our recipe. Now we need to assemble the parts prepared above: to assign our Lambda functions to Gateway routes, so as to invoke them when clients connect, disconnect, or send messages.\n\n1. Go to the *helloclient* AWS API Gateway\n1. Click the plus sign next to “$connect”\n1. Under *Lambda Function*, type **helloConnect**\n1. Click **Save**\n1. Click **OK**\n1. Click the plus sign next to “$disconnect”\n1. Under *Lambda Function*, type **helloDisconnect**\n1. Click **Save**\n1. Click **OK**\n1. In *New Route Key*, type **increment**\n1. Click the little check box\n1. Under *Lambda Function*, type **helloIncrement**\n1. Click **Save**\n1. Click **OK**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"md`## Deploy the Gateway!\n\nThis makes our service accessible to the world.\n\n1. Go to the *helloclient* AWS API Gateway\n1. Under *Actions*, click **Deploy API**\n1. Under *Deployment stage*, click **[New Stage]**\n1. Under *Stage name*, type **${stage}**\n1. Click **Deploy**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`## Implement the client\n\nCongratulations! 🎉 If you followed all the steps above, your service should now be accessible from your notebooks! The URL is:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1557,"value":"`wss://${gateway}.execute-api.${region}.amazonaws.com/${stage}?id=${encodeURIComponent(counter)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2111,"value":"md`All that’s left is implementing a [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) client to run in the browser. My implementation is available below; it exposes an *increment* function that increments the counter, and updates the mutable *count* to reflect the counter’s value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"increment = {\n let queue = [];\n let socket;\n let timeout;\n let delay = 250;\n\n (function open() {\n socket = new WebSocket(`wss://v3q80qxjpa.execute-api.us-east-1.amazonaws.com/prod?id=${encodeURIComponent(counter)}`);\n socket.onopen = () => {\n delay = 250;\n queue.forEach(message => socket.send(message));\n queue = null;\n };\n socket.onclose = () => {\n delay *= 2;\n timeout = setTimeout(open, delay + Math.random() * delay);\n queue = [];\n };\n socket.onmessage = event => {\n const data = JSON.parse(event.data);\n if (isNaN(mutable count) || data.count > mutable count) {\n mutable count = data.count;\n }\n };\n })();\n\n invalidation.then(() => {\n socket.onclose = null;\n socket.close();\n clearTimeout(timeout);\n });\n\n return () => {\n const message = JSON.stringify({type: \"increment\"});\n if (queue) queue.push(message);\n else socket.send(message);\n ++mutable count;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2123,"value":"md`Here are a couple gotchas with sockets.\n\nFirst, connections are unreliable. AWS will terminate a socket that’s idle for ten minutes, and connections can fail for other reasons. The client above attempts to reconnect after the socket closes, and uses an increasing random delay to reduce the likelihood of a [thundering herd](https://en.wikipedia.org/wiki/Thundering_herd_problem).\n\nSecond, connections are stateful. If a request to *increment* ↑ occurs when the socket isn’t open, the request is queued until the socket is ready. If the cell is [invalidated](/@observablehq/invalidation), the socket is closed to avoid leaking.\n\nThird, connections are slow (at least compared to local operations). To reduce perceived latency, the *increment* function is optimistic: it increments the local *count* when messaging rather than waiting for the server to reply.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2139,"value":"md`Since the cell above is already responsible for the *increment* function, I chose to represent the counter’s value as a separate [mutable](/@observablehq/introduction-to-mutable-state); the notebook then reacts automatically when the mutable is assigned. (Alternatively, I could have used [Generators.observe](https://github.com/observablehq/stdlib/blob/master/README.md#Generators_observe).) The mutable’s initializer references the *counter* name so that if you change the name above, the socket will be re-initialized.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2006,"value":"mutable count = counter, NaN","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1946,"value":"html`

${Object.assign(html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2152,"value":"md`So… one last celebratory click, or two? How ’bout it? 🙌\n\nThanks for reading! 🙏 If you enjoyed this tutorial, if you have questions or comments, or if you find a bug, please let me know [in the forum](https://talk.observablehq.com).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2184,"value":"md`P.S. Observable notebooks run in the client, so the defining property of a *serverless* Observable notebook is that it’s backed by, well, servers. “Serverless notebook” seemed to capture the idea succinctly, but I’d welcome alternative names.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"stage = \"prod\" // Replace if you choose a different stage name.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"