本文主要是介绍STOMP 消息高可用推送，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1、背景
前端在部分消息需要实时推送，如果需要推送的终端比较多并且消息的准确性要求比较高，因此需要采用高可用
2、高可用方案
2.1 Websocket
Websocket+gateway网关
缺点：
- 实现起来有一定困难
- 基于gateway网关，对网关会造成一定性能压力
2.2 Stomp
借用消息中间件实现高可用，如RabbitMQ、RocketMQ都支持Stomp协议。后端直接搭建消息高可用集群，前端通过Stomp协议直接连接消息中间件，进行消息订阅和发布。应用服务同样进行消息的订阅或发布。
2.2.1 STOMP协议
STOMP即Simple (or Streaming) Text Orientated Messaging Protocol，简单(流)文本定向消息协议，它提供了一个可互操作的连接格式，允许STOMP客户端与任意STOMP消息代理（Broker）进行交互。STOMP协议由于设计简单，易于开发客户端，因此在多种语言和多种平台上得到广泛地应用。
2.2.2 前端调用示例
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>Websocket</title><noscript><h2 style="color:#ff0000">貌似你的浏览器不支持websocket</h2></noscript><script src="js/sockjs.min.js"></script><script src="js/stomp.min.js"></script><script src="js/jquery-3.4.1.min.js"></script><script type="text/javascript">var host="ws://192.168.56.101:15674/ws";function login() {host=$("#host").val();connect();}var stompClient = null;function setConnected(connected) {$('#disconnect').attr("disabled",false);$('#response').html();}function connect() {//地址+端点路径，构建websocket链接地址var headers = {"login": "admin","passcode": "admin",//虚拟主机，默认“/”"host": "/"};var username = document.getElementById("username").value;stompClient = Stomp.client(host);stompClient.connect(headers, function(frame) {setConnected(true);console.log('Connected:' + frame);showResponse('Connected');$("#message-container").show();$('#loginButton').attr("disabled",true);stompClient.subscribe('/queue/' + username, function(response) {showResponse(response.body);});},function(frame) {console.log('Connect fail:' + frame);showResponse('Connect fail:' + frame);});}function disconnect() {if (stompClient != null) {stompClient.disconnect();}setConnected(false);console.log("Disconnected");showResponse("Disconnected");}function send() {var username = $('#username').val();var message = $('#message').val();//发送消息的路径stompClient.send('/queue/' + username, {"content-type":"text/plain"}, JSON.stringify({username:username,message:message}));}function showResponse(message) {var response = $('#response');var html="<div><b>"+dateFormat("YYYY-mm-dd HH:MM:SS",new Date())+"</b> :"+message+"</div>"response.append(html);}function dateFormat(fmt, date){let ret;const opt = {"Y+": date.getFullYear().toString(), // 年"m+": (date.getMonth() + 1).toString(), // 月"d+": date.getDate().toString(), // 日"H+": date.getHours().toString(), // 时"M+": date.getMinutes().toString(), // 分"S+": date.getSeconds().toString() // 秒// 有其他格式化字符需求可以继续添加，必须转化成字符串};for (let k in opt) {ret = new RegExp("(" + k + ")").exec(fmt);if (ret) {fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))};};return fmt;}
</script>
</head>
<body><div style=""><div><span>地址</span><input type="text" placeholder="服务器地址" id="host" style="width: 200px" value="ws://192.168.56.101:15674/ws"/><br/><span>用户</span><input type="text" placeholder="请输入用户名" id="username" style="width: 200px" value="jack"/></div><button type="button" id="loginButton" onclick="login()">登录</button><button type="button" id="disconnect" onclick="disconnect();" disabled>断开连接</button></div><div style=""><div id="message-container" style="display:none"><span>消息</span><input type="text" id="message" style="width: 200px" value="hello,world!"/><button type="button" id="send" onclick="send()">发送</button></div></div><div style="height: 400px;border: 1px solid black;padding:10px;width:300px;overflow-y:auto;"><div id="response"></div></div></body>
</html>这篇关于STOMP 消息高可用推送的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
