2019獨角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

?

?

WebSocket前端準(zhǔn)備

• SockJS：
  SockJS 是一個瀏覽器上運行的 JavaScript 庫，如果瀏覽器不支持 WebSocket，該庫可以模擬對 WebSocket 的支持，實現(xiàn)瀏覽器和 Web 服務(wù)器之間低延遲、全雙工、跨域的通訊通道。
• Stomp
  Stomp 提供了客戶端和代理之間進(jìn)行廣泛消息傳輸?shù)目蚣堋tomp 是一個非常簡單而且易用的通訊協(xié)議實現(xiàn)，盡管代理端的編寫可能非常復(fù)雜，但是編寫一個 Stomp 客戶端卻是很簡單的事情，另外你可以使用 Telnet 來與你的 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 = ''; } // 開啟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’服務(wù)端發(fā)送消息function sendName() { var value = document.getElementById('name').value; stompClient.send("/app/change-notice", {}, value); } connect(); </script>

相關(guān)說明：
關(guān)于JavaScript實現(xiàn)WebSocket的功能很簡單,基本分以下幾步：

開啟Socket

var socket = new SockJS('/socket');?先構(gòu)建一個SockJS對象

stompClient = Stomp.over(socket);?用Stomp將SockJS進(jìn)行協(xié)議封裝

stompClient.connect()?與服務(wù)端進(jìn)行連接，同時有一個回調(diào)函數(shù)，處理連接成功后的操作信息。

發(fā)送消息

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

頁面預(yù)覽：

Paste_Image.png

修改公告功能

當(dāng)我們發(fā)送公告后，將上圖的公告信息在不刷新頁面的情況下，使用WebSocket將其改變。發(fā)送公告的前端代碼已經(jīng)完成，現(xiàn)在我們來寫另一個客戶端，用來接收第一個頁面發(fā)送的公告，展示在上圖紅框中。
功能比較簡單，所以下面只給出部分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)說明：
這里與發(fā)送公告代碼不同的是，在stompClient建立連接成功之后，我們要監(jiān)聽服務(wù)端發(fā)送過來的信息，接收到之后，改變頁面上公告的內(nèi)容，所以用到了stompClient.subscribe()
這個subscribe()方法功能就是定義一個訂閱地址，用來接收服務(wù)端的信息（在服務(wù)端代碼中，我們在@SendTo中指定了這個訂閱地址“/topic/notice”），當(dāng)收到消息后，在回調(diào)函數(shù)中處理業(yè)務(wù)邏輯。

至此，所有的功能開發(fā)完畢！

效果演示

首先我們發(fā)布一條公告：

然后我們切到另一個頁面，發(fā)現(xiàn)內(nèi)容已變：

轉(zhuǎn)載于:https://my.oschina.net/u/3229047/blog/837449

總結(jié)

以上是生活随笔為你收集整理的Spring WebSocket初探2 (Spring WebSocket入门教程)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。