WebSocket怎么用

這篇文章主要介紹了WebSocket怎么用，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

WebSocket初識
一：認(rèn)識websocket
websocket是html中一種新的協(xié)議，它實(shí)現(xiàn)了真正的長連接，實(shí)現(xiàn)了瀏覽器與服務(wù)器的全雙工通信(指在通信的任意時刻，線路上存在A到B和B到A的雙向信號傳輸)。
現(xiàn)在我們接觸的協(xié)議大多是htttp協(xié)議，在瀏覽器中通過http協(xié)議實(shí)現(xiàn)了單向的通信，瀏覽器發(fā)出請求，服務(wù)器在響應(yīng)，一次客戶端與服務(wù)器的請求就結(jié)束了，服務(wù)器不能主動響應(yīng)客戶端，主動往客戶端返回數(shù)據(jù)，而在某些需求上要實(shí)時刷新數(shù)據(jù)，獲取服務(wù)器上的最新數(shù)據(jù)，顯示給客戶端。為了實(shí)現(xiàn)這樣的需求，大多數(shù)公司使用了輪詢的技術(shù)。輪詢技術(shù)，在特定的時間間隔(如1秒)由瀏覽器發(fā)出http request，服務(wù)器再將最新數(shù)據(jù)返回給瀏覽器，實(shí)現(xiàn)了數(shù)據(jù)的實(shí)時刷新，很明顯，通過這種技術(shù)實(shí)現(xiàn)的偽長連接，存在著一些缺陷，每隔一段時間的http request，不見得每一次的請求都是有意義的，因?yàn)榭蛻舳瞬粫婪?wù)器上的數(shù)據(jù)有沒有更新，這樣在多次請求當(dāng)中肯定會存在無效的請求（上一次請求回來的數(shù)據(jù)跟本次的完全一樣）。
可見輪詢這種技術(shù)，存在很大的弊端，而websocket實(shí)現(xiàn)了真正的長連接，服務(wù)器可以主動向客戶端發(fā)送數(shù)據(jù)，正是這樣的特點(diǎn)，就能很好的實(shí)現(xiàn)這種需求，當(dāng)服務(wù)器有數(shù)據(jù)變化時，服務(wù)器就可以將新的數(shù)據(jù)返回給客戶端，沒有無效的請求回復(fù)。
在實(shí)現(xiàn)websocket連線過程中，需要透過瀏覽器發(fā)出websocket連線請求，然后服務(wù)器發(fā)出回應(yīng)，這個過程通常稱為“握手”（handshaking）。

二：java實(shí)現(xiàn)websocket
1．服務(wù)器端實(shí)現(xiàn)
JSR356 的 WebSocket 規(guī)范使用 javax.websocket.*的 API，可以將一個普通 Java 對象（POJO）使用 @ServerEndpoint 注解作為 WebSocket 服務(wù)器的端點(diǎn)，代碼示例如下：
@ServerEndpoint(value=”/chatServer”)
public class Chat {
   private static Set sessions = Collections.synchronizedSet(new HashSet());
   private static List messages = Collections.synchronizedList(new LinkedList());

private HttpSession httpSession;
@OnOpen
public void onOpen(Session session,EndpointConfig config) {
    //to do somthing
}
@OnMessage
public void onMessage(String message, Session session) {
}
@OnClose
public void onClose(Session session, CloseReason reason) {
}
@OnError
public void onError(Throwable t) {
}
}

代碼解釋：
上文的簡潔代碼即建立了一個 WebSocket 的服務(wù)端@ServerEndpoint(“/chatServer”) 的 annotation 注釋端點(diǎn)表示將 WebSocket 服務(wù)端運(yùn)行在 ws://[Server 端 IP 或域名]:[Server 端口]/demo/chatServer的訪問端點(diǎn)，客戶端瀏覽器已經(jīng)可以對 WebSocket 客戶端 API 發(fā)起 HTTP 長連接了。
使用@ServerEndpoint 注釋的類必須有一個公共的無參數(shù)構(gòu)造函數(shù)，  @onMessage 注解的 Java 方法用于接收傳入的 WebSocket 信息，這個信息可以是文本格式，也可以是二進(jìn)制格式。
@OnOpen 在這個端點(diǎn)一個新的連接建立時被調(diào)用。參數(shù)提供了連接的另一端的更多細(xì)節(jié)。Session 表明兩個 WebSocket 端點(diǎn)對話連接的另一端，可以理解為類似 HTTPSession 的概念。
@OnClose 在連接被終止時調(diào)用。
使用注解方式很方便的建立了一個websocket 的服務(wù)器端，雖然代碼簡易，但在自己練習(xí)過程中，也是莫名其妙遇到很多問題，例如無論如何也連不上服務(wù)器，客戶端只是報404錯誤，找不到。但是回頭檢查服務(wù)器端代碼，貌似也沒有什么問題，上網(wǎng)搜尋答案也沒有符合自己想要的解決這種問題的答案，應(yīng)該很多人都遇到了這種問題，很困惑。
不過，websocket實(shí)現(xiàn)的服務(wù)器端確實(shí)很好的實(shí)現(xiàn)一些特定的需求。
2．客戶端實(shí)現(xiàn)
客戶端是通過js代碼連接服務(wù)器，首先得在服務(wù)器端建立一個websocket對象，再去連接服務(wù)器。
代碼：

/******************************************************/ var msgContainer = document.getElementById(“msgContainer”); // 服務(wù)器地址 var wsUrl = “ws://127.0.0.1:8080/demo/chatServer”; // 創(chuàng)建WebSocket對象 var webSocket = new WebSocket(wsUrl); // 與服務(wù)器建立連接 webSocket.onopen = function() { 
    console.log(“與服務(wù)器連接成功?。　?; } // 接收到服務(wù)器傳來的消息 webSocket.onmessage = function(mes) {
} // 服務(wù)器關(guān)閉 webSocket.onclose = function() { 
    console.log(“close!”); } // 服務(wù)器異常 webSocket.onerror = function() { 
    console.log(“error!”); } // 瀏覽器刷新或者關(guān)閉時，先關(guān)閉當(dāng)前頁面的webSocket對象 window.onbeforunload = function() { 
    webSocket.close(); } // 發(fā)送消息 function send() { webSocket.send(jsonMsg); } /******************************************************/

代碼（var webSocket = new WebSocket(wsUrl);）是在申請一個 WebSocket 對象，參數(shù)是需要連接的服務(wù)器端的地址，同 HTTP 協(xié)議開頭一樣，WebSocket 協(xié)議的 URL 使用 ws://開頭，另外安全的 WebSocket 協(xié)議使用 wss://開頭。
WebSocket 對象一共支持四個消息 onopen, onmessage, onclose 和 onerror，有了這 4 個事件，我們就可以很容易很輕松的駕馭 WebSocket。
當(dāng) Browser 和 WebSocketServer 連接成功后，會觸發(fā) onopen 消息；如果連接失敗，發(fā)送、接收數(shù)據(jù)失敗或者處理數(shù)據(jù)出現(xiàn)錯誤，browser 會觸發(fā) onerror 消息；當(dāng) Browser 接收到 WebSocketServer 發(fā)送過來的數(shù)據(jù)時，就會觸發(fā) onmessage 消息，參數(shù) mes中包含 Server 傳輸過來的數(shù)據(jù)；當(dāng) Browser 接收到 WebSocketServer 端發(fā)送的關(guān)閉連接請求時，就會觸發(fā) onclose 消息。我們可以看出所有的操作都是采用異步回調(diào)的方式觸發(fā)，這樣不會阻塞 UI，可以獲得更快的響應(yīng)時間，更好的用戶體驗(yàn)。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享WebSocket怎么用內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!