HTTP請求用於我們開發以及用戶之間最為廣泛的一種協議，在HTTP中我們可以簡單的通過瀏覽器獲取到我們需要的內容(頁面)。但是他也有他的局限性。今天我們的主角websocket將為展現他的功能
HTTP缺點
-
HTTP只能有client發起請求服務端做出響應返回結果。服務端是不能主動向客戶端發送信息的。所以有的網站在解決實時性上采用的是頁面的定時器功能。簡而言之是客戶端定時的向服務端發送請求
這樣多多少少的造成資源的浪費。 -
HTTP是無記憶的。每次請求服務端是無法了解到客戶端之前的行為的，但是我們平時瀏覽器網站的時候感覺瀏覽器是知道我們之前做的事情的。這是網站在請求是添加的cookie這些服務端提供的數據。對我們而言我們感覺是有記憶的。實則不然
-
HTTP1.1之后采用了短連接、長連接兩種方式。HTTP請求的發送每次也需要三次握手機制。所以每次的連接耗費資源。1.1后才一定時間內HTTP其實采用的是長連接，這樣可以減少資源的開銷
-
上述說道的長連接有人可能有疑問，其實HTTP協議是基於TCP協議開發的。所以自然有長連接的特性。
HTTP websocket區別
-
HTTP因為短連接的特性所以是無記憶的。為了解決這個問題每個請求都是由General+Request Head+Request Paylaod+Response Headers組成的。其中Heads就是瀏覽器需要記住的東西，每次傳遞來傳遞去的很是耗費性能。
-
websocket由於是長連接特性，一次連接就可以一直的雙向通信。從載體來說websocket關注的更少，只需要通信當前需要的信息。歷史信息雙方都是有的。
websocket原理
使用場景
springboot整合websocket
環境准備
- 在springboot基礎上引入websocket的jar
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
- 然后在項目中加入如下的配置
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
- 然后我們就可以編寫websocket的接受和發送等事件了。 我在次基礎上封裝了一下，先抽象除一個websocket
public abstract class BaseWebSocket extends BaseController{
/**
* 靜態變量，用來記錄當前在線連接數。應該把它設計成線程安全的。
*/
private int onlineCount = 0;
/**
* concurrent包的線程安全Set，用來存放每個客戶端對應的MyWebSocket對象。
*/
public CopyOnWriteArraySet<BaseWebSocket> webSocketSet = new CopyOnWriteArraySet<BaseWebSocket>();
/**
* 與某個客戶端的連接會話，需要通過它來給客戶端發送數據
*/
public Session session;
private Logger log = LoggerFactory.getLogger("BaseWebSocket");
/**
* 連接建立成功調用的方法
* @param session
*/
@OnOpen
public void onOpen(Session session, @PathParam("sid") String sid) throws IOException {
this.session = session;
//加入set中
webSocketSet.add(this);
//在線數加1
addOnlineCount();
log.debug("有新連接加入！當前在線人數為" + getOnlineCount());
//發送信息
MultiMap multiMap = new MultiMap();
if (null!=session.getQueryString()&&!"".equals(session.getQueryString())) {
UrlEncoded.decodeTo(session.getQueryString(), multiMap, "UTF-8");
}
sendInfo(defaultMessage(multiMap));
}
/**
* 連接關閉調用的方法
*/
@OnClose
public void onClose() {
//從set中刪除
webSocketSet.remove(this);
//在線數減1
subOnlineCount();
log.info("有一連接關閉！當前在線人數為" + getOnlineCount());
}
/**
* 收到客戶端消息后調用的方法
* @param message 客戶端發送過來的消息
* @param session 緩存
* @throws IOException
*/
@OnMessage
public void onMessage(String message, Session session) throws IOException {
this.session = session;
try {
Map paraMap = (Map) JSONObject.parse(message);
handlerMessage(paraMap);
} catch (JSONException e) {
MultiMap multiMap = new MultiMap();
UrlEncoded.decodeTo(message, multiMap, "UTF-8");
handlerMessage(multiMap);
//throw new BusinessException("傳遞消息格式錯誤(Json)");
}
}
/**
* 處理消息接受
* @param paraMap 接受到map類型的參數
*/
public void handlerMessage(Map paraMap) {
try {
sendInfo(defaultMessage(paraMap));
} catch (IOException e) {
e.printStackTrace();
}
}
public Object defaultMessage(Map<String, Object> paraMap) {
Object obj = new Object();
try {
obj = defauleMessage(paraMap);
} catch (BusinessException e) {
return formatReturnAppData(e.getMessage());
}
return obj;
}
/**
* 默認的發送數據
* @param paraMap 連接時傳遞的參數
* @return
*/
public abstract Object defauleMessage(Map<String, Object> paraMap);
public static boolean isJson(String content) {
try {
JSONObject.parse(content);
return true;
} catch (Exception e) {
return false;
}
}
/**
* 發生錯誤時調用
@OnError
**/
public void onError(Session session, Throwable error) {
log.error("onMessage方法異常"+error.toString());
error.printStackTrace();
}
/**
* 發送消息需注意方法加鎖synchronized，避免阻塞報錯
* 注意session.getBasicRemote()與session.getAsyncRemote()的區別
* @param message
* @throws IOException
*/
public synchronized void sendMessage(Object message) throws IOException {
// this.session.getBasicRemote().sendText(message);
this.session.getAsyncRemote().sendText(JSONObject.toJSONString(message));
}
/**
* 群發自定義消息
* */
public void sendInfo(Object message) throws IOException {
for (BaseWebSocket item : webSocketSet) {
try {
item.sendMessage(message);
} catch (IOException e) {
continue;
}
}
}
public synchronized int getOnlineCount() {
return onlineCount;
}
public synchronized void addOnlineCount() {
onlineCount++;
}
public synchronized void subOnlineCount() {
onlineCount--;
}
}
- 然后我們新增一個websocket的時候我們只需要繼承一下這個抽象的websocket的類然后重現里面的defauleMessage方法就行了。在類上需要加上如下注解
@ServerEndpoint(value = "/accident/getAccident")
@Component
public class AccidentGetAccident extends BaseWebSocket {
AccidentController accidentController;
@Override
public Object defauleMessage(Map<String, Object> paraMap) {
accidentController = ContextUtil.getApplicationContext().getBean(AccidentController.class);
return accidentController.getAccident(paraMap);
}
}
客戶端連接
- 在前端只需要構造WebSocket這個對象，這個對象需要傳遞一個參數-連接地址
ws = new WebSocket(wsUrl);
- 然后我們就可以重寫ws里面的一些事件了
ws.onclose = function () {
console.log('鏈接關閉');
};
ws.onerror = function() {
console.log('發生異常了');
};
ws.onopen = function () {
console.log('新建連接');
};
ws.onmessage = function (event) {
console.log("接收到服務端反饋的信息了");
}
- 但是我們得考慮一種情況就是，我們的服務端因為某種因素造成服務宕機，這個時候客戶端捕獲到onclose事件，這次的連接就會結束，但是服務端可能在短時間內搶修好了。這個時候我們要客戶端進行寵幸刷新才會進行重連。websocket正常都是用在大屏的時候，有時認為刷新並不是很方便，所以這個時候需要我們的客戶端有重連機制。
var lockReconnect = false;//避免重復連接
var wsUrl = "ws://127.0.0.1:8088/accident/getAccident?entId=zhonghuaxingzhong";
var ws;
var tt;
function createWebSocket() {
try {
ws = new WebSocket(wsUrl);
init();
} catch(e) {
console.log(e+'catch');
reconnect(wsUrl);
}
}
function init() {
ws.onclose = function () {
console.log('鏈接關閉');
reconnect(wsUrl);
};
ws.onerror = function() {
console.log('發生異常了');
reconnect(wsUrl);
};
ws.onopen = function () {
//心跳檢測重置
heartCheck.start();
};
ws.onmessage = function (event) {
setMessageInnerHTML(event.data);
//拿到任何消息都說明當前連接是正常的
console.log('接收到消息');
heartCheck.start();
}
}
function reconnect(url) {
if(lockReconnect) {
return;
};
lockReconnect = true;
//沒連接上會一直重連，設置延遲避免請求過多
tt && clearTimeout(tt);
tt = setTimeout(function () {
createWebSocket(url);
lockReconnect = false;
}, 4000);
}
//心跳檢測
var heartCheck = {
timeout: 3000,
timeoutObj: null,
serverTimeoutObj: null,
start: function(){
}
}
//將消息顯示在網頁上
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
createWebSocket(wsUrl);
加入戰隊
微信公眾號
主題
