Show new participants as they join #407

douglasnaphas · 2022-04-02T08:45:52Z

gh-250 This should fail.

gh-250 For some reason that is very hard to Google for, when I had {window.location.origin} in the JSX that I'm changing here, it put a comma before and after the string!

gh-250 The handlers need to authenticate the connection requests and associate Connection IDs to Room Codes.

gh-250

gh-250 According to https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/Streams.Lambda.BestPracticesWithDynamoDB.html this is supposed to make more things happen in the initialization phase of the function, thus potentially saving execution time. I'm not sure if process.env.WS_ENDPOINT is available to initialization code, or just handler code.

gh-250

gh-250 It's settled: process.env.ANY_ENVIRONMENT_VARIABLE_YOU_CAN_ACCESS_IN_THE_HANDLER is available during Lambda Function initialization.

gh-250

gh-250 See my comment here: https://medium.com/@philipzeh/event-filtering-for-lambda-functions-using-aws-cdk-d332140590f8 I have no idea why I'm getting an error deploying the event mapping. This commit is partially a guess that it has something to do with empty lines (how does what I'm doing not satisfy the regex /.*/ ???), and partially moving the event filters to separate files, so I can pretty-format them automatically.

gh-250 I got an error: Please ensure the role can perform the GetRecords, GetShardIterator, DescribeStream, ListShards, and ListStreams Actions on your stream in IAM. https://github.com/aws/aws-cdk/blob/master/packages/%40aws-cdk/aws-lambda-event-sources/lib/dynamodb.ts#L35

gh-250 Of course my attempt at using event source filtering resulting in no events being processed. This will log the events to see if I have the JSON structure wrong.

gh-250

gh-250 Because I can't get my event filtering pattern to work, the Function will handle everything from the stream, and filter within the Function code.

gh-250

gh-250 No joins are being detected.

gh-250

gh-250 Also disconnect on App unload.

gh-250 If game names are URLs, for example, the two will behave differently.

gh-250 They behave differently if the game names are whole URIs. We want the say encode/decodeURIComponent behaves, because the game names will come across as query params and should be encoded as URI components

gh-250 The example I want to base my tests on uses import. https://lucasamos.dev/articles/jestmocking/

gh-250 This test is mostly a mess. It doesn't succeed or make much sense in its attempt to mock the AWS SDK, and it breaks when I switch the AWS SDK from require to import.

gh-250 Based on: aws/aws-sdk-js#1963 (comment)

gh-250 This saves the connection Id in the db.

gh-250 The text is too pale to be readable in the secondary color.

gh-250

gh-250 This test currently fails with the exact error I just got in the deployed app.

gh-250

gh-250 I'm not finding the cookies

gh-250

gh-250 My query failed

gh-250 https://docs.aws.amazon.com/cdk/api/v2/docs/aws-apigatewayv2-alpha-readme.html#manage-connections-permission

gh-250 I'm not giving write access for now, because I want to avoid an infinite loop situation if I accidentally write to the db from the stream handler.

gh-250

gh-250 I can still see it there in the console, and my stream handler still fails with a message about the endpoint.

gh-250 Incredibly, a replace() function that works from the Node REPL won't trim wss:// from the start of my endpoint.

gh-250

gh-250 Considering listeners and edge cases, it's getting too confusing for a parent component (App) to pass a stateful WebSocket to pages.

gh-250

gh-250 The first participant (the leader) was getting displayed twice.

gh-250

douglasnaphas added 30 commits March 17, 2022 22:26

Test for WebSockets on the roster page

5a94759

gh-250 This should fail.

Add a WebSockets API behind CloudFront

0ce5876

gh-250

Grant the WS handlers RW access to the Table

f8ac33c

gh-250

Use a variable URL on the Explain Page

c97f321

gh-250

Fix relative import of schema

7f3d88f

gh-250

Remove bizarre commas from variable in JSX

a3e1da1

gh-250 For some reason that is very hard to Google for, when I had {window.location.origin} in the JSX that I'm changing here, it put a comma before and after the string!

Include cookies and query params in WS requests

01905c6

gh-250 The handlers need to authenticate the connection requests and associate Connection IDs to Room Codes.

Stream table changes to trigger.js

22ac283

gh-250

Remove dead reference from trigger.js

ae67a7e

gh-250

Log WS_ENDPOINT in initialization and handler

5be0b29

gh-250

Remove experiment on env during initialization

fc7953d

gh-250 It's settled: process.env.ANY_ENVIRONMENT_VARIABLE_YOU_CAN_ACCESS_IN_THE_HANDLER is available during Lambda Function initialization.

Try filter for only participant events

93258ef

gh-250

Do stringified logging with the old handler

f023d0f

gh-250 Of course my attempt at using event source filtering resulting in no events being processed. This will log the events to see if I have the JSON structure wrong.

Delete the mapping so I can re-create it

2e297b2

gh-250

Re-create the joinedHandler with better logging

8002f88

gh-250

Rename joinedHandler to streamHandler

eae831f

gh-250 Because I can't get my event filtering pattern to work, the Function will handle everything from the stream, and filter within the Function code.

Rename joined handler JS file

a3a93b4

gh-250

Try to detect joins

00d2fea

gh-250

Add logging to stream handler, why no joins?

332199a

gh-250 No joins are being detected.

Remember the S after lib_id

667310d

gh-250

Add tests and no-op WS to Roster

8965e84

gh-250

Connect to the WS on RosterPage load

cf9bf99

gh-250 Also disconnect on App unload.

Use decodeURIComponent, not just decodeURI

3007a9d

gh-250 If game names are URLs, for example, the two will behave differently.

Use encodeURIComponent, not just encodeURI

bea1811

gh-250 They behave differently if the game names are whole URIs. We want the say encode/decodeURIComponent behaves, because the game names will come across as query params and should be encoded as URI components

Convert Dynamo SDK to import, not require

e62082e

gh-250 The example I want to base my tests on uses import. https://lucasamos.dev/articles/jestmocking/

Add a placeholder test for connect.js

9d8e704

gh-250 This test is mostly a mess. It doesn't succeed or make much sense in its attempt to mock the AWS SDK, and it breaks when I switch the AWS SDK from require to import.

Actually mock an AWS SDK call, I think

4c75a8d

gh-250 Based on: aws/aws-sdk-js#1963 (comment)

douglasnaphas added 29 commits March 25, 2022 21:06

Implement connect.js with tests

c63eb44

gh-250 This saves the connection Id in the db.

Remove secondary color for "get script anyway"

590cb9d

gh-250 The text is too pale to be readable in the secondary color.

Remove unused accidental import

f366cef

gh-250

Use logger in stream.js

3110e65

gh-250

Set up test template for stream

651fba4

gh-250

Add a test for multiple game cookies

b5097f2

gh-250 This test currently fails with the exact error I just got in the deployed app.

Handle multiple game cookies

a87f4d9

gh-250

Log the gameNameHash

995134f

gh-250 I'm not finding the cookies

Add a test for space after semicolon

d064300

gh-250

Handle space after semicolor in Cookie header

fdc4247

gh-250

Message the room about new participant joins

a094956

gh-250

Log the query error I'm currently getting

214b76c

gh-250

Identify happy path 1 case

2a41662

gh-250

Log the db query params as well, for debugging

c07966f

gh-250 My query failed

Let the stream handler post to the WSAPI

f6564b8

gh-250 https://docs.aws.amazon.com/cdk/api/v2/docs/aws-apigatewayv2-alpha-readme.html#manage-connections-permission

Let the stream handler query the DB

cad47a6

gh-250 I'm not giving write access for now, because I want to avoid an infinite loop situation if I accidentally write to the db from the stream handler.

Format the WSAPI property for API call

4df7759

gh-250

Try harder to trim wss:// from the endpoint

feccbd7

gh-250 I can still see it there in the console, and my stream handler still fails with a message about the endpoint.

Construct the WS API from its ID

6874640

gh-250 Incredibly, a replace() function that works from the Node REPL won't trim wss:// from the start of my endpoint.

Remove unused testing-library imports

f278611

gh-250

Contain WS activity within one page at a time

b101246

gh-250 Considering listeners and edge cases, it's getting too confusing for a parent component (App) to pass a stateful WebSocket to pages.

Merge new participants into roster

c554963

gh-250

Wrap the newParticipant in an object

4a5238e

gh-250

Deserialize newParticipant on the front end

ee72295

gh-250

Don't display duplicate new participants

d439266

gh-250 The first participant (the leader) was getting displayed twice.

Sort participants case-insensitively in roster

6f2ecfa

gh-250

Format sortParticipants.js

78fca98

gh-250

Insert new participant in sorted order (front-end)

d3bcd1c

gh-250

Fix the name of the disconnect handler

089d737

gh-250

douglasnaphas merged commit 3626d25 into master Apr 2, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Show new participants as they join #407

Show new participants as they join #407

douglasnaphas commented Apr 2, 2022

Show new participants as they join #407

Show new participants as they join #407

Conversation

douglasnaphas commented Apr 2, 2022