使用Apollo 的订阅/发布 在 WebSockets 上轻松实现web页消息推送

最近要用到实时消息推送到web页面,从ajax轮询,长链接,到第三方的workman的webMsgSender都试了试。考虑到我们系统用到了apache apollo来进行消息的处理。而且apollo也支持websocket通讯,所以开始研了下,并测试运用成功!

开始之前,先了解下apollo的用户及安全策略

Authorization

因为要在前端使用用户名和密码,所以必须要做好安全策略。


1
2
3
4
5
6
<broker>
 <access_rule allow="admins" action="*"/>
 <access_rule allow="users" action="connect,receive"/>
 <access_rule allow="*" action="connect" kind="connector"/>
</broker>
这里面增加规则设置users组,当然前提是在users.properties和groups.properties里增加了组users和用户user,并给予action只connect,receive.

生产者发布消息

这里还用之前的tcp来发送消息
//生产者,创建连接
 $url = "tcp://192.168.1.103:61613";
 $user = "admin";
 $pass = "password";
 $producer = new Frame_Stomp($url);
 $producer->connect($user,$pass); 
 $producer->clientId = "test";
 
 //发送信息到消息队列
 $msg = "这只是一个测试time".date("Y-m-d H:i:s"); 
 while (true) {
 //队列
 $producer->send("/queue/test", $msg, array('persistent'=>'true'));
 
 //订阅发布
 //$producer->send("/topic/test", $msg, array('persistent'=>'true'));
 sleep(1);
 }
 //断开链接
 $producer->disconnect();
 $this->setView();

消费者订阅消息

这里是本次主要的研究部分,主要用在客户端web页面上通过javascript方式订阅消费消息,达到实时推送。

<script src='/public/js/jquery/stomp.js'></script>
<script type="text/javascript">
var url = "ws://192.168.1.103:61623/stomp"; //这里的端口需要和apollo.xml的设置的一样
var client = Stomp.client(url);
var headers = {
login: 'user',
passcode: 'receiveMsgOnly',
'client-id': 'ldg'
};

//心跳设置,默认2s

client.heartbeat.outgoing = 2000;
client.heartbeat.incoming = 0;
client.connect(headers,
function(frame) {
client.subscribe("/topic/ldg",
function( message ) {
if(message.body) {
$('#infobox').text(message.body);
console.log( "got message with body " + message.body );
}
}
);

//client.send("/topic/test", { priority: 9 }, "Pub/Sub over STOMP!");
}
);

前端部分就是这么简单了。主要是用到了牛B的stomp.js.这个需要自己去下载就可以了.代码测试一切正常。

Leave a Comment.