簡析hotjar錄屏功能實現原理

眾所周知，hotjar中錄屏功能是其重要的乙個賣點，看著很牛x酷炫的樣子，今天就簡單的分析一下其可能實現（這裡只根據其請求加上個人理解分析，並不代表hotjar中真實實現必然如此）的原理。

如果要實現完整的錄屏功能，在客戶端在沒有客戶允許的前提下，目前是無法做到的，所以只能考慮在服務端來實現，在服務端實現的第一步，就必然需要重現客戶端的渲染結果，此時需要完整的傳送客戶端內容到服務端，在服務端進行完整的渲染。

從布瑪的效果來看，獲取dom內容會涉及如下三個請求：

請求1 用來判斷該頁面內容在服務端是否存在 request url: request method: get status code: 200 //響應結果請求2 預檢請求沒啥說的，應該都知道幹啥的 request url: request method: options status code: 200 請求3 傳送完整dom內容 request url: request method: post status code: 200 request payload

content: "

從請求3 中可以看到，content部分其實就是對完整html的json化，這部分內容比較長，只貼出部分內容。

只是獲取完整dom內容只是第一步，在hotjar的錄屏功能中，還有乙個是獲取滑鼠運動軌跡，想要繪製運動軌跡，必然要知悉滑鼠在時間軸上的位置資訊，所以hotjar中，必然要採集滑鼠在不同時間點的位置資訊，這個可以通過其websocket 請求

request url: wss: request method: get

status code: 101 switching protocols

在ws 請求過程中，會有mouse-move資料報的傳送，其基本結構如下：

mouse_move: [, , ,…] page_visit_id: 14777325238

page_visit_key: "e9fa998e-5811-4d2f-81d2-bd296c7129af"

其中可以看到mouse_move 資料結構中，包含了時間軸上不斷變化的座標值（x,y）,有了基於時間軸的xy座標，我們繪製內容就變的不那麼複雜了。

除了滑鼠執行軌跡之外，使用者在頁面上的所有行為都會被完整的記錄下來，頁面的任何變化也都被記錄了下來，如果需要在服務端完整的重新演化這種變化，那麼需要把完整的變化結構傳送到伺服器，讓服務端進行變化回溯，hotjar是通過ws中傳送mutation傳送這種結構包的，當然要傳送這種結構包，首先要先觀測dom變化，這裡也有一種簡單的方式（暫時不確定hotjar的實現）html5 dom4級mutatioobserver方法，可以檢查頁面中的dom是否發生變化，大家可以做一下簡單的測試：

//選擇目標觀測節點
let target = document.queryselector('目標節點擊擇器');
// 建立觀察者物件
var observer = new window.mutationobserver(function(mutations) ); 
}); 
// 觀測項配置:
var config = 
// 開始觀測目標節點
observer.observe(target, config);

獲取到變化的dom結構（這種變化也是時序的變化，因為任何操作都可能導致變化，變化必然是有先後順序的），然後通過ws傳送到伺服器，通過chrome network可以看到ws中mutation基本的包結構如下：

mouse_move: 
mutation: [, , ]}
page_visit_id: 14777325238
page_visit_key: "e9fa998e-5811-4d2f-81d2-bd296c7129af"

裡面包含了dom節點變化，其中包含變化節點如何變化的（通過節點的所有attribute來應用）

在伺服器啟動瀏覽器並啟動錄屏軟體（錄屏軟體只是猜測可能有其它多種方式）

根據頁面傳送的完整dom進行初始化內容展示

按照時序合併滑鼠軌跡和mutation包資料

根據時間軸自動操作改變dom

訪次結束完成錄製

簡析hotjar錄屏功能實現原理

Puppet安裝簡錄

strtok函式簡析

IP tcp udp 概念簡析

簡析hotjar錄屏功能實現原理

Puppet安裝簡錄

strtok函式簡析

IP tcp udp 概念 簡析

相關推薦

IP tcp udp 概念簡析