Weex 是一套簡(jiǎn)單易用的跨平臺(tái)開(kāi)發(fā)方案，能以 web 的開(kāi)發(fā)體驗(yàn)構(gòu)建高性能、可擴(kuò)展的 native 應(yīng)用。
在上一篇Weex環(huán)境搭建與體驗(yàn)最后提到，當(dāng)修改服務(wù)端修改js文件后，手機(jī)端的界面自動(dòng)就會(huì)更新，那這到底是如何實(shí)現(xiàn)的呢？通過(guò)分析WeexPlayGround的源碼，發(fā)現(xiàn)其中HotRefreshManager類(lèi)負(fù)責(zé)檢查服務(wù)端的js文件有沒(méi)有更新，如果有更新便會(huì)重新加載js文件，從而實(shí)現(xiàn)了實(shí)時(shí)更新。其中HotRefreshManager內(nèi)部是使用WebSocket實(shí)現(xiàn)的。
下面我們來(lái)介紹一下WebSocket的相關(guān)概念。
WebSocket
WebSocket是一種全雙工的計(jì)算機(jī)通信協(xié)議，它建立在TCP的基礎(chǔ)之上。它可以在服務(wù)器與瀏覽器之間建立一個(gè)長(zhǎng)連接，然后進(jìn)行實(shí)時(shí)的數(shù)據(jù)傳輸。而我們比較熟悉的HTTP，它一般也是建立在TCP之上的，不同的是，它不是全雙工的，而是請(qǐng)求-相應(yīng)式的，每次通信都需要發(fā)起新的請(qǐng)求，而且每次發(fā)起請(qǐng)求，都需要重新建立連接。
WebSocket與HTTP的關(guān)系
WebSocket和HTTP其實(shí)是有關(guān)系的，我們可以從OkHttp的源碼中看到WebSocket的具體實(shí)現(xiàn)。
OkHttp的WebSocketCall類(lèi)中，有下面的代碼。
request = request.newBuilder()
.url(httpUrl)
.header("Upgrade", "websocket")
.header("Connection", "Upgrade")
.header("Sec-WebSocket-Key", key)
.header("Sec-WebSocket-Version", "13")
.build();
WebSocket連接的建立利用了HTTP，只不過(guò)在HTTP請(qǐng)求的Header中添加了一些特殊的參數(shù)，用來(lái)標(biāo)識(shí)這是一個(gè)WebSocket請(qǐng)求。服務(wù)端收到請(qǐng)求后，如果它支持WebSocket，則在Response的Header中添加相應(yīng)的字段告訴客戶端。當(dāng)客戶端收到響應(yīng)后，做了什么呢？我們繼續(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);
上面的過(guò)程可以總結(jié)如下：
- 首先通過(guò)callEngineGetConnection函數(shù)，獲得這個(gè)HTTP底層的TCP連接。
- 然后調(diào)用clearOwner清除掉該連接原來(lái)的擁有者。
- 接下來(lái)使用該連接的Socket和輸入輸出，創(chuàng)建真正的WebSocket。
- 最后將該連接的擁有者設(shè)為該WebSocket。
從上面的過(guò)程可以看出，WebSocket的原理，就是先使用HTTP協(xié)議建立連接，然后使用底層的TCP連接繼續(xù)通信。
