Initial WebSocket support #5043

gatzjames · 2022-08-04T09:11:22Z

Decision to make before merge:

timeline format -> array -> newline use responseId for timeline name #5124
review/simplify preload api shape/ipc channel naming WebSocket ipc typing proposal #5125
decision about consistent model and export naming conventions
persisted payloads
websocketrequest data model review
websocketresponse/response data model review -> bodyPath -> eventLogPath
event log bug

Nitpicks

reverse event log
dupe connection success race condition
remove send message event from timeline
rename icn-ellipsis-circle2.svg -> icn-checkmark-circle.svg

naming decision notes:

~~two words "WebSocket", "web-socket", "web_socket", "webSocket"~~
~~one word, with an abbreviation exception "WebSocket", "websocket", "WS"~~
redux implementation forces us to be inconsistent, it lowercases the first letter of the model type and forces us to set the model type to WebsocketRequest creating an exception. Proposal -> Proposal/conventional-websocket-naming #5158
default decision is for filenames to be treat websocket/s as one word and variables and types to treat W/webSocket as two words.

packages/insomnia/src/ui/components/dropdowns/websocket-request-actions-dropdown.tsx

* wip * add fail safe Co-authored-by: Mark Kim <[email protected]>

* add url to ws-request model * fix webSocketRequest typo and add url * add websocket api and expose it through preload ipc * add typings Co-authored-by: Mark Kim <[email protected]>

* add websocket action bar and its components * remove comments * clean up * reflect on the electron api * remove unused files * import name change * add styling * remove commet * add suggested changes * remove default value

* add websocket actions dropdown * add actions to websocket request in sidebar

* Update event types to improve inference * Update websocket response pane to fetch/subscribe and display the events

Co-authored-by: Dimitri Mitropoulos <[email protected]>

* add initial changes for websocket message * add abstraction for db operation and websocket operation * remove console * add rename * add basic testing * add basic testing * add unit tests * add form event type * add comments * disallow exporting context directly * add suggested changes * refresh the query * using useDeepCompareEffect * rename variable * add mock * clean up * clean up * correct the file name * add some changes * removing nedb-context and its hooks * remove database changes for event sending

* fix typings * add jest import

* save changes * add styles and move files around * remove unused code * clean up some components * add clean up * add timestamp component * add unit tests * add case * add style changes

* first ui pass * extract and wire up bulk editor * raise ready state, move send * add upgrade header debug logs * can pass header to websocket upgrade * implement readOnly headers * add upgrade event and sent headers * clean up * fill out http upgrade into the event * change upgrade message * read only headers while connected * remove upgrade event * revert bulk editor change * fix header editable toggle * add nunjucks todos * improve readOnly implementation * disable codemirror/nunjucks for websocket headers * take calculated headers out of the data model * move hardcoded default headers down the tree * fix request url rendering issue * removed spammy warning * clarify prop name * refine pair typing * change placeholder * remove readOnly header property * fix readOnly header layout

…t-actions-dropdown.tsx

* first pass as event * add handshake ui * add timeline tab * simplify ResponseTimelineViewer * transform res debug modal to change timeline props * decouple timeline fetching from timeline component * timeline ui pass * record headers in request and response models * can view timeline history * write timeline to file * some timeline * can persist event logs * put interface beside usage * add note * add event log history * remove table event row * tidying up * make ws colors match * enable multiple open connections * close open connections at app exit * remove old test * Update packages/insomnia/src/models/request-version.ts * fix type * default readystate * fix preview css scroll Co-authored-by: James Gatz <[email protected]>

* INS-1788: Add control flow for responsiveness. This prevents events from flooding the UI thread entirely. * Add additional code comments. * fixup: webSocketEvent -> webSocketEvents

* remove unused context provider * show errors in event tab * updates timeline with message and close * clean up * show errors in timeline * fix WebSocket capitalisation * make timeline reader specific to ws * write outbound messages to the timeline * fix type

* close ws connection when response is changed * add delete logic for the queue mapg * set error response to active response * useRef for CodeEditor * extract closeRequest * use requestId to eliminate inconsistencies * refactor extract clean up methods * timeline feedback * change type annotation * fix type * Revert "use requestId to eliminate inconsistencies" This reverts commit 98335a9. Co-authored-by: Mark Kim <[email protected]>

* hard code sending and storing to true * make tab naming consistent * hard code cookie settings to false * fix headers isDisabled bug

* add minimal change to the auth flow * add disable state * adding dropdown disable * simplify reducer * fix lint Co-authored-by: jackkav <[email protected]>

…ction (#5120) * add auth to the header * remove console log * remove unneeded async * add success redirect logic to websocket server * add unexpected-response handler Co-authored-by: jackkav <[email protected]>

* add status related changes * text label change

* make consistent with main bridge * rename webSocket * remove deviated mock * use consistent arrow function defintions * Update packages/insomnia/src/main/network/websocket.ts Co-authored-by: James Gatz <[email protected]> Co-authored-by: James Gatz <[email protected]>

* Fix failing websocket smoke test * Add remaining websocket smoke server endopints to fixtures * Add checks for basic-auth, bearer and redirect * Rm assertion

…ers and urls (#5134)

* INS-1844: Implement basic event view functionality * CSS fix to align Preview button with tab buttons.

* Reverse the event log order in the view and subscribe to messages after the latest

* init websocket-response model * add websocket response model * remove unused timeline getter * remove unused functionality from the ws-response model

* add empty state * use the empty state pane Co-authored-by: gatzjames <[email protected]>

* just poll * remove cts and eventlog channel

* remove unused names * fix copypasta icon * ensure all subcompnent drop state on request change * move empty state to response pane

* remove valid value check in the headers * add header name filtering

filfreire

🎉
https://www.youtube.com/watch?v=T-v20t_puwE

marckong · 2022-09-13T19:46:39Z

packages/insomnia/src/ui/components/websockets/websocket-request-pane.tsx

  environmentId,
 }) => {
  const editorRef = useRef<UnconnectedCodeEditor>(null);
+  useEffect(() => {
+    let isMounted = true;


I wonder what was the reason for this check for isMounted?

gatzjames force-pushed the websockets branch from b5d46f5 to be0f5db Compare August 4, 2022 09:11

filfreire added the A-websockets Area: Websockets label Aug 4, 2022

gatzjames force-pushed the websockets branch from 5ca1994 to 415414c Compare August 5, 2022 12:57

jackkav reviewed Aug 15, 2022

View reviewed changes

packages/insomnia/src/ui/components/dropdowns/websocket-request-actions-dropdown.tsx Outdated Show resolved Hide resolved

filfreire force-pushed the websockets branch from c45ebf9 to 4f63cda Compare September 6, 2022 11:13

jackkav marked this pull request as ready for review September 9, 2022 11:54

dimitropoulos and others added 24 commits September 9, 2022 13:55

[INS-1697] Create WebSocket Request (#5041)

ce1e0c1

* wip * add fail safe Co-authored-by: Mark Kim <[email protected]>

Websockets IPC API (#5044)

9474761

* add url to ws-request model * fix webSocketRequest typo and add url * add websocket api and expose it through preload ipc * add typings Co-authored-by: Mark Kim <[email protected]>

[INS-1701] Create/Close Websocket Connection (#5046)

fb08a08

* add websocket action bar and its components * remove comments * clean up * reflect on the electron api * remove unused files * import name change * add styling * remove commet * add suggested changes * remove default value

Add WebSocketRequest to sidebar and update types (#5048)

815d978

[INS-1700] Delete Websocket Request (#5055)

074acd4

* add websocket actions dropdown * add actions to websocket request in sidebar

[INS-1703] Display WebSocket messages - first pass (#5054)

4c51110

* Update event types to improve inference * Update websocket response pane to fetch/subscribe and display the events

[INS-1693] Add WS echo server for smoke tests (#5050)

0e21742

Co-authored-by: Dimitri Mitropoulos <[email protected]>

fix sidebar unit tests (#5064)

07005cb

[INS-1776] adds ws dependency explicitly (#5066)

458a3f1

[INS-1778] Fix Global Module Typing Issue (#5065)

ed9584d

* fix typings * add jest import

[INS-1703] View WebSocket Messages (#5074)

0cecb7e

* save changes * add styles and move files around * remove unused code * clean up some components * add clean up * add timestamp component * add unit tests * add case * add style changes

Update packages/insomnia/src/ui/components/dropdowns/websocket-reques…

d52610c

…t-actions-dropdown.tsx

INS-1788: Add control flow to improve responsiveness. (#5094)

b18519e

* INS-1788: Add control flow for responsiveness. This prevents events from flooding the UI thread entirely. * Add additional code comments. * fixup: webSocketEvent -> webSocketEvents

display response headers (#5102)

a3aa466

Make the head row sticky in the events table (#5103)

b07305a

Add client certificate support to websocket connections (#5112)

8cbf4d0

[INS-1803] show cookie tab in response pane (#5105)

06ef212

* hard code sending and storing to true * make tab naming consistent * hard code cookie settings to false * fix headers isDisabled bug

[INS-1805] Add Auth Header Tab (#5115)

bbb61f5

* add minimal change to the auth flow * add disable state * adding dropdown disable * simplify reducer * fix lint Co-authored-by: jackkav <[email protected]>

[INS-1839] Rename tab Header everywhere (#5119)

703438f

jackkav and others added 21 commits September 9, 2022 13:55

use responseId for timeline name (#5124)

61b6755

add react-virtual to virtualize the event log view (#5126)

32b49fe

[INS-1833] Include Auth Header in Headers mapping for WebSocket Conne…

0d436fc

…ction (#5120) * add auth to the header * remove console log * remove unneeded async * add success redirect logic to websocket server * add unexpected-response handler Co-authored-by: jackkav <[email protected]>

remove digest auth (#5129)

9ae4de1

remove auth header and outbound message timeline (#5130)

839ac9e

[INS-1840] Add Connected Status Label and Extras (#5131)

0dddf4a

* add status related changes * text label change

Set the environment for websocket responses (#5132)

fbb471f

first pass (#5123)

a511e43

[INS-1843] Add more checks to WS smoke test (#5138)

b719ec4

* Fix failing websocket smoke test * Add remaining websocket smoke server endopints to fixtures * Add checks for basic-auth, bearer and redirect * Rm assertion

can select payload type (#5133)

f42d528

Implement nunjucks rendering for websocket urls, authentication, head…

c45f53e

…ers and urls (#5134)

fix websocket->webSocket (#5142)

57304f8

bug fix (#5144)

57b495b

INS-1844: Implement basic event view functionality. (#5146)

e62281f

* INS-1844: Implement basic event view functionality * CSS fix to align Preview button with tab buttons.

Reverse the order of WebSocket events (#5148)

f90e214

* Reverse the event log order in the view and subscribe to messages after the latest

WebSocket response model (#5147)

2ba8bf5

* init websocket-response model * add websocket response model * remove unused timeline getter * remove unused functionality from the ws-response model

can select and save payload message and preview mode (#5143)

44a2896

[INS-1838] Add Empty State (#5140)

2a5d71f

* add empty state * use the empty state pane Co-authored-by: gatzjames <[email protected]>

Bug/stabilise-ws-fetch-method (#5152)

a85a25a

* just poll * remove cts and eventlog channel

Fix/nitpicks (#5156)

d49c913

* remove unused names * fix copypasta icon * ensure all subcompnent drop state on request change * move empty state to response pane

jackkav force-pushed the websockets branch from 271ccf6 to d49c913 Compare September 9, 2022 11:55

jackkav and others added 2 commits September 9, 2022 16:09

add websockets to quick switch (#5159)

0bdbd1d

[INS-1800] Remove value validity check in the WebSocket headers (#5154)

03c4374

* remove valid value check in the headers * add header name filtering

jackkav enabled auto-merge (squash) September 9, 2022 14:30

filfreire approved these changes Sep 9, 2022

View reviewed changes

jackkav approved these changes Sep 9, 2022

View reviewed changes

jackkav merged commit 0373bb5 into develop Sep 9, 2022

jackkav deleted the websockets branch September 9, 2022 14:53

marckong reviewed Sep 13, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Initial WebSocket support #5043

Initial WebSocket support #5043

gatzjames commented Aug 4, 2022 •

edited by jackkav

Loading

filfreire left a comment

marckong Sep 13, 2022

Initial WebSocket support #5043

Initial WebSocket support #5043

Conversation

gatzjames commented Aug 4, 2022 • edited by jackkav Loading

filfreire left a comment

Choose a reason for hiding this comment

marckong Sep 13, 2022

Choose a reason for hiding this comment

gatzjames commented Aug 4, 2022 •

edited by jackkav

Loading