msw 2.3.0-ws.rc-3 → 2.3.0-ws.rc-4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/browser/index.js +7 -7
- package/lib/browser/index.js.map +1 -1
- package/lib/browser/index.mjs +7 -7
- package/lib/browser/index.mjs.map +1 -1
- package/lib/core/ws/handleWebSocketEvent.js +0 -3
- package/lib/core/ws/handleWebSocketEvent.js.map +1 -1
- package/lib/core/ws/handleWebSocketEvent.mjs +0 -3
- package/lib/core/ws/handleWebSocketEvent.mjs.map +1 -1
- package/lib/core/ws/utils/attachWebSocketLogger.js +15 -9
- package/lib/core/ws/utils/attachWebSocketLogger.js.map +1 -1
- package/lib/core/ws/utils/attachWebSocketLogger.mjs +15 -9
- package/lib/core/ws/utils/attachWebSocketLogger.mjs.map +1 -1
- package/lib/iife/index.js +128 -82
- package/lib/iife/index.js.map +1 -1
- package/lib/mockServiceWorker.js +1 -1
- package/package.json +2 -2
- package/src/core/ws/handleWebSocketEvent.ts +0 -3
- package/src/core/ws/utils/attachWebSocketLogger.ts +16 -9
- package/src/core/ws.test.ts +1 -1
|
@@ -50,9 +50,6 @@ function handleWebSocketEvent(options) {
|
|
|
50
50
|
} else {
|
|
51
51
|
options?.onPassthroughConnection(connection);
|
|
52
52
|
connection.server.connect();
|
|
53
|
-
connection.client.addEventListener("message", (event) => {
|
|
54
|
-
connection.server.send(event.data);
|
|
55
|
-
});
|
|
56
53
|
}
|
|
57
54
|
});
|
|
58
55
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/ws/handleWebSocketEvent.ts"],"sourcesContent":["import type { WebSocketConnectionData } from '@mswjs/interceptors/lib/browser/interceptors/WebSocket'\nimport { RequestHandler } from '../handlers/RequestHandler'\nimport { WebSocketHandler, kDispatchEvent } from '../handlers/WebSocketHandler'\nimport { webSocketInterceptor } from './webSocketInterceptor'\n\ninterface HandleWebSocketEventOptions {\n getHandlers: () => Array<RequestHandler | WebSocketHandler>\n onMockedConnection: (connection: WebSocketConnectionData) => void\n onPassthroughConnection: (onnection: WebSocketConnectionData) => void\n}\n\nexport function handleWebSocketEvent(options: HandleWebSocketEventOptions) {\n webSocketInterceptor.on('connection', (connection) => {\n const handlers = options.getHandlers()\n\n const connectionEvent = new MessageEvent('connection', {\n data: connection,\n })\n\n // First, filter only those WebSocket handlers that\n // match the \"ws.link()\" endpoint predicate. Don't dispatch\n // anything yet so the logger can be attached to the connection\n // before it potentially sends events.\n const matchingHandlers = handlers.filter<WebSocketHandler>(\n (handler): handler is WebSocketHandler => {\n if (handler instanceof WebSocketHandler) {\n return handler.predicate({\n event: connectionEvent,\n parsedResult: handler.parse({\n event: connectionEvent,\n }),\n })\n }\n\n return false\n },\n )\n\n if (matchingHandlers.length > 0) {\n options?.onMockedConnection(connection)\n\n // Iterate over the handlers and forward the connection\n // event to WebSocket event handlers. This is equivalent\n // to dispatching that event onto multiple listeners.\n for (const handler of matchingHandlers) {\n handler[kDispatchEvent](connectionEvent)\n }\n } else {\n options?.onPassthroughConnection(connection)\n\n // If none of the \"ws\" handlers matched,\n // establish the WebSocket connection as-is.\n connection.server.connect()\n
|
|
1
|
+
{"version":3,"sources":["../../../src/core/ws/handleWebSocketEvent.ts"],"sourcesContent":["import type { WebSocketConnectionData } from '@mswjs/interceptors/lib/browser/interceptors/WebSocket'\nimport { RequestHandler } from '../handlers/RequestHandler'\nimport { WebSocketHandler, kDispatchEvent } from '../handlers/WebSocketHandler'\nimport { webSocketInterceptor } from './webSocketInterceptor'\n\ninterface HandleWebSocketEventOptions {\n getHandlers: () => Array<RequestHandler | WebSocketHandler>\n onMockedConnection: (connection: WebSocketConnectionData) => void\n onPassthroughConnection: (onnection: WebSocketConnectionData) => void\n}\n\nexport function handleWebSocketEvent(options: HandleWebSocketEventOptions) {\n webSocketInterceptor.on('connection', (connection) => {\n const handlers = options.getHandlers()\n\n const connectionEvent = new MessageEvent('connection', {\n data: connection,\n })\n\n // First, filter only those WebSocket handlers that\n // match the \"ws.link()\" endpoint predicate. Don't dispatch\n // anything yet so the logger can be attached to the connection\n // before it potentially sends events.\n const matchingHandlers = handlers.filter<WebSocketHandler>(\n (handler): handler is WebSocketHandler => {\n if (handler instanceof WebSocketHandler) {\n return handler.predicate({\n event: connectionEvent,\n parsedResult: handler.parse({\n event: connectionEvent,\n }),\n })\n }\n\n return false\n },\n )\n\n if (matchingHandlers.length > 0) {\n options?.onMockedConnection(connection)\n\n // Iterate over the handlers and forward the connection\n // event to WebSocket event handlers. This is equivalent\n // to dispatching that event onto multiple listeners.\n for (const handler of matchingHandlers) {\n handler[kDispatchEvent](connectionEvent)\n }\n } else {\n options?.onPassthroughConnection(connection)\n\n // If none of the \"ws\" handlers matched,\n // establish the WebSocket connection as-is.\n connection.server.connect()\n }\n })\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,8BAAiD;AACjD,kCAAqC;AAQ9B,SAAS,qBAAqB,SAAsC;AACzE,mDAAqB,GAAG,cAAc,CAAC,eAAe;AACpD,UAAM,WAAW,QAAQ,YAAY;AAErC,UAAM,kBAAkB,IAAI,aAAa,cAAc;AAAA,MACrD,MAAM;AAAA,IACR,CAAC;AAMD,UAAM,mBAAmB,SAAS;AAAA,MAChC,CAAC,YAAyC;AACxC,YAAI,mBAAmB,0CAAkB;AACvC,iBAAO,QAAQ,UAAU;AAAA,YACvB,OAAO;AAAA,YACP,cAAc,QAAQ,MAAM;AAAA,cAC1B,OAAO;AAAA,YACT,CAAC;AAAA,UACH,CAAC;AAAA,QACH;AAEA,eAAO;AAAA,MACT;AAAA,IACF;AAEA,QAAI,iBAAiB,SAAS,GAAG;AAC/B,eAAS,mBAAmB,UAAU;AAKtC,iBAAW,WAAW,kBAAkB;AACtC,gBAAQ,sCAAc,EAAE,eAAe;AAAA,MACzC;AAAA,IACF,OAAO;AACL,eAAS,wBAAwB,UAAU;AAI3C,iBAAW,OAAO,QAAQ;AAAA,IAC5B;AAAA,EACF,CAAC;AACH;","names":[]}
|
|
@@ -27,9 +27,6 @@ function handleWebSocketEvent(options) {
|
|
|
27
27
|
} else {
|
|
28
28
|
options?.onPassthroughConnection(connection);
|
|
29
29
|
connection.server.connect();
|
|
30
|
-
connection.client.addEventListener("message", (event) => {
|
|
31
|
-
connection.server.send(event.data);
|
|
32
|
-
});
|
|
33
30
|
}
|
|
34
31
|
});
|
|
35
32
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/ws/handleWebSocketEvent.ts"],"sourcesContent":["import type { WebSocketConnectionData } from '@mswjs/interceptors/lib/browser/interceptors/WebSocket'\nimport { RequestHandler } from '../handlers/RequestHandler'\nimport { WebSocketHandler, kDispatchEvent } from '../handlers/WebSocketHandler'\nimport { webSocketInterceptor } from './webSocketInterceptor'\n\ninterface HandleWebSocketEventOptions {\n getHandlers: () => Array<RequestHandler | WebSocketHandler>\n onMockedConnection: (connection: WebSocketConnectionData) => void\n onPassthroughConnection: (onnection: WebSocketConnectionData) => void\n}\n\nexport function handleWebSocketEvent(options: HandleWebSocketEventOptions) {\n webSocketInterceptor.on('connection', (connection) => {\n const handlers = options.getHandlers()\n\n const connectionEvent = new MessageEvent('connection', {\n data: connection,\n })\n\n // First, filter only those WebSocket handlers that\n // match the \"ws.link()\" endpoint predicate. Don't dispatch\n // anything yet so the logger can be attached to the connection\n // before it potentially sends events.\n const matchingHandlers = handlers.filter<WebSocketHandler>(\n (handler): handler is WebSocketHandler => {\n if (handler instanceof WebSocketHandler) {\n return handler.predicate({\n event: connectionEvent,\n parsedResult: handler.parse({\n event: connectionEvent,\n }),\n })\n }\n\n return false\n },\n )\n\n if (matchingHandlers.length > 0) {\n options?.onMockedConnection(connection)\n\n // Iterate over the handlers and forward the connection\n // event to WebSocket event handlers. This is equivalent\n // to dispatching that event onto multiple listeners.\n for (const handler of matchingHandlers) {\n handler[kDispatchEvent](connectionEvent)\n }\n } else {\n options?.onPassthroughConnection(connection)\n\n // If none of the \"ws\" handlers matched,\n // establish the WebSocket connection as-is.\n connection.server.connect()\n
|
|
1
|
+
{"version":3,"sources":["../../../src/core/ws/handleWebSocketEvent.ts"],"sourcesContent":["import type { WebSocketConnectionData } from '@mswjs/interceptors/lib/browser/interceptors/WebSocket'\nimport { RequestHandler } from '../handlers/RequestHandler'\nimport { WebSocketHandler, kDispatchEvent } from '../handlers/WebSocketHandler'\nimport { webSocketInterceptor } from './webSocketInterceptor'\n\ninterface HandleWebSocketEventOptions {\n getHandlers: () => Array<RequestHandler | WebSocketHandler>\n onMockedConnection: (connection: WebSocketConnectionData) => void\n onPassthroughConnection: (onnection: WebSocketConnectionData) => void\n}\n\nexport function handleWebSocketEvent(options: HandleWebSocketEventOptions) {\n webSocketInterceptor.on('connection', (connection) => {\n const handlers = options.getHandlers()\n\n const connectionEvent = new MessageEvent('connection', {\n data: connection,\n })\n\n // First, filter only those WebSocket handlers that\n // match the \"ws.link()\" endpoint predicate. Don't dispatch\n // anything yet so the logger can be attached to the connection\n // before it potentially sends events.\n const matchingHandlers = handlers.filter<WebSocketHandler>(\n (handler): handler is WebSocketHandler => {\n if (handler instanceof WebSocketHandler) {\n return handler.predicate({\n event: connectionEvent,\n parsedResult: handler.parse({\n event: connectionEvent,\n }),\n })\n }\n\n return false\n },\n )\n\n if (matchingHandlers.length > 0) {\n options?.onMockedConnection(connection)\n\n // Iterate over the handlers and forward the connection\n // event to WebSocket event handlers. This is equivalent\n // to dispatching that event onto multiple listeners.\n for (const handler of matchingHandlers) {\n handler[kDispatchEvent](connectionEvent)\n }\n } else {\n options?.onPassthroughConnection(connection)\n\n // If none of the \"ws\" handlers matched,\n // establish the WebSocket connection as-is.\n connection.server.connect()\n }\n })\n}\n"],"mappings":"AAEA,SAAS,kBAAkB,sBAAsB;AACjD,SAAS,4BAA4B;AAQ9B,SAAS,qBAAqB,SAAsC;AACzE,uBAAqB,GAAG,cAAc,CAAC,eAAe;AACpD,UAAM,WAAW,QAAQ,YAAY;AAErC,UAAM,kBAAkB,IAAI,aAAa,cAAc;AAAA,MACrD,MAAM;AAAA,IACR,CAAC;AAMD,UAAM,mBAAmB,SAAS;AAAA,MAChC,CAAC,YAAyC;AACxC,YAAI,mBAAmB,kBAAkB;AACvC,iBAAO,QAAQ,UAAU;AAAA,YACvB,OAAO;AAAA,YACP,cAAc,QAAQ,MAAM;AAAA,cAC1B,OAAO;AAAA,YACT,CAAC;AAAA,UACH,CAAC;AAAA,QACH;AAEA,eAAO;AAAA,MACT;AAAA,IACF;AAEA,QAAI,iBAAiB,SAAS,GAAG;AAC/B,eAAS,mBAAmB,UAAU;AAKtC,iBAAW,WAAW,kBAAkB;AACtC,gBAAQ,cAAc,EAAE,eAAe;AAAA,MACzC;AAAA,IACF,OAAO;AACL,eAAS,wBAAwB,UAAU;AAI3C,iBAAW,OAAO,QAAQ;AAAA,IAC5B;AAAA,EACF,CAAC;AACH;","names":[]}
|
|
@@ -32,6 +32,12 @@ var import_getTimestamp = require("../../utils/logging/getTimestamp.js");
|
|
|
32
32
|
var import_toPublicUrl = require("../../utils/request/toPublicUrl.js");
|
|
33
33
|
var import_getMessageLength = require("./getMessageLength.js");
|
|
34
34
|
var import_getPublicData = require("./getPublicData.js");
|
|
35
|
+
const colors = {
|
|
36
|
+
blue: "#3b82f6",
|
|
37
|
+
green: "#22c55e",
|
|
38
|
+
red: "#ef4444",
|
|
39
|
+
orange: "#ff6a33"
|
|
40
|
+
};
|
|
35
41
|
function attachWebSocketLogger(connection) {
|
|
36
42
|
const { client, server } = connection;
|
|
37
43
|
logConnectionOpen(client);
|
|
@@ -100,8 +106,8 @@ function attachWebSocketLogger(connection) {
|
|
|
100
106
|
function logConnectionOpen(client) {
|
|
101
107
|
const publicUrl = (0, import_toPublicUrl.toPublicUrl)(client.url);
|
|
102
108
|
console.groupCollapsed(
|
|
103
|
-
import_devUtils.devUtils.formatMessage(`${(0, import_getTimestamp.getTimestamp)()} %c\
|
|
104
|
-
|
|
109
|
+
import_devUtils.devUtils.formatMessage(`${(0, import_getTimestamp.getTimestamp)()} %c\u25B6%c ${publicUrl}`),
|
|
110
|
+
`color:${colors.blue}`,
|
|
105
111
|
"color:inherit"
|
|
106
112
|
);
|
|
107
113
|
console.log("Client:", client.socket);
|
|
@@ -114,7 +120,7 @@ async function logOutgoingClientMessage(event) {
|
|
|
114
120
|
import_devUtils.devUtils.formatMessage(
|
|
115
121
|
`${(0, import_getTimestamp.getTimestamp)({ milliseconds: true })} %c\u2191%c ${publicData} %c${byteLength}%c`
|
|
116
122
|
),
|
|
117
|
-
|
|
123
|
+
`color:${colors.green}`,
|
|
118
124
|
"color:inherit",
|
|
119
125
|
"color:gray;font-weight:normal",
|
|
120
126
|
"color:inherit;font-weight:inherit"
|
|
@@ -129,7 +135,7 @@ async function logOutgoingMockedClientMessage(event) {
|
|
|
129
135
|
import_devUtils.devUtils.formatMessage(
|
|
130
136
|
`${(0, import_getTimestamp.getTimestamp)({ milliseconds: true })} %c\u21E1%c ${publicData} %c${byteLength}%c`
|
|
131
137
|
),
|
|
132
|
-
|
|
138
|
+
`color:${colors.orange}`,
|
|
133
139
|
"color:inherit",
|
|
134
140
|
"color:gray;font-weight:normal",
|
|
135
141
|
"color:inherit;font-weight:inherit"
|
|
@@ -144,7 +150,7 @@ async function logIncomingClientMessage(event) {
|
|
|
144
150
|
import_devUtils.devUtils.formatMessage(
|
|
145
151
|
`${(0, import_getTimestamp.getTimestamp)({ milliseconds: true })} %c\u2193%c ${publicData} %c${byteLength}%c`
|
|
146
152
|
),
|
|
147
|
-
|
|
153
|
+
`color:${colors.red}`,
|
|
148
154
|
"color:inherit",
|
|
149
155
|
"color:gray;font-weight:normal",
|
|
150
156
|
"color:inherit;font-weight:inherit"
|
|
@@ -159,7 +165,7 @@ async function logIncomingMockedClientMessage(event) {
|
|
|
159
165
|
import_devUtils.devUtils.formatMessage(
|
|
160
166
|
`${(0, import_getTimestamp.getTimestamp)({ milliseconds: true })} %c\u21E3%c ${publicData} %c${byteLength}%c`
|
|
161
167
|
),
|
|
162
|
-
|
|
168
|
+
`color:${colors.orange}`,
|
|
163
169
|
"color:inherit",
|
|
164
170
|
"color:gray;font-weight:normal",
|
|
165
171
|
"color:inherit;font-weight:inherit"
|
|
@@ -174,7 +180,7 @@ function logConnectionClose(event) {
|
|
|
174
180
|
import_devUtils.devUtils.formatMessage(
|
|
175
181
|
`${(0, import_getTimestamp.getTimestamp)({ milliseconds: true })} %c\u25A0%c ${publicUrl}`
|
|
176
182
|
),
|
|
177
|
-
|
|
183
|
+
`color:${colors.blue}`,
|
|
178
184
|
"color:inherit"
|
|
179
185
|
);
|
|
180
186
|
console.log(event);
|
|
@@ -187,7 +193,7 @@ async function logIncomingServerMessage(event) {
|
|
|
187
193
|
import_devUtils.devUtils.formatMessage(
|
|
188
194
|
`${(0, import_getTimestamp.getTimestamp)({ milliseconds: true })} %c\u21E3%c ${publicData} %c${byteLength}%c`
|
|
189
195
|
),
|
|
190
|
-
|
|
196
|
+
`color:${colors.green}`,
|
|
191
197
|
"color:inherit",
|
|
192
198
|
"color:gray;font-weight:normal",
|
|
193
199
|
"color:inherit;font-weight:inherit"
|
|
@@ -202,7 +208,7 @@ function logClientError(event) {
|
|
|
202
208
|
import_devUtils.devUtils.formatMessage(
|
|
203
209
|
`${(0, import_getTimestamp.getTimestamp)({ milliseconds: true })} %c\xD7%c ${publicUrl}`
|
|
204
210
|
),
|
|
205
|
-
|
|
211
|
+
`color:${colors.blue}`,
|
|
206
212
|
"color:inherit"
|
|
207
213
|
);
|
|
208
214
|
console.log(event);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/core/ws/utils/attachWebSocketLogger.ts"],"sourcesContent":["import type {\n WebSocketClientConnection,\n WebSocketConnectionData,\n WebSocketData,\n} from '@mswjs/interceptors/WebSocket'\nimport { devUtils } from '../../utils/internal/devUtils'\nimport { getTimestamp } from '../../utils/logging/getTimestamp'\nimport { toPublicUrl } from '../../utils/request/toPublicUrl'\nimport { getMessageLength } from './getMessageLength'\nimport { getPublicData } from './getPublicData'\n\nexport function attachWebSocketLogger(\n connection: WebSocketConnectionData,\n): void {\n const { client, server } = connection\n\n logConnectionOpen(client)\n\n // Log the events sent from the WebSocket client.\n // WebSocket client connection object is written from the\n // server's perspective so these message events are outgoing.\n /**\n * @todo Provide the reference to the exact event handler\n * that called this `client.send()`.\n */\n client.addEventListener('message', (event) => {\n logOutgoingClientMessage(event)\n })\n\n client.addEventListener('close', (event) => {\n logConnectionClose(event)\n })\n\n // Log the events received by the WebSocket client.\n // \"client.socket\" references the actual WebSocket instance\n // so these message events are incoming messages.\n client.socket.addEventListener('message', (event) => {\n logIncomingClientMessage(event)\n })\n\n // Log client errors (connection closures due to errors).\n client.socket.addEventListener('error', (event) => {\n logClientError(event)\n })\n\n client.send = new Proxy(client.send, {\n apply(target, thisArg, args) {\n const [data] = args\n const messageEvent = new MessageEvent('message', { data })\n Object.defineProperties(messageEvent, {\n currentTarget: {\n enumerable: true,\n writable: false,\n value: client.socket,\n },\n target: {\n enumerable: true,\n writable: false,\n value: client.socket,\n },\n })\n logIncomingMockedClientMessage(messageEvent)\n\n return Reflect.apply(target, thisArg, args)\n },\n })\n\n server.addEventListener(\n 'open',\n () => {\n server.addEventListener('message', (event) => {\n logIncomingServerMessage(event)\n })\n },\n { once: true },\n )\n\n // Log outgoing client events initiated by the event handler.\n // The actual client never sent these but the handler did.\n server.send = new Proxy(server.send, {\n apply(target, thisArg, args) {\n const [data] = args\n const messageEvent = new MessageEvent('message', { data })\n Object.defineProperties(messageEvent, {\n currentTarget: {\n enumerable: true,\n writable: false,\n value: server['realWebSocket'],\n },\n target: {\n enumerable: true,\n writable: false,\n value: server['realWebSocket'],\n },\n })\n\n logOutgoingMockedClientMessage(messageEvent)\n\n return Reflect.apply(target, thisArg, args)\n },\n })\n}\n\n/**\n * Prints the WebSocket connection.\n * This is meant to be logged by every WebSocket handler\n * that intercepted this connection. This helps you see\n * what handlers observe this connection.\n */\nexport function logConnectionOpen(client: WebSocketClientConnection) {\n const publicUrl = toPublicUrl(client.url)\n\n console.groupCollapsed(\n devUtils.formatMessage(`${getTimestamp()} %c▸%c ${publicUrl}`),\n 'color:blue',\n 'color:inherit',\n )\n console.log('Client:', client.socket)\n console.groupEnd()\n}\n\n/**\n * Prints the outgoing client message.\n */\nexport async function logOutgoingClientMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c↑%c ${publicData} %c${byteLength}%c`,\n ),\n 'color:green',\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\n/**\n * Prints the outgoing client message initiated\n * by `server.send()` in the event handler.\n */\nexport async function logOutgoingMockedClientMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c⇡%c ${publicData} %c${byteLength}%c`,\n ),\n 'color:orangered',\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\n/**\n * Prings the message received by the WebSocket client.\n * This is fired when the \"message\" event is dispatched\n * on the actual WebSocket client instance, and translates to\n * the client receiving a message from the server.\n */\nexport async function logIncomingClientMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c↓%c ${publicData} %c${byteLength}%c`,\n ),\n 'color:red',\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\n/**\n * Prints the outgoing client message initiated\n * by `client.send()` in the event handler.\n */\nexport async function logIncomingMockedClientMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c⇣%c ${publicData} %c${byteLength}%c`,\n ),\n 'color:orangered',\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\nfunction logConnectionClose(event: CloseEvent) {\n const target = event.target as WebSocket\n const publicUrl = toPublicUrl(target.url)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c■%c ${publicUrl}`,\n ),\n 'color:blue',\n 'color:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\nexport async function logIncomingServerMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c⇣%c ${publicData} %c${byteLength}%c`,\n ),\n 'color:orangered',\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\nfunction logClientError(event: Event) {\n const socket = event.target as WebSocket\n const publicUrl = toPublicUrl(socket.url)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c\\u00D7%c ${publicUrl}`,\n ),\n 'color:red',\n 'color:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/core/ws/utils/attachWebSocketLogger.ts"],"sourcesContent":["import type {\n WebSocketClientConnection,\n WebSocketConnectionData,\n WebSocketData,\n} from '@mswjs/interceptors/WebSocket'\nimport { devUtils } from '../../utils/internal/devUtils'\nimport { getTimestamp } from '../../utils/logging/getTimestamp'\nimport { toPublicUrl } from '../../utils/request/toPublicUrl'\nimport { getMessageLength } from './getMessageLength'\nimport { getPublicData } from './getPublicData'\n\nconst colors = {\n blue: '#3b82f6',\n green: '#22c55e',\n red: '#ef4444',\n orange: '#ff6a33',\n}\n\nexport function attachWebSocketLogger(\n connection: WebSocketConnectionData,\n): void {\n const { client, server } = connection\n\n logConnectionOpen(client)\n\n // Log the events sent from the WebSocket client.\n // WebSocket client connection object is written from the\n // server's perspective so these message events are outgoing.\n /**\n * @todo Provide the reference to the exact event handler\n * that called this `client.send()`.\n */\n client.addEventListener('message', (event) => {\n logOutgoingClientMessage(event)\n })\n\n client.addEventListener('close', (event) => {\n logConnectionClose(event)\n })\n\n // Log the events received by the WebSocket client.\n // \"client.socket\" references the actual WebSocket instance\n // so these message events are incoming messages.\n client.socket.addEventListener('message', (event) => {\n logIncomingClientMessage(event)\n })\n\n // Log client errors (connection closures due to errors).\n client.socket.addEventListener('error', (event) => {\n logClientError(event)\n })\n\n client.send = new Proxy(client.send, {\n apply(target, thisArg, args) {\n const [data] = args\n const messageEvent = new MessageEvent('message', { data })\n Object.defineProperties(messageEvent, {\n currentTarget: {\n enumerable: true,\n writable: false,\n value: client.socket,\n },\n target: {\n enumerable: true,\n writable: false,\n value: client.socket,\n },\n })\n logIncomingMockedClientMessage(messageEvent)\n\n return Reflect.apply(target, thisArg, args)\n },\n })\n\n server.addEventListener(\n 'open',\n () => {\n server.addEventListener('message', (event) => {\n logIncomingServerMessage(event)\n })\n },\n { once: true },\n )\n\n // Log outgoing client events initiated by the event handler.\n // The actual client never sent these but the handler did.\n server.send = new Proxy(server.send, {\n apply(target, thisArg, args) {\n const [data] = args\n const messageEvent = new MessageEvent('message', { data })\n Object.defineProperties(messageEvent, {\n currentTarget: {\n enumerable: true,\n writable: false,\n value: server['realWebSocket'],\n },\n target: {\n enumerable: true,\n writable: false,\n value: server['realWebSocket'],\n },\n })\n\n logOutgoingMockedClientMessage(messageEvent)\n\n return Reflect.apply(target, thisArg, args)\n },\n })\n}\n\n/**\n * Prints the WebSocket connection.\n * This is meant to be logged by every WebSocket handler\n * that intercepted this connection. This helps you see\n * what handlers observe this connection.\n */\nexport function logConnectionOpen(client: WebSocketClientConnection) {\n const publicUrl = toPublicUrl(client.url)\n\n console.groupCollapsed(\n devUtils.formatMessage(`${getTimestamp()} %c▶%c ${publicUrl}`),\n `color:${colors.blue}`,\n 'color:inherit',\n )\n console.log('Client:', client.socket)\n console.groupEnd()\n}\n\n/**\n * Prints the outgoing client message.\n */\nexport async function logOutgoingClientMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c↑%c ${publicData} %c${byteLength}%c`,\n ),\n `color:${colors.green}`,\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\n/**\n * Prints the outgoing client message initiated\n * by `server.send()` in the event handler.\n */\nexport async function logOutgoingMockedClientMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c⇡%c ${publicData} %c${byteLength}%c`,\n ),\n `color:${colors.orange}`,\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\n/**\n * Prings the message received by the WebSocket client.\n * This is fired when the \"message\" event is dispatched\n * on the actual WebSocket client instance, and translates to\n * the client receiving a message from the server.\n */\nexport async function logIncomingClientMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c↓%c ${publicData} %c${byteLength}%c`,\n ),\n `color:${colors.red}`,\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\n/**\n * Prints the outgoing client message initiated\n * by `client.send()` in the event handler.\n */\nexport async function logIncomingMockedClientMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c⇣%c ${publicData} %c${byteLength}%c`,\n ),\n `color:${colors.orange}`,\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\nfunction logConnectionClose(event: CloseEvent) {\n const target = event.target as WebSocket\n const publicUrl = toPublicUrl(target.url)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c■%c ${publicUrl}`,\n ),\n `color:${colors.blue}`,\n 'color:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\nexport async function logIncomingServerMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c⇣%c ${publicData} %c${byteLength}%c`,\n ),\n `color:${colors.green}`,\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\nfunction logClientError(event: Event) {\n const socket = event.target as WebSocket\n const publicUrl = toPublicUrl(socket.url)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c\\u00D7%c ${publicUrl}`,\n ),\n `color:${colors.blue}`,\n 'color:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n"],"mappings":"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","names":[]}
|
|
@@ -3,6 +3,12 @@ import { getTimestamp } from '../../utils/logging/getTimestamp.mjs';
|
|
|
3
3
|
import { toPublicUrl } from '../../utils/request/toPublicUrl.mjs';
|
|
4
4
|
import { getMessageLength } from './getMessageLength.mjs';
|
|
5
5
|
import { getPublicData } from './getPublicData.mjs';
|
|
6
|
+
const colors = {
|
|
7
|
+
blue: "#3b82f6",
|
|
8
|
+
green: "#22c55e",
|
|
9
|
+
red: "#ef4444",
|
|
10
|
+
orange: "#ff6a33"
|
|
11
|
+
};
|
|
6
12
|
function attachWebSocketLogger(connection) {
|
|
7
13
|
const { client, server } = connection;
|
|
8
14
|
logConnectionOpen(client);
|
|
@@ -71,8 +77,8 @@ function attachWebSocketLogger(connection) {
|
|
|
71
77
|
function logConnectionOpen(client) {
|
|
72
78
|
const publicUrl = toPublicUrl(client.url);
|
|
73
79
|
console.groupCollapsed(
|
|
74
|
-
devUtils.formatMessage(`${getTimestamp()} %c\
|
|
75
|
-
|
|
80
|
+
devUtils.formatMessage(`${getTimestamp()} %c\u25B6%c ${publicUrl}`),
|
|
81
|
+
`color:${colors.blue}`,
|
|
76
82
|
"color:inherit"
|
|
77
83
|
);
|
|
78
84
|
console.log("Client:", client.socket);
|
|
@@ -85,7 +91,7 @@ async function logOutgoingClientMessage(event) {
|
|
|
85
91
|
devUtils.formatMessage(
|
|
86
92
|
`${getTimestamp({ milliseconds: true })} %c\u2191%c ${publicData} %c${byteLength}%c`
|
|
87
93
|
),
|
|
88
|
-
|
|
94
|
+
`color:${colors.green}`,
|
|
89
95
|
"color:inherit",
|
|
90
96
|
"color:gray;font-weight:normal",
|
|
91
97
|
"color:inherit;font-weight:inherit"
|
|
@@ -100,7 +106,7 @@ async function logOutgoingMockedClientMessage(event) {
|
|
|
100
106
|
devUtils.formatMessage(
|
|
101
107
|
`${getTimestamp({ milliseconds: true })} %c\u21E1%c ${publicData} %c${byteLength}%c`
|
|
102
108
|
),
|
|
103
|
-
|
|
109
|
+
`color:${colors.orange}`,
|
|
104
110
|
"color:inherit",
|
|
105
111
|
"color:gray;font-weight:normal",
|
|
106
112
|
"color:inherit;font-weight:inherit"
|
|
@@ -115,7 +121,7 @@ async function logIncomingClientMessage(event) {
|
|
|
115
121
|
devUtils.formatMessage(
|
|
116
122
|
`${getTimestamp({ milliseconds: true })} %c\u2193%c ${publicData} %c${byteLength}%c`
|
|
117
123
|
),
|
|
118
|
-
|
|
124
|
+
`color:${colors.red}`,
|
|
119
125
|
"color:inherit",
|
|
120
126
|
"color:gray;font-weight:normal",
|
|
121
127
|
"color:inherit;font-weight:inherit"
|
|
@@ -130,7 +136,7 @@ async function logIncomingMockedClientMessage(event) {
|
|
|
130
136
|
devUtils.formatMessage(
|
|
131
137
|
`${getTimestamp({ milliseconds: true })} %c\u21E3%c ${publicData} %c${byteLength}%c`
|
|
132
138
|
),
|
|
133
|
-
|
|
139
|
+
`color:${colors.orange}`,
|
|
134
140
|
"color:inherit",
|
|
135
141
|
"color:gray;font-weight:normal",
|
|
136
142
|
"color:inherit;font-weight:inherit"
|
|
@@ -145,7 +151,7 @@ function logConnectionClose(event) {
|
|
|
145
151
|
devUtils.formatMessage(
|
|
146
152
|
`${getTimestamp({ milliseconds: true })} %c\u25A0%c ${publicUrl}`
|
|
147
153
|
),
|
|
148
|
-
|
|
154
|
+
`color:${colors.blue}`,
|
|
149
155
|
"color:inherit"
|
|
150
156
|
);
|
|
151
157
|
console.log(event);
|
|
@@ -158,7 +164,7 @@ async function logIncomingServerMessage(event) {
|
|
|
158
164
|
devUtils.formatMessage(
|
|
159
165
|
`${getTimestamp({ milliseconds: true })} %c\u21E3%c ${publicData} %c${byteLength}%c`
|
|
160
166
|
),
|
|
161
|
-
|
|
167
|
+
`color:${colors.green}`,
|
|
162
168
|
"color:inherit",
|
|
163
169
|
"color:gray;font-weight:normal",
|
|
164
170
|
"color:inherit;font-weight:inherit"
|
|
@@ -173,7 +179,7 @@ function logClientError(event) {
|
|
|
173
179
|
devUtils.formatMessage(
|
|
174
180
|
`${getTimestamp({ milliseconds: true })} %c\xD7%c ${publicUrl}`
|
|
175
181
|
),
|
|
176
|
-
|
|
182
|
+
`color:${colors.blue}`,
|
|
177
183
|
"color:inherit"
|
|
178
184
|
);
|
|
179
185
|
console.log(event);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/core/ws/utils/attachWebSocketLogger.ts"],"sourcesContent":["import type {\n WebSocketClientConnection,\n WebSocketConnectionData,\n WebSocketData,\n} from '@mswjs/interceptors/WebSocket'\nimport { devUtils } from '../../utils/internal/devUtils'\nimport { getTimestamp } from '../../utils/logging/getTimestamp'\nimport { toPublicUrl } from '../../utils/request/toPublicUrl'\nimport { getMessageLength } from './getMessageLength'\nimport { getPublicData } from './getPublicData'\n\nexport function attachWebSocketLogger(\n connection: WebSocketConnectionData,\n): void {\n const { client, server } = connection\n\n logConnectionOpen(client)\n\n // Log the events sent from the WebSocket client.\n // WebSocket client connection object is written from the\n // server's perspective so these message events are outgoing.\n /**\n * @todo Provide the reference to the exact event handler\n * that called this `client.send()`.\n */\n client.addEventListener('message', (event) => {\n logOutgoingClientMessage(event)\n })\n\n client.addEventListener('close', (event) => {\n logConnectionClose(event)\n })\n\n // Log the events received by the WebSocket client.\n // \"client.socket\" references the actual WebSocket instance\n // so these message events are incoming messages.\n client.socket.addEventListener('message', (event) => {\n logIncomingClientMessage(event)\n })\n\n // Log client errors (connection closures due to errors).\n client.socket.addEventListener('error', (event) => {\n logClientError(event)\n })\n\n client.send = new Proxy(client.send, {\n apply(target, thisArg, args) {\n const [data] = args\n const messageEvent = new MessageEvent('message', { data })\n Object.defineProperties(messageEvent, {\n currentTarget: {\n enumerable: true,\n writable: false,\n value: client.socket,\n },\n target: {\n enumerable: true,\n writable: false,\n value: client.socket,\n },\n })\n logIncomingMockedClientMessage(messageEvent)\n\n return Reflect.apply(target, thisArg, args)\n },\n })\n\n server.addEventListener(\n 'open',\n () => {\n server.addEventListener('message', (event) => {\n logIncomingServerMessage(event)\n })\n },\n { once: true },\n )\n\n // Log outgoing client events initiated by the event handler.\n // The actual client never sent these but the handler did.\n server.send = new Proxy(server.send, {\n apply(target, thisArg, args) {\n const [data] = args\n const messageEvent = new MessageEvent('message', { data })\n Object.defineProperties(messageEvent, {\n currentTarget: {\n enumerable: true,\n writable: false,\n value: server['realWebSocket'],\n },\n target: {\n enumerable: true,\n writable: false,\n value: server['realWebSocket'],\n },\n })\n\n logOutgoingMockedClientMessage(messageEvent)\n\n return Reflect.apply(target, thisArg, args)\n },\n })\n}\n\n/**\n * Prints the WebSocket connection.\n * This is meant to be logged by every WebSocket handler\n * that intercepted this connection. This helps you see\n * what handlers observe this connection.\n */\nexport function logConnectionOpen(client: WebSocketClientConnection) {\n const publicUrl = toPublicUrl(client.url)\n\n console.groupCollapsed(\n devUtils.formatMessage(`${getTimestamp()} %c▸%c ${publicUrl}`),\n 'color:blue',\n 'color:inherit',\n )\n console.log('Client:', client.socket)\n console.groupEnd()\n}\n\n/**\n * Prints the outgoing client message.\n */\nexport async function logOutgoingClientMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c↑%c ${publicData} %c${byteLength}%c`,\n ),\n 'color:green',\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\n/**\n * Prints the outgoing client message initiated\n * by `server.send()` in the event handler.\n */\nexport async function logOutgoingMockedClientMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c⇡%c ${publicData} %c${byteLength}%c`,\n ),\n 'color:orangered',\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\n/**\n * Prings the message received by the WebSocket client.\n * This is fired when the \"message\" event is dispatched\n * on the actual WebSocket client instance, and translates to\n * the client receiving a message from the server.\n */\nexport async function logIncomingClientMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c↓%c ${publicData} %c${byteLength}%c`,\n ),\n 'color:red',\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\n/**\n * Prints the outgoing client message initiated\n * by `client.send()` in the event handler.\n */\nexport async function logIncomingMockedClientMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c⇣%c ${publicData} %c${byteLength}%c`,\n ),\n 'color:orangered',\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\nfunction logConnectionClose(event: CloseEvent) {\n const target = event.target as WebSocket\n const publicUrl = toPublicUrl(target.url)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c■%c ${publicUrl}`,\n ),\n 'color:blue',\n 'color:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\nexport async function logIncomingServerMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c⇣%c ${publicData} %c${byteLength}%c`,\n ),\n 'color:orangered',\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\nfunction logClientError(event: Event) {\n const socket = event.target as WebSocket\n const publicUrl = toPublicUrl(socket.url)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c\\u00D7%c ${publicUrl}`,\n ),\n 'color:red',\n 'color:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/core/ws/utils/attachWebSocketLogger.ts"],"sourcesContent":["import type {\n WebSocketClientConnection,\n WebSocketConnectionData,\n WebSocketData,\n} from '@mswjs/interceptors/WebSocket'\nimport { devUtils } from '../../utils/internal/devUtils'\nimport { getTimestamp } from '../../utils/logging/getTimestamp'\nimport { toPublicUrl } from '../../utils/request/toPublicUrl'\nimport { getMessageLength } from './getMessageLength'\nimport { getPublicData } from './getPublicData'\n\nconst colors = {\n blue: '#3b82f6',\n green: '#22c55e',\n red: '#ef4444',\n orange: '#ff6a33',\n}\n\nexport function attachWebSocketLogger(\n connection: WebSocketConnectionData,\n): void {\n const { client, server } = connection\n\n logConnectionOpen(client)\n\n // Log the events sent from the WebSocket client.\n // WebSocket client connection object is written from the\n // server's perspective so these message events are outgoing.\n /**\n * @todo Provide the reference to the exact event handler\n * that called this `client.send()`.\n */\n client.addEventListener('message', (event) => {\n logOutgoingClientMessage(event)\n })\n\n client.addEventListener('close', (event) => {\n logConnectionClose(event)\n })\n\n // Log the events received by the WebSocket client.\n // \"client.socket\" references the actual WebSocket instance\n // so these message events are incoming messages.\n client.socket.addEventListener('message', (event) => {\n logIncomingClientMessage(event)\n })\n\n // Log client errors (connection closures due to errors).\n client.socket.addEventListener('error', (event) => {\n logClientError(event)\n })\n\n client.send = new Proxy(client.send, {\n apply(target, thisArg, args) {\n const [data] = args\n const messageEvent = new MessageEvent('message', { data })\n Object.defineProperties(messageEvent, {\n currentTarget: {\n enumerable: true,\n writable: false,\n value: client.socket,\n },\n target: {\n enumerable: true,\n writable: false,\n value: client.socket,\n },\n })\n logIncomingMockedClientMessage(messageEvent)\n\n return Reflect.apply(target, thisArg, args)\n },\n })\n\n server.addEventListener(\n 'open',\n () => {\n server.addEventListener('message', (event) => {\n logIncomingServerMessage(event)\n })\n },\n { once: true },\n )\n\n // Log outgoing client events initiated by the event handler.\n // The actual client never sent these but the handler did.\n server.send = new Proxy(server.send, {\n apply(target, thisArg, args) {\n const [data] = args\n const messageEvent = new MessageEvent('message', { data })\n Object.defineProperties(messageEvent, {\n currentTarget: {\n enumerable: true,\n writable: false,\n value: server['realWebSocket'],\n },\n target: {\n enumerable: true,\n writable: false,\n value: server['realWebSocket'],\n },\n })\n\n logOutgoingMockedClientMessage(messageEvent)\n\n return Reflect.apply(target, thisArg, args)\n },\n })\n}\n\n/**\n * Prints the WebSocket connection.\n * This is meant to be logged by every WebSocket handler\n * that intercepted this connection. This helps you see\n * what handlers observe this connection.\n */\nexport function logConnectionOpen(client: WebSocketClientConnection) {\n const publicUrl = toPublicUrl(client.url)\n\n console.groupCollapsed(\n devUtils.formatMessage(`${getTimestamp()} %c▶%c ${publicUrl}`),\n `color:${colors.blue}`,\n 'color:inherit',\n )\n console.log('Client:', client.socket)\n console.groupEnd()\n}\n\n/**\n * Prints the outgoing client message.\n */\nexport async function logOutgoingClientMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c↑%c ${publicData} %c${byteLength}%c`,\n ),\n `color:${colors.green}`,\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\n/**\n * Prints the outgoing client message initiated\n * by `server.send()` in the event handler.\n */\nexport async function logOutgoingMockedClientMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c⇡%c ${publicData} %c${byteLength}%c`,\n ),\n `color:${colors.orange}`,\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\n/**\n * Prings the message received by the WebSocket client.\n * This is fired when the \"message\" event is dispatched\n * on the actual WebSocket client instance, and translates to\n * the client receiving a message from the server.\n */\nexport async function logIncomingClientMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c↓%c ${publicData} %c${byteLength}%c`,\n ),\n `color:${colors.red}`,\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\n/**\n * Prints the outgoing client message initiated\n * by `client.send()` in the event handler.\n */\nexport async function logIncomingMockedClientMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c⇣%c ${publicData} %c${byteLength}%c`,\n ),\n `color:${colors.orange}`,\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\nfunction logConnectionClose(event: CloseEvent) {\n const target = event.target as WebSocket\n const publicUrl = toPublicUrl(target.url)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c■%c ${publicUrl}`,\n ),\n `color:${colors.blue}`,\n 'color:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\nexport async function logIncomingServerMessage(\n event: MessageEvent<WebSocketData>,\n) {\n const byteLength = getMessageLength(event.data)\n const publicData = await getPublicData(event.data)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c⇣%c ${publicData} %c${byteLength}%c`,\n ),\n `color:${colors.green}`,\n 'color:inherit',\n 'color:gray;font-weight:normal',\n 'color:inherit;font-weight:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n\nfunction logClientError(event: Event) {\n const socket = event.target as WebSocket\n const publicUrl = toPublicUrl(socket.url)\n\n console.groupCollapsed(\n devUtils.formatMessage(\n `${getTimestamp({ milliseconds: true })} %c\\u00D7%c ${publicUrl}`,\n ),\n `color:${colors.blue}`,\n 'color:inherit',\n )\n console.log(event)\n console.groupEnd()\n}\n"],"mappings":"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","names":[]}
|