websocket前后端交互

一.目錄

1. websocket的簡介
2. websocket客戶端
3. websocket服務端
4. 測試運行
   WebSocket
   WebSocket是HTML開始提供的一種瀏覽器與服務器間進行全雙工通訊網絡技術,依靠這種技術和服務器端的長連接,雙向實時通訊.
   特點:事件驅動,異步,使用ws或者wss協議的客戶端socket,能夠實現真正意義上的推送功能
   缺點:少部分瀏覽器不支持，瀏覽器支持的程度與方式有區別。
   . websocket客戶端
   websocket允許通過Javascript建立遠程服務器的連接,從而實現客戶端與服務器間的雙向通信,在websocket中有倆個方法
   *1.send()向遠程服務器發送數據
   2.close()關閉websocket連接
   websocket同時還定義了幾個監聽函數　　　　
   　　　　1、onopen 當網絡連接建立時觸發該事件
   　　　　2、onerror 當網絡發生錯誤時觸發該事件
   　　　　3、onclose 當websocket被關閉時觸發該事件
   　　　　4、onmessage 當websocket接收到服務器發來的消息的時觸發的事件，也是通信中最重要的一個監聽事件。msg.data
   　　websocket還定義了一個readyState屬性，這個屬性可以返回websocket所處的狀態：
   　　　　1、CONNECTING(0) websocket正嘗試與服務器建立連接
   　　　　2、OPEN(1) websocket與服務器已經建立連接
   　　　　3、CLOSING(2) websocket正在關閉與服務器的連接
   　　　　4、CLOSED(3) websocket已經關閉了與服務器的連接

websocket的url開頭是ws，如果需要ssl加密可以使用wss，當我們調用websocket的構造方法構建一個websocket對象（new WebSocket(url)）的之后，就可以進行即時通信了。*

 <script> var websocket=null; if('WebSocket' in window){ websocket =new WebSocket('ws://liupu33.natapp1.cc/sell/webSocket'); }else{ alert('該瀏覽器不支持websocket!'); } websocket.onopen=function (event) { console.log('建立連接'); } websocket.onclose=function (event) { console.log('連接關閉'); } websocket.onmessage=function (event) { console.log('收到消息:' + event.data) $('#myModal').modal('show'); document.getElementById('notice').play(); /* document.getElementById('span1').valueOf(event.data);*/ } websocket.onerror=function () { alert('websocket通信錯誤') } window.onbeforeunload=function () { websocket.close(); } </script> 

 

websocket服務端
引入依賴

		<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> 

 

配置

package com.imooc.sell.config; import org.springframework.context.annotation.Bean; import org.springframework.stereotype.Component; import org.springframework.web.socket.server.standard.ServerEndpointExporter; @Component public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } } 

 

package com.imooc.sell.service; import lombok.extern.slf4j.Slf4j; import org.springframework.stereotype.Component; import javax.websocket.OnClose; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.ServerEndpoint; import java.util.concurrent.CopyOnWriteArraySet; @Component @ServerEndpoint("/webSocket") @Slf4j public class WebSocket { private Session session; private static CopyOnWriteArraySet<WebSocket> webSocketSet=new CopyOnWriteArraySet<>(); @OnOpen public void opOpen(Session session){ this.session=session; webSocketSet.add(this); log.info("websocket,有新的連接,總數:{}",webSocketSet.size()); } @OnClose public void onClose(){ webSocketSet.remove(this); log.info("websocket,連接斷開,總數:{}",webSocketSet.size()); } @OnMessage public void onMessage(String message){ log.info("websocket,收到客戶端發來的消息:{}",message); } public void sendMessage(String message){ for (WebSocket webSocket :webSocketSet){ log.info("websocket消息,廣播消息,message={}",message); try{ webSocket.session.getBasicRemote().sendText(message); } catch (Exception e){ e.printStackTrace(); } } } } 

 

測試運行