Skip to content

Commit a8722de

Browse files
kum-deepakkum-deepak
committed
Update to the latest @stomp/stompjs
1 parent 10da5e4 commit a8722de

File tree

1 file changed

+33
-35
lines changed

1 file changed

+33
-35
lines changed

‎stompjs/chat/chat.html

Lines changed: 33 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,50 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<title>Simple Chat Application using StompJs</title>
6-
<link type="text/css" rel="stylesheet" href="../../assets/style.css">
4+
<meta charset="UTF-8">
5+
<title>Simple Chat Application using StompJs</title>
6+
<link type="text/css" rel="stylesheet" href="../../assets/style.css">
77
</head>
88
<body>
99
<div id="wrapper">
10-
<ul>
11-
<li>Open multiple browsers or tabs to chat across those.</li>
12-
<li>You will need a STOMP broker running. The defaults will work for fresh RabbitMQ on local machine.</li>
13-
<li>Adjust the <a href="https://stomp-js.github.io/api-docs/latest/classes/StompConfig.html">configuration</a>
14-
as per your STOMP broker.</li>
15-
<li>A guide at <a href="https://stomp-js.github.io/guide/stompjs/2018/06/28/using-stompjs-v5.html">
16-
Using StompJs v5</a></li>
17-
<li>
18-
<a href="https://stomp-js.github.io/guide/stompjs/rx-stomp/ng2-stompjs/2018/09/10/using-stomp-with-sockjs.html">
19-
Using STOMP with SockJS</a></li>
20-
<li>For details on API calls see:
21-
<a href="https://stomp-js.github.io/api-docs/latest/classes/Client.html">
22-
API Reference</a></li>
23-
<li>The html/css is heavily based on
24-
<a href="https://code.tutsplus.com/tutorials/how-to-create-a-simple-web-based-chat-application--net-5931">
25-
Simple Web-Based Chat Application</a></li>
26-
</ul>
27-
<div id="menu">
28-
<p class="welcome">Welcome, <input title="username" name="username" id="username" type="text" value="Change Me">
29-
</p>
30-
</div>
31-
32-
<div id="chatbox"></div>
33-
34-
<input name="usermsg" type="text" id="usermsg" size="63" title="usermsg"/>
35-
<button name="submitmsg" id="submitmsg">Send</button>
10+
<ul>
11+
<li>Open multiple browsers or tabs to chat across those.</li>
12+
<li>You will need a STOMP broker running. The defaults will work for fresh RabbitMQ on local machine.</li>
13+
<li>Adjust the <a href="https://stomp-js.github.io/api-docs/latest/classes/StompConfig.html">configuration</a>
14+
as per your STOMP broker.
15+
</li>
16+
<li>A guide at <a href="https://stomp-js.github.io/guide/stompjs/2018/06/28/using-stompjs-v5.html">
17+
Using StompJs v5</a></li>
18+
<li>For details on API calls see:
19+
<a href="https://stomp-js.github.io/api-docs/latest/classes/Client.html">
20+
API Reference</a></li>
21+
<li>The html/css is heavily based on
22+
<a href="https://code.tutsplus.com/tutorials/how-to-create-a-simple-web-based-chat-application--net-5931">
23+
Simple Web-Based Chat Application</a></li>
24+
</ul>
25+
<div id="menu">
26+
<p class="welcome">Welcome, <input title="username" name="username" id="username" type="text" value="Change Me">
27+
</p>
28+
</div>
29+
30+
<div id="chatbox"></div>
31+
32+
<input name="usermsg" type="text" id="usermsg" size="63" title="usermsg"/>
33+
<button name="submitmsg" id="submitmsg">Send</button>
3634
</div>
3735

3836
<!-- It is used for DOM manipulation, not mandatory to use stompjs -->
3937
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
4038

4139
<!-- Include from CDN for better performance, alternatively you can locally copy as well -->
42-
<script src="https://cdn.jsdelivr.net/npm/@stomp/stompjs@5.0.0/bundles/stomp.umd.min.js"></script>
40+
<script src="https://cdn.jsdelivr.net/npm/@stomp/stompjs@7.0.0-beta2/bundles/stomp.umd.min.js"></script>
4341

4442
<script type="application/javascript">
4543
$(function () {
4644
let stompClient;
4745

4846
const stompConfig = {
49-
// Typically login, passcode and vhost
47+
// Typically, login, passcode and vhost
5048
// Adjust these for your broker
5149
connectHeaders: {
5250
login: "guest",
@@ -70,15 +68,15 @@
7068
// The return object has a method called `unsubscribe`
7169
const subscription = stompClient.subscribe('/topic/chat', function (message) {
7270
const payload = JSON.parse(message.body);
73-
displayIncomingMessage(payload.user, payload.message);
71+
displayIncomingMessage(payload.user, payload.usrMsg);
7472
});
7573
}
7674
};
7775

7876
// Create an instance
7977
stompClient = new StompJs.Client(stompConfig);
8078

81-
// You can set additional configuration here
79+
// You can set additional configuration options here
8280

8381
// Attempt to connect
8482
stompClient.activate();
@@ -104,7 +102,7 @@
104102
return false;
105103
}
106104
if (message.length > 0) {
107-
const payLoad = { user: user, message: message };
105+
const payLoad = {user: user, usrMsg: message};
108106

109107
// You can additionally pass headers
110108
stompClient.publish({destination: '/topic/chat', body: JSON.stringify(payLoad)});
@@ -120,4 +118,4 @@
120118
})
121119
</script>
122120
</body>
123-
</html>
121+
</html>

0 commit comments

Comments
 (0)