Weex 是一套簡單易用的跨平臺開發(fā)方案，能以 web 的開發(fā)體驗構建高性能、可擴展的 native 應用。
在上一篇Weex環(huán)境搭建與體驗最后提到，當修改服務端修改js文件后，手機端的界面自動就會更新，那這到底是如何實現的呢？通過分析WeexPlayGround的源碼，發(fā)現其中HotRefreshManager類負責檢查服務端的js文件有沒有更新，如果有更新便會重新加載js文件，從而實現了實時更新。其中HotRefreshManager內部是使用WebSocket實現的。
下面我們來介紹一下WebSocket的相關概念。
WebSocket
WebSocket是一種全雙工的計算機通信協(xié)議，它建立在TCP的基礎之上。它可以在服務器與瀏覽器之間建立一個長連接，然后進行實時的數據傳輸。而我們比較熟悉的HTTP，它一般也是建立在TCP之上的，不同的是，它不是全雙工的，而是請求-相應式的，每次通信都需要發(fā)起新的請求，而且每次發(fā)起請求，都需要重新建立連接。
WebSocket與HTTP的關系
WebSocket和HTTP其實是有關系的，我們可以從OkHttp的源碼中看到WebSocket的具體實現。
OkHttp的WebSocketCall類中，有下面的代碼。
request = request.newBuilder()
.url(httpUrl)
.header("Upgrade", "websocket")
.header("Connection", "Upgrade")
.header("Sec-WebSocket-Key", key)
.header("Sec-WebSocket-Version", "13")
.build();
WebSocket連接的建立利用了HTTP，只不過在HTTP請求的Header中添加了一些特殊的參數，用來標識這是一個WebSocket請求。服務端收到請求后，如果它支持WebSocket，則在Response的Header中添加相應的字段告訴客戶端。當客戶端收到響應后，做了什么呢？我們繼續(xù)看代碼。
Connection connection = Internal.instance.callEngineGetConnection(call);
// TODO if (!connection.clearOwner()) {
if (!Internal.instance.clearOwner(connection)) {
throw new IllegalStateException("Unable to take ownership of connection.");
}
Socket socket = connection.getSocket();
BufferedSource source = Okio.buffer(Okio.source(socket));
BufferedSink sink = Okio.buffer(Okio.sink(socket));
final RealWebSocket webSocket =
ConnectionWebSocket.create(response, connection, source, sink, random, listener);
// Start a dedicated thread for reading the web socket.
new Thread(new NamedRunnable("OkHttp WebSocket reader %s", request.urlString()) {
@Override protected void execute() {
while (webSocket.readMessage()) {
}
}
}).start();
// TODO connection.setOwner(webSocket);
Internal.instance.connectionSetOwner(connection, webSocket);
listener.onOpen(webSocket, request, response);
上面的過程可以總結如下：
- 首先通過callEngineGetConnection函數，獲得這個HTTP底層的TCP連接。
- 然后調用clearOwner清除掉該連接原來的擁有者。
- 接下來使用該連接的Socket和輸入輸出，創(chuàng)建真正的WebSocket。
- 最后將該連接的擁有者設為該WebSocket。
從上面的過程可以看出，WebSocket的原理，就是先使用HTTP協(xié)議建立連接，然后使用底層的TCP連接繼續(xù)通信。
