See more: Spring WebSocket reference
整個(gè)例子屬于WiseMenuFrameWork的一部分，可以將整個(gè)項(xiàng)目Clone下來(lái)，如果朋友們有需求人乓，我可以整理一個(gè)獨(dú)立的demo出來(lái)昆雀。
WebSocket前端準(zhǔn)備
前端我們需要用到兩個(gè)js文件：
sockjs.js和stomp.js
- SockJS：
SockJS 是一個(gè)瀏覽器上運(yùn)行的 JavaScript 庫(kù)，如果瀏覽器不支持 WebSocket蹂楣，該庫(kù)可以模擬對(duì) WebSocket 的支持赏参，實(shí)現(xiàn)瀏覽器和 Web 服務(wù)器之間低延遲、全雙工沿盅、跨域的通訊通道把篓。
-
Stomp
Stomp 提供了客戶端和代理之間進(jìn)行廣泛消息傳輸?shù)目蚣堋tomp 是一個(gè)非常簡(jiǎn)單而且易用的通訊協(xié)議實(shí)現(xiàn)腰涧，盡管代理端的編寫(xiě)可能非常復(fù)雜韧掩，但是編寫(xiě)一個(gè) Stomp 客戶端卻是很簡(jiǎn)單的事情，另外你可以使用 Telnet 來(lái)與你的 Stomp 代理進(jìn)行交互窖铡。
發(fā)送公告功能
html代碼
<div>
<div>
<button id="connect" onclick="connect();">Connect</button>
<button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
</div>
<div id="conversationDiv">
<p>
<label>notice content?</label>
</p>
<p>
<textarea id="name" rows="5"></textarea>
</p>
<button id="sendName" onclick="sendName();">Send</button>
<p id="response"></p>
</div>
</div>
javascript代碼
<script src="/js/sockjs-0.3.4.min.js"></script>
<script src="/js/stomp.min.js"></script>
<script>
var stompClient = null;
function setConnected(connected) {
document.getElementById('connect').disabled = connected;
document.getElementById('disconnect').disabled = !connected;
document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
document.getElementById('response').innerHTML = '';
}
// 開(kāi)啟socket連接
function connect() {
var socket = new SockJS('/socket');
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
setConnected(true);
});
}
// 斷開(kāi)socket連接
function disconnect() {
if (stompClient != null) {
stompClient.disconnect();
}
setConnected(false);
console.log("Disconnected");
}
// 向‘/app/change-notice’服務(wù)端發(fā)送消息
function sendName() {
var value = document.getElementById('name').value;
stompClient.send("/app/change-notice", {}, value);
}
connect();
</script>
相關(guān)說(shuō)明：
關(guān)于JavaScript實(shí)現(xiàn)WebSocket的功能很簡(jiǎn)單,基本分以下幾步：
開(kāi)啟Socket
-
var socket = new SockJS('/socket');先構(gòu)建一個(gè)SockJS對(duì)象 -
stompClient = Stomp.over(socket);用Stomp將SockJS進(jìn)行協(xié)議封裝 -
stompClient.connect()與服務(wù)端進(jìn)行連接疗锐，同時(shí)有一個(gè)回調(diào)函數(shù)坊谁，處理連接成功后的操作信息。
發(fā)送消息
stompClient.send("/app/change-notice", {}, value);
頁(yè)面預(yù)覽：
修改公告功能
當(dāng)我們發(fā)送公告后滑臊，將上圖的公告信息在不刷新頁(yè)面的情況下口芍，使用WebSocket將其改變。發(fā)送公告的前端代碼已經(jīng)完成雇卷，現(xiàn)在我們來(lái)寫(xiě)另一個(gè)客戶端鬓椭，用來(lái)接收第一個(gè)頁(yè)面發(fā)送的公告，展示在上圖紅框中关划。
功能比較簡(jiǎn)單小染，所以下面只給出部分js代碼：
var noticeSocket = function () {
var s = new SockJS('/socket');
var stompClient = Stomp.over(s);
stompClient.connect({}, function () {
console.log('notice socket connected!');
stompClient.subscribe('/topic/notice', function (data) {
$('.message span.content').html(data.body);
});
});
};
相關(guān)說(shuō)明：
這里與發(fā)送公告代碼不同的是，在stompClient建立連接成功之后贮折，我們要監(jiān)聽(tīng)服務(wù)端發(fā)送過(guò)來(lái)的信息裤翩，接收到之后，改變頁(yè)面上公告的內(nèi)容调榄，所以用到了stompClient.subscribe()
這個(gè)subscribe()方法功能就是定義一個(gè)訂閱地址踊赠，用來(lái)接收服務(wù)端的信息（在服務(wù)端代碼中，我們?cè)?code>@SendTo中指定了這個(gè)訂閱地址“/topic/notice”）振峻，當(dāng)收到消息后臼疫，在回調(diào)函數(shù)中處理業(yè)務(wù)邏輯。
至此扣孟，所有的功能開(kāi)發(fā)完畢烫堤！
效果演示
首先我們發(fā)布一條公告：
然后我們切到另一個(gè)頁(yè)面，發(fā)現(xiàn)內(nèi)容已變：
