src/test/resources/html/websocket_count.html

<script type="importmap">
	{
		"imports": {
			"@stomp/rx-stomp": "https://ga.jspm.io/npm:@stomp/rx-stomp@2.0.0/esm6/index.js"
		},
		"scopes": {
			"https://ga.jspm.io/": {
				"@stomp/stompjs": "https://ga.jspm.io/npm:@stomp/stompjs@7.0.0/esm6/index.js",
				"rxjs": "https://ga.jspm.io/npm:rxjs@7.8.0/dist/esm5/index.js",
				"tslib": "https://ga.jspm.io/npm:tslib@2.5.0/modules/index.js",
				"uuid": "https://ga.jspm.io/npm:uuid@9.0.0/dist/esm-browser/index.js"
			}
		}
	}
</script>

<!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support (all except Chrome 89+) -->
<script async src="https://ga.jspm.io/npm:es-module-shims@1.5.1/dist/es-module-shims.js" crossorigin="anonymous"></script>

<script type="module">
	import { RxStomp } from "@stomp/rx-stomp";

	const re = /charset=([^()<>@,;:"/[\]?.=\s]*)/i;
	const rxStomp = new RxStomp();

	rxStomp.configure({
		webSocketFactory: () => new WebSocket('ws://localhost:8080/count'),
		connectHeaders: {
			"host": "localhost"
		}
	});

	rxStomp.activate();

	const subscription = rxStomp
		.watch({destination: "/topic/test-rx"})
		.subscribe((message) => {
			const contentType = message.headers['content-type'];
			const charset = re.test(contentType) ? re.exec(contentType)[1] : 'utf-8';
			const decoder = new TextDecoder(charset);
			console.log(decoder.decode(message?.binaryBody?.buffer));
		});

	rxStomp.publish({
		destination: "/topic/test-rx",
		body: "First message to RxStomp",
	});
</script>

<body>
	<div style="text-align: center;">
		<p>Script courtesy of <a href="https://github.com/stomp-js/rx-stomp" target="_blank">RxStomp</a></p>
		<a href="https://github.com/stomp-js/rx-stomp#browser" target="_blank">Source</a>
	</div>
</body>