?

?

WebSocket前端準備

• SockJS：
  SockJS 是一個瀏覽器上運行的 JavaScript 庫，如果瀏覽器不支持 WebSocket，該庫可以模擬對 WebSocket 的支持，實現瀏覽器和 Web 服務器之間低延遲、全雙工、跨域的通訊通道。
• Stomp
  Stomp 提供了客戶端和代理之間進行廣泛消息傳輸的框架。Stomp 是一個非常簡單而且易用的通訊協議實現，盡管代理端的編寫可能非常復雜，但是編寫一個 Stomp 客戶端卻是很簡單的事情，另外你可以使用 Telnet 來與你的 Stomp 代理進行交互。

發送公告功能

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 = '';    }    // 開啟socket連接function connect() {        var socket = new SockJS('/socket');        stompClient = Stomp.over(socket);        stompClient.connect({}, function (frame) {            setConnected(true);            });    }    // 斷開socket連接function disconnect() {        if (stompClient != null) {            stompClient.disconnect();        }        setConnected(false);        console.log("Disconnected");    }    // 向‘/app/change-notice’服務端發送消息function sendName() {        var value = document.getElementById('name').value;            stompClient.send("/app/change-notice", {}, value);    }    connect();
</script>

相關說明：
關于JavaScript實現WebSocket的功能很簡單,基本分以下幾步：

開啟Socket

1. var socket = new SockJS('/socket');?先構建一個SockJS對象
2. stompClient = Stomp.over(socket);?用Stomp將SockJS進行協議封裝
3. stompClient.connect()?與服務端進行連接，同時有一個回調函數，處理連接成功后的操作信息。

發送消息

stompClient.send("/app/change-notice", {}, value);

頁面預覽：

Paste_Image.png

修改公告功能

當我們發送公告后，將上圖的公告信息在不刷新頁面的情況下，使用WebSocket將其改變。發送公告的前端代碼已經完成，現在我們來寫另一個客戶端，用來接收第一個頁面發送的公告，展示在上圖紅框中。
功能比較簡單，所以下面只給出部分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);        });    });
};

相關說明：
這里與發送公告代碼不同的是，在stompClient建立連接成功之后，我們要監聽服務端發送過來的信息，接收到之后，改變頁面上公告的內容，所以用到了stompClient.subscribe()
這個subscribe()方法功能就是定義一個訂閱地址，用來接收服務端的信息（在服務端代碼中，我們在@SendTo中指定了這個訂閱地址“/topic/notice”），當收到消息后，在回調函數中處理業務邏輯。

至此，所有的功能開發完畢！

效果演示

首先我們發布一條公告：

然后我們切到另一個頁面，發現內容已變：