STOMP 消息高可用推送

最新推荐文章于 2024-05-19 15:16:27 发布

shengan888

最新推荐文章于 2024-05-19 15:16:27 发布

阅读量1.6k

点赞数

文章标签： java websocket 开发语言

本文链接：https://blog.csdn.net/shengan888/article/details/122971155

版权

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>