Adds WebSocket support #1203

shayneczyzewski · 2023-05-17T17:17:50Z

Description

Adds support for WebSockets (via Socket.IO), adds a useSocket abstraction, and demonstrates a use of shared types on the client and server.

Example from docs (https://github.com/wasp-lang/wasp/blob/e4745a7bcc20ffe3a90b48a290cca949603665d0/web/docs/guides/websockets.md) integrated into example app. You can chat on profile page. We can remove if not helpful.

TODO:

cleanup
more testing, deploy, etc.
add docs
update changelog

Select what type of change this PR introduces:

Just code/docs improvement (no functional change).
Bug fix (non-breaking change which fixes an issue).
New feature (non-breaking change which adds functionality).
Breaking change (fix or feature that would cause existing functionality to not work as expected).

Update Waspc ChangeLog and version if needed

If you did a bug fix, new feature, or breaking change, that affects waspc, make sure you satisfy the following:

I updated ChangeLog.md with description of the change this PR introduces.
I bumped waspc version in waspc.cabal to reflect changes I introduced, with regards to the version of the latest wasp release, if the bump was needed.

waspc/data/Generator/templates/react-app/src/socket.ts

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

Martinsos

LGTM, left some comments but overall looking great!
Will let @sodic do the final approval.

web/docs/guides/websockets.md

sodic

Great work! Left several comments, nothing major.

sodic · 2023-06-16T08:57:43Z

waspc/examples/todoApp/src/client/pages/ProfilePage.tsx

@@ -13,10 +14,38 @@ export const ProfilePage = ({
 }: {
  user: User
 }) => {
+  const [messages, setMessages] = useState<
+    { id: string; username: string; text: string }[]


It would be nice if we could somehow reuse this type (the user has already defined it once).

That would be nice, the user could hack it around with getting the ServerToClient events and using the Parameters

We agreed to not doing anything fancy for now 👍

Users can define their payload types in the shared dir and import them if they wish on the client and the server.

waspc/examples/todoApp/src/client/pages/ProfilePage.tsx

sodic · 2023-06-16T09:02:05Z

waspc/examples/todoApp/src/server/webSocket.ts

+export interface ServerToClientEvents {
+  chatMessage: (msg: { id: string; username: string; text: string }) => void
+}
+
+export interface ClientToServerEvents {
+  chatMessage: (msg: string) => void
+}
+
+export interface InterServerEvents {}


Why are we exporting these types? Does making them private break full-stack type safety? I've removed the exports and everything seems to be working fine.

sodic · 2023-06-16T09:05:02Z

waspc/data/Generator/templates/server/src/webSocket.ts

Can we format this file (after generation) and apply the formatting here?

Sure, that's a good idea 👍

sodic · 2023-06-16T09:30:08Z

waspc/data/Generator/templates/react-app/src/webSocket.ts

+    // TODO(miho): This is a hack for type errors we are getting
+    // from socket.on when passing in "handler" directly
+    const handlerInstance: any = (event: any) => {
+      handler(event);
+    };


Can we elaborate on the error and list a proper fix (if we know it)?

I get the following error:

Argument of type 'ServerToClientEvents[Event]' is not assignable to parameter of type 'FallbackToUntypedListener<Event extends "disconnect" | "connect" | "connect_error" ? SocketReservedEvents[Event] : Event extends "chatMessage" ? ServerToClientEvents[Event] : never>'. Type '(msg: { id: string; username: string; text: string; }) => void' is not assignable to type 'FallbackToUntypedListener<Event extends "disconnect" | "connect" | "connect_error" ? SocketReservedEvents[Event] : Event extends "chatMessage" ? ServerToClientEvents[Event] : never>'.

I haven't been able to figure out why that happens after digging through socket-io's source code.

And I haven't been able to find a fully working Typescript socket.io example, but I did find this workaround.

I've added a more detailed comment 👍

How come you didn't use as keyof ServerToClientEvents in the end?

I've forgot about that change 🤦‍♂️ I did it in the generated code and not in the template.

Updated the code to use the cast 👍

waspc/data/Generator/templates/react-app/src/storage.ts

waspc/data/Generator/templates/react-app/src/webSocket.ts

waspc/src/Wasp/Generator/ServerGenerator/WebSocketG.hs

waspc/src/Wasp/Generator/WebAppGenerator.hs

waspc/data/Generator/templates/react-app/src/webSocket.ts

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

sodic · 2023-06-16T15:09:28Z

waspc/examples/todoApp/src/client/pages/ProfilePage.tsx

+  useSocketListener('chatMessage', logMessage)
+
+  function logMessage(msg: ServerToClientPayload<'chatMessage'>) {
+    setMessages((priorMessages) => [msg, ...priorMessages])
+  }


Defining this function inline will allow TS to infer the type of msg without relying on you to specify it explitily.

sodic · 2023-06-16T15:13:11Z

web/docs/typescript.md

+## WebSocket full-stack type support
+
+
+Defining event names with the matching payload types on the server makes those types exposed automatically on the client. This allows you avoid making mistakes when emitting events or handling them.


This allows you avoid making mistakes -> This helps you avoid mistakes

sodic · 2023-06-16T15:14:18Z

web/docs/typescript.md

+
+The `useSocketListener` hook will give you a type-safe event handler. The event name and its payload type are defined on the server.
+
+You can additonally use the `ClientToServerPayload` and `ServerToClientPayload` helper types to get the payload type for a specific event (it extract the message type from the event handler type).


I'd remove the stuff in parentheses, they don't need to know how it does it

sodic · 2023-06-16T15:15:34Z

waspc/data/Generator/templates/server/src/webSocket.ts

@@ -39,7 +33,7 @@ export interface WaspSocketData {
 }

 type WebSocketFn = typeof {= userWebSocketFn.importIdentifier =}
-type ServerType = Parameters<WebSocketFn>[0]
+export type ServerType = Parameters<WebSocketFn>[0]


Can we put all exports at the top?

sodic · 2023-06-16T15:21:38Z

waspc/data/Generator/templates/server/src/webSocket.ts

Feels a little strange to have a folder called webSocket and a file called webSocket.ts at the same level (we're not in Haskell, after all :). Especially because that folder only contains a single file.

Maybe we can call this one webSocket/index.ts or something?

Makes sense 👍

sodic · 2023-06-16T15:22:50Z

waspc/data/Generator/templates/server/src/webSocket/server.ts

Maybe initalization.ts is a better name than server.ts? Not sure.

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

shayneczyzewski added 16 commits May 12, 2023 09:17

importing socket.io into index.html

444b260

initializing websockets on server

87588d8

basic end to end connectivity

dc3529a

have ping pong working, debug not working though

12933c0

remove debug

cf825a4

Merge remote-tracking branch 'origin/main' into shayne-websockets

6a1024d

putting user in when we can

9e3072a

refactor some

2eeba96

more refactoring

02528da

basic chat running

7533109

more cleanup

05925e5

starting to use types

38a3870

sharing types across client and server

36d314d

formatting

4d15b3a

adding entities to ws

f41b9d0

adding missing type

02d5bd2

shayneczyzewski commented May 17, 2023

View reviewed changes

waspc/data/Generator/templates/react-app/src/socket.ts Outdated Show resolved Hide resolved

shayneczyzewski added 11 commits May 22, 2023 13:49

starting to refine useSocket interface

97c7992

playing with useSocket return order

a653503

starting cleanup

6451baa

still more cleanup

f2b4066

fix unit tests

e1c8b8c

DRY things up

d9f1d30

e2e

26ef53a

tiny doc fix

036910c

Merge remote-tracking branch 'origin/main' into shayne-websockets

fd92568

no longer save messages as tasks

cafbaa2

adding some docs

e4745a7

shayneczyzewski changed the title ~~Draft: Adds websocket support~~ Adds WebSocket support May 26, 2023

shayneczyzewski marked this pull request as ready for review May 26, 2023 18:06

infomiho added 5 commits June 13, 2023 12:25

Merge branch 'main' into shayne-websockets

dca5937

Fixes a warning in unit tests

27b079b

Remove websockets test app

955d4bb

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

Remove shared socket data. Update docs.

93d36a1

Updates e2e tests

04a14c4

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

Martinsos approved these changes Jun 14, 2023

View reviewed changes

web/docs/guides/websockets.md Outdated Show resolved Hide resolved

web/docs/guides/websockets.md Show resolved Hide resolved

infomiho added 2 commits June 14, 2023 11:55

Provide all entities by default

5235bf7

Merge branch 'main' into shayne-websockets

128fdde

sodic reviewed Jun 16, 2023

View reviewed changes

infomiho added 4 commits June 16, 2023 13:49

Updates formatting and comment

e457ad4

Exports types for websockets directly

bc8b4fd

Updates websockets impl file

4e1186e

PR comments

bec1af4

sodic reviewed Jun 16, 2023

View reviewed changes

waspc/data/Generator/templates/react-app/src/webSocket.ts Outdated Show resolved Hide resolved

infomiho added 4 commits June 16, 2023 14:40

Updates docs and types

8e38d3b

PR comments

51e7c50

Updates e2e tests

b1310ea

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

Fixes full stack type safety

acaa98c

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

sodic reviewed Jun 16, 2023

View reviewed changes

infomiho added 4 commits June 16, 2023 18:40

PR comments

6a1ca64

Merge branch 'main' into shayne-websockets

ce348ea

Formatting

c23174a

E2e tests update

b398bf1

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

infomiho merged commit 3e85b0f into main Jun 19, 2023

infomiho deleted the shayne-websockets branch June 19, 2023 08:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds WebSocket support #1203

Adds WebSocket support #1203

shayneczyzewski commented May 17, 2023 •

edited

Loading

Martinsos left a comment

sodic left a comment

sodic Jun 16, 2023

infomiho Jun 16, 2023

infomiho Jun 16, 2023

sodic Jun 16, 2023

sodic Jun 16, 2023

infomiho Jun 16, 2023

sodic Jun 16, 2023

infomiho Jun 16, 2023

infomiho Jun 16, 2023

infomiho Jun 16, 2023

sodic Jun 16, 2023

infomiho Jun 16, 2023

infomiho Jun 16, 2023

sodic Jun 16, 2023

sodic Jun 16, 2023

sodic Jun 16, 2023

sodic Jun 16, 2023

sodic Jun 16, 2023 •

edited

Loading

infomiho Jun 16, 2023

sodic Jun 16, 2023

		## WebSocket full-stack type support


		Defining event names with the matching payload types on the server makes those types exposed automatically on the client. This allows you avoid making mistakes when emitting events or handling them.


		The `useSocketListener` hook will give you a type-safe event handler. The event name and its payload type are defined on the server.

		You can additonally use the `ClientToServerPayload` and `ServerToClientPayload` helper types to get the payload type for a specific event (it extract the message type from the event handler type).

Adds WebSocket support #1203

Adds WebSocket support #1203

Conversation

shayneczyzewski commented May 17, 2023 • edited Loading

Description

Select what type of change this PR introduces:

Update Waspc ChangeLog and version if needed

Martinsos left a comment

Choose a reason for hiding this comment

sodic left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sodic Jun 16, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shayneczyzewski commented May 17, 2023 •

edited

Loading

sodic Jun 16, 2023 •

edited

Loading