技術棧:vue + websocket + xterm.js
背景:需要支持頁面內的搜索(類似于瀏覽器的Ctrl + F效果)
有了需求,所以我去找到相關的插件可以實現這個功能 -- xterm-addon-search
,但是根據文檔,該插件需要xterm的版本為4.x,而我的項目中的版本為3.x,所以進行了一波升級,升級之后沒感到什么明顯問題。
直到用戶反饋,Linux的vim模式下如果輸入了指令:set mouse=a
啟用鼠標事件后,鼠標無法選中內容已經鼠標滑輪無法滾動內容。開始排查問題,通過對比的方法,發(fā)現舊版本確實是沒有問題,那么問題就出現在新版本這里來。但是,去官網查看文檔,并沒有提到相關的地方,很苦惱,最后只能去GitHub上體issue,沒想到開發(fā)人員真的回我了。
通過與開發(fā)人員的溝通,他理解為我的后端沒有對二進制流數據進行處理(因為onBinary里面得到的是二進制流數據),所以讓我和我的后端開發(fā)人員溝通。為什么新版本里面沒有對這個鼠標事件處理了呢?下面是開發(fā)者回答的原話:
The old way led to faulty input at app side due to an implicit UTF8 conversion of mouse reports. The new way circumvents this by splitting data sent from the terminal into onData (normal string data, can be UTF8 encoded) and onBinary (cannot be UTF8 encoded).
后來經過自己的摸索,我在onBinary里面打印data得到的是鼠標的二進制流數,但是發(fā)現,websocket并沒有將這些數據發(fā)送到后端,所以難怪對鼠標事件沒有響應。于是乎,我就在onBinary里面將data通過websocket發(fā)送到后端,結果真的可以了,蕪湖.......
this.term.onBinary(data => {
this.socket.send(JSON.stringify({data}))
})
摸索出來之后,再回頭想想開發(fā)者說的話,就是舊版本的鼠標事件可能會造成程序的崩潰,所以現在把鼠標事件的處理權交到插件使用者的手上,但是這一點并沒有在文檔中體現出來,所以可能很多人都不知道,所以在這里記錄一下。
最后,我向開發(fā)者說了我的解決辦法之后,他說他注意到這點了,并表示讓團隊在demo中把這里體現出來,免得收到更多關于鼠標事件無效的報告。
這個問題就這樣解決啦,大家遇到同樣的問題可以查考一下。