vscode server源码解析（五） - websocket协议（一）

有兴趣的朋友可以看下WebSocket Demo，看下简易的websocket前后台通信，源码地址
https://gitee.com/shu3ericzhu/web-socket-demo

本章中，我们先跳出vscode源码，重点说一下websocket协议，为什么用websocket协议，以及websocket协议是什么，当然，和其他介绍websocket协议的文章不同，我们是结合vscode server去说它
之所以花费这么多篇幅去单独说websocket协议，是因为它是vscode server开发的核心所在，vscode server作为一个远程开发解决方案，前后台的交互完全依赖网络，那么就必须有一个适用其场景的网络协议支撑。
可以再看一下架构图，无论是代码以代码编辑为代表的主进程 - 浏览器通信，还是以代码调试、跳转为代表的插件进程 - 浏览器通信，都离不开websocket协议的应用

浅说http协议

提起前后端交互，我们当然首先想到的是http协议。
一般的前端网页，比如一个用户管理系统吧，前端网页向后端服务发送一个http请求，比如请求用户列表，后端服务再在数据库查询后返回数据，前端接收到数据后展示。
这里有个特点，就是我们每个http请求都是独立的，而且只有http请求的发送和接收这段时间里，客户端和服务器才建立连接，其他时候二者之间是没有连接的，虽然http1.1上可以用Connection:Keep-Alive使连接持久化，但总体而言，http协议的一个特点就是短连接

vscode server使用场景

我们不妨想一下vscode server的使用场景，与普通网页注重获取数据展示、提交用户表单功能不同，vscode作为一个IDE，强调编辑器以及插件能力，这些功能突出一个实时性，可以想象一下，如果你打开一个新文件，是用http发送到后台获取，虽然也很快，但是还是能感受到和本地客户端的IDE使用体验差很多的，因为http对于这样实时交互的场景就有些捉襟见肘了，短连接，传输慢，单向通信，实际中我们涉及到的网络通信可远不止打开文件，我们还需要实时快速编辑文件、以及插件进行代码解析、跳转、调试等等，这些同一时间的、大量的、实时的、复杂的通信交互，就必须靠websocket协议来实现了

websocket协议

这样我们就来详细说一下websocket协议吧，与http://的url格式不同，websocket一般是ws:// wss://，是不是以前就看到过~

要注意WebSocket是建立在TCP协议基础上的一个应用层协议，和我们平时听到的socket有区别，socket是在应用层和传输层之间的一个抽象层，它把TCP/IP层复杂的操作抽象为几个简单的接口供应用层调用以实现进程在网络中通信

websocket协议具有以下几个特点
1.实时的通信协议，即客户端和服务端之间建立长连接，除非一方主动断开，否则一直保持，符合IDE开发时用户实时访问后台资源的场景，比如实时的代码修改，实时的代码跳转
2.允许双向通信，http协议上只能是客户端-服务端这样的单向通信，websocket上由于建立的是全双工连接，服务端也可以主动向客户端通信。比如我们的插件系统在Linux后台的，需要在前台展示数据，就需要服务端-客户端通信
3.使用二进制协议传输数据，相比http协议传输速度更快，效率更高，更符合IDE在开发过程中，前后端大量数据交互的场景，比如插件调试中，断点信息、变量信息等，都是非常大量的
4.支持跨域通信，不用担心跨域问题

基于websocket因为这些特点，websocket协议还可以用在聊天、游戏这样强调实时性的场景下

源码简要说明

开头的demo工程专门用于入门websocket，模拟了远程终端场景，就像平时用xterm之类的工具ssh远程到远程Linux机器一样，只不过这里前后台都在windows上，直接在powershell上执行命令，前后台的交互通过websocket进行

这里对最重要的代码部分做个简单说明
Server端

// 创建websocket的server，用于接收websocket连接
const websocketServer = new WebSocketServer({ server });

// 向Client端发送消息
ws.send('Connection established')

// 接收Client消息，并做相应操作
ws.on('message', data => {
	// ...
});

Client端

// 创建websocket的client，用于建立websocket连接
const websocket = new WebSocket('ws://127.0.0.1:7777');

// 向服务器发送消息
websocket.send(message);

// 接收服务器发来的消息
websocket.addEventListener("message", (event) => {
	// ...
});

总结

websocket主要适应了vscode server使用场景的特点，即同一时间的、大量的、实时的、复杂的通信交互，更好地保证了server形态下vscode的使用体验
我们下一篇文档将会用一个webosocket demo来说明一下它的使用