@typetron/websockets 0.4.0-rc9 → 0.5.1
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/Readme.md +86 -0
- package/index.d.ts +3 -0
- package/index.d.ts.map +1 -1
- package/index.js +17 -4
- package/index.js.map +1 -1
- package/package.json +6 -8
package/Readme.md
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
# Typetron WebSockets
|
|
2
|
+
|
|
3
|
+
This library is used to easily listen and emit WebSockets action from the browser client to a Typetron app.
|
|
4
|
+
|
|
5
|
+
#### Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
$ npm install @typetron/websockets
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Note: you need to have a module loader in your app for this to work (webpack, rollup, babel, parcel, etc.)
|
|
12
|
+
|
|
13
|
+
#### Listening for actions
|
|
14
|
+
|
|
15
|
+
You can listen to a WebSocket action sent from the server using the _on('Action name')_ method like this on the socket
|
|
16
|
+
connection:
|
|
17
|
+
|
|
18
|
+
```ts
|
|
19
|
+
socket.on('actionName').subscribe(response => {
|
|
20
|
+
console.log('Backend response', response)
|
|
21
|
+
})
|
|
22
|
+
socket.on<User>('user.update').subscribe(user => {
|
|
23
|
+
console.log('User updated', user)
|
|
24
|
+
})
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
The _on_ method will return an observable (see [RxJS](https://rxjs.dev/) for more details) that you can use to subscribe
|
|
28
|
+
to.
|
|
29
|
+
|
|
30
|
+
#### Emitting actions
|
|
31
|
+
|
|
32
|
+
If you want to signal the server with an action or when you want to send some data to it, you can use the _emit('action
|
|
33
|
+
name', data)_ method:
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
socket.emit('actionName');
|
|
37
|
+
socket.emit('actionName', "my message here");
|
|
38
|
+
socket.emit('actionName', {my: {message: "here"}});
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Be aware that if you are expecting a response from the backend, you need to subscribe to the same action (or the action
|
|
42
|
+
the server is emitting to) using the _.on_ method.
|
|
43
|
+
|
|
44
|
+
#### Emitting and listening for server response
|
|
45
|
+
|
|
46
|
+
If you want to make a single "request" to the server, meaning that you want to emit and wait for a response at the same
|
|
47
|
+
time, you can use the _request('action name', data?)_ method. This will essentially make an _emit_ and listen to its
|
|
48
|
+
response using the _on_ method for you:
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
const users = await socket.request<User[]>('users.list')
|
|
52
|
+
const savedUser = await socket.request<User>('users.save', {name: 'John'})
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
#### Message format of the WebSocket actions
|
|
56
|
+
|
|
57
|
+
The Typetron WebSocket server uses a specific message format when exchanging information between it and the clients.
|
|
58
|
+
These message have the following format:
|
|
59
|
+
_When sending a message:_
|
|
60
|
+
|
|
61
|
+
```json
|
|
62
|
+
{
|
|
63
|
+
"action": "action name",
|
|
64
|
+
"message": {
|
|
65
|
+
// optional
|
|
66
|
+
"body": "content sent to the controllers",
|
|
67
|
+
"parameters": [
|
|
68
|
+
"param1",
|
|
69
|
+
"param1"
|
|
70
|
+
]
|
|
71
|
+
// controller method parameters (optional)
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
_When receiving a message:_
|
|
77
|
+
|
|
78
|
+
```json
|
|
79
|
+
{
|
|
80
|
+
"action": "action name",
|
|
81
|
+
"status": "OK",
|
|
82
|
+
// or "Error",
|
|
83
|
+
"message": "backend response"
|
|
84
|
+
// optional
|
|
85
|
+
}
|
|
86
|
+
```
|
package/index.d.ts
CHANGED
|
@@ -8,10 +8,13 @@ export declare class Websocket {
|
|
|
8
8
|
queuedActions$: ReplaySubject<ActionRequest>;
|
|
9
9
|
errors$: Subject<ActionErrorResponse>;
|
|
10
10
|
onConnectCallback: () => void;
|
|
11
|
+
onDisconnectCallback: () => void;
|
|
11
12
|
constructor(url: string, protocols?: string | string[] | undefined);
|
|
12
13
|
get isConnected(): boolean;
|
|
14
|
+
getRequestId(): string;
|
|
13
15
|
connect(url?: string, protocols?: string | string[]): void;
|
|
14
16
|
onConnect(callback: () => void): void;
|
|
17
|
+
onDisconnect(callback: () => void): void;
|
|
15
18
|
reconnect(): void;
|
|
16
19
|
emit<T>(action: string, request?: ActionRequest['message']): void;
|
|
17
20
|
on<T>(action: string): Observable<T>;
|
package/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAM,aAAa,EAAE,OAAO,EAAc,MAAM,MAAM,CAAA;AAEzE,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,cAAc,EAA0B,MAAM,6CAA6C,CAAA;AAExI,qBAAa,SAAS;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAM,aAAa,EAAE,OAAO,EAAc,MAAM,MAAM,CAAA;AAEzE,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,cAAc,EAA0B,MAAM,6CAA6C,CAAA;AAExI,qBAAa,SAAS;IASC,GAAG,EAAE,MAAM;IAAS,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE;IARpE,MAAM,CAAC,EAAE,SAAS,CAAA;IAElB,eAAe,mCAAyC;IACxD,cAAc,+BAAqC;IACnD,OAAO,+BAAqC;IAC5C,iBAAiB,EAAE,MAAM,IAAI,CAAA;IAC7B,oBAAoB,EAAE,MAAM,IAAI,CAAA;gBAEb,GAAG,EAAE,MAAM,EAAS,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,YAAA;IAIpE,IAAI,WAAW,YAEd;IAED,YAAY;IAIZ,OAAO,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;IAuB1D,SAAS,CAAC,QAAQ,EAAE,MAAM,IAAI;IAI9B,YAAY,CAAC,QAAQ,EAAE,MAAM,IAAI;IAIjC,SAAS,IAAI,IAAI;IAQjB,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,GAAG,IAAI;IAKjE,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC;IAcpC,OAAO,CAAC,EAAC,MAAM,EAAC,EAAE;QAAC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;KAAC,GAAG,UAAU,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;IAIrE,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC;CASnF"}
|
package/index.js
CHANGED
|
@@ -5,17 +5,25 @@ const rxjs_1 = require("rxjs");
|
|
|
5
5
|
const operators_1 = require("rxjs/operators");
|
|
6
6
|
const types_1 = require("@typetron/framework/Router/Websockets/types");
|
|
7
7
|
class Websocket {
|
|
8
|
+
url;
|
|
9
|
+
protocols;
|
|
10
|
+
socket;
|
|
11
|
+
actionMessages$ = new rxjs_1.Subject();
|
|
12
|
+
queuedActions$ = new rxjs_1.ReplaySubject();
|
|
13
|
+
errors$ = new rxjs_1.Subject();
|
|
14
|
+
onConnectCallback;
|
|
15
|
+
onDisconnectCallback;
|
|
8
16
|
constructor(url, protocols) {
|
|
9
17
|
this.url = url;
|
|
10
18
|
this.protocols = protocols;
|
|
11
|
-
this.actionMessages$ = new rxjs_1.Subject();
|
|
12
|
-
this.queuedActions$ = new rxjs_1.ReplaySubject();
|
|
13
|
-
this.errors$ = new rxjs_1.Subject();
|
|
14
19
|
this.connect(url, protocols);
|
|
15
20
|
}
|
|
16
21
|
get isConnected() {
|
|
17
22
|
return this.socket?.readyState === WebSocket.OPEN;
|
|
18
23
|
}
|
|
24
|
+
getRequestId() {
|
|
25
|
+
return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
|
|
26
|
+
}
|
|
19
27
|
connect(url, protocols) {
|
|
20
28
|
const socket = new WebSocket(url ?? this.url, protocols ?? this.protocols);
|
|
21
29
|
this.socket = socket;
|
|
@@ -26,10 +34,12 @@ class Websocket {
|
|
|
26
34
|
socket.onopen = () => {
|
|
27
35
|
this.onConnectCallback?.();
|
|
28
36
|
this.queuedActions$.subscribe(message => {
|
|
37
|
+
message.$id = this.getRequestId();
|
|
29
38
|
socket.send(JSON.stringify(message));
|
|
30
39
|
});
|
|
31
40
|
};
|
|
32
41
|
socket.onclose = (action) => {
|
|
42
|
+
this.onDisconnectCallback?.();
|
|
33
43
|
this.queuedActions$ = new rxjs_1.ReplaySubject();
|
|
34
44
|
this.reconnect();
|
|
35
45
|
};
|
|
@@ -37,6 +47,9 @@ class Websocket {
|
|
|
37
47
|
onConnect(callback) {
|
|
38
48
|
this.onConnectCallback = callback;
|
|
39
49
|
}
|
|
50
|
+
onDisconnect(callback) {
|
|
51
|
+
this.onDisconnectCallback = callback;
|
|
52
|
+
}
|
|
40
53
|
reconnect() {
|
|
41
54
|
if (this.socket?.readyState === WebSocket.CLOSED) {
|
|
42
55
|
window.setTimeout(() => {
|
|
@@ -45,7 +58,7 @@ class Websocket {
|
|
|
45
58
|
}
|
|
46
59
|
}
|
|
47
60
|
emit(action, request) {
|
|
48
|
-
const actionMessage = { action, message: request };
|
|
61
|
+
const actionMessage = { $id: this.getRequestId(), action, message: request };
|
|
49
62
|
this.queuedActions$.next(actionMessage);
|
|
50
63
|
}
|
|
51
64
|
on(action) {
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,+BAAyE;AACzE,8CAA6D;AAC7D,uEAAwI;AAExI,MAAa,SAAS;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -10,25 +10,23 @@
|
|
|
10
10
|
"realtime"
|
|
11
11
|
],
|
|
12
12
|
"license": "MIT",
|
|
13
|
-
"version": "0.
|
|
13
|
+
"version": "0.5.1",
|
|
14
14
|
"author": {
|
|
15
15
|
"email": "ionel@typetron.org",
|
|
16
16
|
"name": "Ionel Lupu"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
|
-
|
|
19
|
+
"build": "tsc && cp package.json build/ && cp Readme.md build/ && cp package-lock.json build/"
|
|
20
20
|
},
|
|
21
21
|
"engines": {
|
|
22
|
-
|
|
23
|
-
},
|
|
24
|
-
"peerDependencies": {
|
|
25
|
-
"rxjs": "~7.8.1"
|
|
22
|
+
"node": ">= 20.12.0"
|
|
26
23
|
},
|
|
27
24
|
"dependencies": {
|
|
28
|
-
"
|
|
25
|
+
"rxjs": "~7.8.1",
|
|
26
|
+
"@typetron/framework": "0.5.18"
|
|
29
27
|
},
|
|
30
28
|
"devDependencies": {
|
|
31
|
-
"typescript": "5.
|
|
29
|
+
"typescript": "5.8.3"
|
|
32
30
|
},
|
|
33
31
|
"repository": {
|
|
34
32
|
"type": "git",
|