基于xterm的web大黑框框

开发准备

• 身为一个前端童鞋，之前网上xterm的资料，好多都太坑了，竟然不说环境的问题，简直不能忍啊

• npm install --global windows-build-tools或者yarn global add windows-build-tools

  1. 安装时候，cmd或者Powershell一定一定要一管理员身份运行

  2. 安装的时候一定要多等一会儿，彻底等他安装完，我先用yarn装了，后来不会动了，我以为装好了，就停了，用的时候报错，又用npm装，装好之后，以后下包的时候老是报错,所以这个写完的时候，我就准备重置电脑了，哎，真的是坑，报错如下

     
     
     

     npm报错.png
  3. 这个就是为了装vsc++的编译环境和python的环境，不然后面是没法进行的

• 装一下node-pty和node-gyp试一下，看能装不能

  1. node-gyp- Node.js原生插件构建工具
  2. node-pty这是伪终端

• xterm.js默认的是Node.js做服务，然后前后台通信需要Socket来建立连接，所以就借用一下Coding的架构图吧
  

  

  terminal.jpg
  
  通过上面的图可以看出，整个terminal组件从前端到后台的实现当中，大概要做一下几个东西：
  • 在浏览器端实现的终端模拟器(前端)
  • 前后端建立WebSocket连接，保证用户的输入能够实时推送到后端和后端的反馈相应到前端(协议)
  • 后端创建pty对，来与终端模拟器以及shell通讯(后端)

• 然后就可以愉快的进行额

  1. xterm.js的githubclone代码
  2. npm i 安装依赖
  3. npm start 运行项目,如图所示
     
     

     xterm.png