1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
## Trame client library for plain JS
This library aims to simplify integration of any web client with a trame server.
## Examples
- [CDN](./examples/cdn/)
- [Vite](./examples/vite/)
## Usage
```js
const trame = new Trame()
await trame.connect({ application: 'trame' });
// State handing
trame.state.set("a", 5);
console.log(trame.state.get("b"));
trame.state.update({
a: 1,
b: 2,
});
trame.state.watch(["a"], (a) => {
console.log(`a changed to ${a}`);
})
// Method call on Python
const result = await trame.trigger("name", [arg_0, arg_1], { kwarg_0: 1, kwarg_1: 2 });
// Register JS object so Python can make method calls
// py => server.js_call("name", "method", arg_0, arg_1)
trame.refs["name", js_object];
```
More API examples
```js
// Connect to server and wait until connected
// - sessionURL
// - sessionManagerURL
await trame.connect({ application: "trame" });
// custom serializer registration for method/state
trame.registerDecorator()
// Listen to connection status change
const unsubscribeOnClose = trame.onClose((info) => {
console.log("connection closed", info);
});
unsubscribeOnClose();
// Listen to connection status change
const unsubscribeOnError = trame.onError((info) => {
console.log("connection error", info);
});
unsubscribeOnError();
// Listen to connection status change
const unsubscribeOnDisconnect = trame.onDisconnect(() => {
console.log("Client is disconnecting");
});
unsubscribeOnDisconnect();
// Ask server to exit and disconnect
trame.exit(timeout);
// Disconnect from server but don't ask the server to exit
trame.disconnect();
// Try to reconnect using the same info as before after a onClose
await trame.reconnect();
// -----------------------------------
// WsClient API
// -----------------------------------
console.log(trame.client);
// -----------------------------------
// State API
// -----------------------------------
console.log(trame.state);
// set
trame.state.set("a", 2);
trame.state.set('b', 3);
trame.state.update({
a: 2.5,
b: 3.5,
c: 4.5,
})
// get
console.log(trame.state.get("c"));
console.log(trame.state.get('a'));
// force send to server
trame.state.flush('a', 'b');
// listener for state change
const unsubscribe = trame.state.onChange(({ type, keys }) => {
if (type === "dirty-state") {
console.log(`${keys} have changed`);
} else if (type === "new-keys") {
console.log(`${keys} have been added`);
} else {
console.log(`Unkown type(${type}) of message`)
}
});
unsubscribe();
// simpler api for state change
const unsubscribe2 = trame.state.watch(
["a", "b", "c"],
(a, b, c) => {
console.log(`a(${a}) or b(${b}) or c(${c}) have changed`);
}
);
unsubscribe2();
// -----------------------------------
// Method execution API
// -----------------------------------
// method execution on Python side
trame.trigger("name", ['arg_0', 'arg_1'], { kwarg_0: 1, kwarg_1: 2 });
// object registration on JS side so Python can execute methods on them
trame.refs["ref_name"] = console;
```
|
