-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
142 lines (130 loc) · 4.8 KB
/
index.html
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
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SRPC</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
<style>
select {
border: none;
border-radius: 0.1rem;
padding: 0.1rem;
background: white;
font-size: 1.1rem;
}
code {
font-size: 1rem;
}
.panel {
width: calc(50% - 1.5rem);
margin: 0.25rem;
padding: 0.5rem;
border-radius: 0.25rem;
background: #eee;
}
@media (max-width: 960px) {
.panel { width: calc(100% - 1.5rem); }
code { font-size: 0.8rem; }
}
</style>
</head>
<body style="margin: 0; padding: 1rem; font-family: sans-serif;">
<h1>SRPC</h1>
<p>Simplest Server-Client Communication for both JavaScript and Python!</p>
<p>Choose your server and client, copy the required file from the <a href="https://github.com/yzITI/srpc">Github Repository</a> to your project. Don't forget to give me a star!</p>
<p><b>There is NO dependency, NO schema, NO config. Just define functions and CALL!</b></p>
<div style="display: flex; flex-wrap: wrap;">
<div class="panel">
<div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
<h2 style="margin: 0.5rem;">Server</h2>
<select onchange="render()" id="server-select">
<option>Nodejs</option>
<option>Python</option>
<option>Aliyun FC</option>
</select>
</div>
<div id="server-content"></div>
</div>
<div class="panel">
<div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
<h2 style="margin: 0.5rem;">Client</h2>
<select onchange="render()" id="client-select">
<option>Browser</option>
<option>Nodejs</option>
<option>Python</option>
</select>
</div>
<div id="client-content"></div>
</div>
</div>
<script type="text/javascript">
const serverContents = {
'Nodejs': `<pre><code class="language-javascript">import srpc from './server-es.js'
// or using CommonJS:
// const srpc = require('./server-common.js')
srpc() // listen on port 11111 by default
// following methods are exported
srpc.test = () => 'Hello, world!'
srpc.add = (x, y) => x + y
srpc.calc = {} // function can be nested!
srpc.calc.sqrt = x => Math.sqrt(x)</code></pre>`,
'Python': `<pre><code class="language-python">from server import srpc
srpc() # listen on port 11111 by default
# Python dict uses []
srpc["test"] = lambda: "Hello, world!"
def add(x, y):
return x + y
srpc["add"] = add
import math
srpc["calc"] = { "sqrt": math.sqrt }</code></pre>`,
'Aliyun FC': `<pre><code class="language-javascript">const srpc = require('./server-fc.js')
// following methods are exported
srpc.test = () => 'Hello, world!'
srpc.add = (x, y) => x + y
srpc.calc = {}
srpc.calc.sqrt = x => Math.sqrt(x)
exports.handler = srpc() // entrance</code></pre>`
}
const clientContents = {
'Browser': `<pre><code class="language-javascript">import srpc from './client-es.js'
// or using CDN in HTML:
// <script src="https://cdn.jsdelivr.net/gh/yzITI/srpc@main/client.js"></script>
srpc('http://localhost:11111/') // initialize with endpoint
// just call the functions!
srpc.test() // Promise -> 'Hello, world!'
srpc.add(1, 2) // Promise -> 3
srpc.calc.sqrt(2) // Promise -> 1.4142135623730951</code></pre>
<b>You can play with the browser client in the console of this page!</b>`,
'Nodejs': `<pre><code class="language-javascript">import srpc from './client-es.js'
// or using CommonJS:
// const srpc = require('./client-common.js')
srpc('http://localhost:11111/') // initialize with endpoint
srpc.test() // Promise -> 'Hello, world!'
srpc.add(1, 2) // Promise -> 3
srpc.calc.sqrt(2) // Promise -> 1.4142135623730951</code></pre>`,
'Python': `<pre><code class="language-python">from client import srpc
srpc('http://localhost:11111/')
# Python takes dictionary syntax
srpc["test"]() # 'Hello, world!'
srpc["add"](1, 2) # 3
# dot also works for Python client
srpc.calc.sqrt(2) # 1.4142135623730951</code></pre>`
}
function render () {
const s = document.getElementById('server-select').value
const c = document.getElementById('client-select').value
document.getElementById('server-content').innerHTML = serverContents[s]
document.getElementById('client-content').innerHTML = clientContents[c]
setTimeout(hljs.highlightAll)
}
render()
</script>
<script type="module">
console.log('SRPC client is here! You can play with window.srpc')
import srpc from './client-es.js'
window.srpc = srpc
</script>
</body>
</html>