Xterm.js 4.x开启鼠标事件后鼠标点击无效(:set mouse=a)

技术栈:vue + websocket + xterm.js

背景:需要支持页面内的搜索(类似于浏览器的Ctrl + F效果)

有了需求,所以我去找到相关的插件可以实现这个功能 -- xterm-addon-search,但是根据文档,该插件需要xterm的版本为4.x,而我的项目中的版本为3.x,所以进行了一波升级,升级之后没感到什么明显问题。

直到用户反馈,Linux的vim模式下如果输入了指令:set mouse=a启用鼠标事件后,鼠标无法选中内容已经鼠标滑轮无法滚动内容。开始排查问题,通过对比的方法,发现旧版本确实是没有问题,那么问题就出现在新版本这里来。但是,去官网查看文档,并没有提到相关的地方,很苦恼,最后只能去GitHub上体issue,没想到开发人员真的回我了。

通过与开发人员的沟通,他理解为我的后端没有对二进制流数据进行处理(因为onBinary里面得到的是二进制流数据),所以让我和我的后端开发人员沟通。为什么新版本里面没有对这个鼠标事件处理了呢?下面是开发者回答的原话:

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得到的是鼠标的二进制流数,但是发现,websocket并没有将这些数据发送到后端,所以难怪对鼠标事件没有响应。于是乎,我就在onBinary里面将data通过websocket发送到后端,结果真的可以了,芜湖.......

this.term.onBinary(data => {
    this.socket.send(JSON.stringify({data}))
})

摸索出来之后,再回头想想开发者说的话,就是旧版本的鼠标事件可能会造成程序的崩溃,所以现在把鼠标事件的处理权交到插件使用者的手上,但是这一点并没有在文档中体现出来,所以可能很多人都不知道,所以在这里记录一下。

最后,我向开发者说了我的解决办法之后,他说他注意到这点了,并表示让团队在demo中把这里体现出来,免得收到更多关于鼠标事件无效的报告。


image.png

image.png

这个问题就这样解决啦,大家遇到同样的问题可以查考一下。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • DTD 介绍 DTD(Document Type Definition 文档类型定义)是一组机器可读的规则,它们定...
    lio_zero阅读 2,799评论 0 9
  • Awesome GitHub Topic for Go Awesome Go golang-open-source...
    Liam_ml阅读 3,878评论 2 14
  • 一、CSS问题 1.flex布局 display:flex; 在父元素设置,子元素受弹性盒影响,默认排成一行,如果...
    陈二狗想吃肉阅读 664评论 0 9
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,618评论 0 7
  • http://dart.goodev.org/guides/libraries/library-tour Numb...
    Zszen阅读 4,719评论 0 51