-
Notifications
You must be signed in to change notification settings - Fork 16
/
rx-chat.html
109 lines (93 loc) · 3.97 KB
/
rx-chat.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Chat Application using RxStomp and RxJS</title>
<link type="text/css" rel="stylesheet" href="../../assets/style.css">
</head>
<body>
<div id="wrapper">
<ul>
<li>Open multiple browsers or tabs to chat across those.</li>
<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/RxStomp.html">
API Reference</a></li>
<li>The html/css is heavily based on
<a href="https://code.tutsplus.com/tutorials/how-to-create-a-simple-web-based-chat-application--net-5931">
Simple Web-Based Chat Application</a></li>
<li>
This example does not use rollup, webpack or anything similar. It directly includes all libraries
from CDN.
</li>
</ul>
<div id="menu">
<p class="welcome">Welcome, <input title="username" name="username" id="username" type="text" value="Change Me">
</p>
</div>
<div id="chatbox"></div>
<input name="usermsg" type="text" id="usermsg" size="63" title="usermsg"/>
<button name="submitmsg" id="submitmsg">Send</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]/dist/bundles/rxjs.umd.min.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">
$(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 the other is the class name
rxStomp = new RxStomp.RxStomp();
// You can set additional configuration options here
rxStomp.configure(stompConfig);
// Attempt to connect
rxStomp.activate();
// Watch will return an RxJS Observable which will yield messages for that end point.
// You can call all RxJS operations like `map`, `filter`, etc. on this
const rxJsSubscription = rxStomp.watch('/topic/chat').pipe(rxjs.map(function (message) {
return JSON.parse(message.body);
})).subscribe(({user, usrMsg}) => {
displayIncomingMessage(user, usrMsg);
});
// For the demo, set a random display user name for the chat, just feels nice
$("#username").val("User " + Math.round(Math.random() * 100));
$("#submitmsg").click(function () {
const user = $("#username").val();
const usrMsg = $("#usermsg").val();
if (usrMsg.length > 0) {
// You can additionally pass headers
rxStomp.publish({destination: '/topic/chat', body: JSON.stringify({user, usrMsg})});
}
$("#usermsg").val("");
});
function displayIncomingMessage(user, message) {
const msgDiv = $("<div>").addClass("msgln");
msgDiv.html('<span class="user">[' + user + ']: </span><span class="message">' + message + '</span>');
$("#chatbox").append(msgDiv);
}
})
</script>
</body>
</html>