-
Notifications
You must be signed in to change notification settings - Fork 16
/
rx-rpc.html
130 lines (110 loc) · 4.67 KB
/
rx-rpc.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple RPC Application using RxStompRPC and RxJS</title>
<link type="text/css" rel="stylesheet" href="../../assets/style.css">
</head>
<body>
<div id="wrapper">
<ul>
<li>You will need a STOMP broker running. The defaults will work for fresh RabbitMQ on local machine.</li>
<li>Adjust the <a href="https://stomp-js.github.io/api-docs/latest/classes/RxStompConfig.html">configuration</a>
as per your STOMP broker.
</li>
<li>For details on API calls see:
<a href="https://stomp-js.github.io/api-docs/latest/classes/RxStompRPC.html">
API Reference</a>
</li>
<li>
This example uses <a href="https://www.rabbitmq.com/stomp.html#d">queue destination of RabbitMQ</a>. The queue must be created before running the sample.
The ruby server creates the queue if it is not there.
</li>
<li>Start the server by opening <a href="rx-rpc-server.html">RPC Server</a> in another browser tab/window.</li>
<li>Alternatively run any of the Ruby servers, see README for details.</li>
<li>
Clicking on submit will generate two rand integers and send to RPC server endpoint.
</li>
<li>
Click submit multiple times, you can see the results reaching back in different order than it was submitted.
</li>
<li>
See guide at
<a href="https://stomp-js.github.io/guide/rx-stomp/ng2-stompjs/2018/10/12/remote-procedure-call.html">
https://stomp-js.github.io/guide/rx-stomp/ng2-stompjs/2018/10/12/remote-procedure-call.html</a>
</li>
</ul>
<div id="chatbox"></div>
<button name="submitproblem" id="submitproblem">Submit Problem</button>
</div>
<!-- It is used for DOM manipulation, not mandatory to use stompjs -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- Include from CDN for better performance, alternatively you can locally copy as well -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/bundles/rxjs.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@stomp/[email protected]/bundles/stomp.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@stomp/[email protected]/bundles/rx-stomp.umd.min.js"></script>
<script type="application/javascript">
// Helper function to generate random integers
function randomInt(max) {
return Math.floor(Math.random() * max);
}
// Destination is RabbitMQ specific, change as per your environment
const rpcEndPoint = '/amq/queue/integer-addition';
// This is the RPC client
$(function () {
let rxStomp;
const stompConfig = {
// Typically login, passcode and vhost
// Adjust these for your broker
connectHeaders: {
login: "guest",
passcode: "guest"
},
// Broker URL, should start with ws:// or wss:// - adjust for your broker setup
brokerURL: "ws://localhost:15674/ws",
// Keep it off for production, it can be quit verbose
// Skip this key to disable
// debug: function (str) {
// console.log('STOMP: ' + str);
// },
// If disconnected, it will retry after 200ms
reconnectDelay: 200,
};
// Create an instance. The first RxStomp is the UMD module name and other is the class name
rxStomp = new RxStomp.RxStomp();
// RPC Client
const rxStompRPC = new RxStomp.RxStompRPC(rxStomp);
// You can set additional configuration here
rxStomp.configure(stompConfig);
// Attempt to connect
rxStomp.activate();
// Set the DOM event handlers must not be inside onConnect - other for each reconnect it will keep getting added
$("#submitproblem").click(function () {
if (!rxStomp.connected) {
alert("Broker disconnected, can't send message.");
return;
}
const x = randomInt(200);
const y = randomInt(200);
// Display the problem on screen
const msgDiv = displayProblem(x + " + " + y);
// The RPC call returns an Observable which will trigger only once
rxStompRPC.rpc({
destination: rpcEndPoint,
body: JSON.stringify({x: x, y: y})
}).subscribe(function (result) {
const output = JSON.parse(result.body).result;
msgDiv.find('.solution').html(output);
});
});
function displayProblem(problem) {
const msgDiv = $("<div>").addClass("msgln");
msgDiv.html('<span class="problem">[' + problem + ']: </span><span class="solution">waiting...</span>');
$("#chatbox").append(msgDiv);
msgDiv[0].scrollIntoView();
return msgDiv;
}
})
</script>
</body>
</html>