1 WebSocket基础讲解 _生活知道

0.引言
本篇文章主要讲解WebSocket的基础知识讲解，为后面的webrtc学习有帮助。也可以前面有文章讲过websocket的实战应用。文章列表如下:
聊聊视频会议系统中web端与客户端通信的关键技术设计(1)
聊聊视频会议系统中web端与客户端通信的关键技术设计(2)
聊聊视频会议系统中web端与客户端通信的关键技术设计(3)
对于webrtc的入门而言，选择Nodejs是更容易。nodejs主要是实现信令服务器的功能，客户端和服务器端的交互，选择websocket作为通信协议。由于web客户端的websocket和nodejs服务器端的websocket有一定的差别，所以分两部分进行讲解。websocket为什么用？APP与信令服务器可以自定义协议。
1.web客户端的websocket
Websocket建立的是长连接，在包头会有个特别的字段进行说明。在连接的基础上，客户端可以在任何时候都可以发送数据给服务器。WebSocket 是 HTML5 开始提供的一种在单个TCP连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocketAPI中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。websocket就解决了这个问题，那就是节省服务器资源和带宽，并能够实时的进行通信。AJAX和websockets对比如下图所示:
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过TCP 连接直接交换数据。获取到连接后，就通过send()方法向服务器发送数据，并通过onmessage事件来接收服务器返回的数据。以下API用于创建WebSocket对象。以下方法所示:
var Socket = new WebSocket(url, [protocol]);
以上代码中的第一个参数Url，指定连接的URL 。第二个参数protocol是可选的，指定可接受的子协议，一般是不做选择。
2.WebSocket 属性
如果使用了以上代码创建Socket对象。那用以下字段来描述 WebSocket 对象的属性。
代表属性的字段：Socket.readyState
描述:只读属性 readyState 表示连接状态，可以是以下值。
0:表示连接未建立。
1：表示连接已建立，进行通信。
2:表示连接正在进行关闭。
3:表示连接已经关闭或者连接不能打开。
代表属性的字段：Socket.bufferedAmount
描述:只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。
2.WebSocket 事件
以下是 WebSocket 对象的相关事件和方法的描述。如下图所示:
3.WebSocket 方法
以下是 WebSocket 对象的相关方法。如下图所示:
当建立WebSocket连接，客户端首先要向服务器发起一个HTTP请求，这个请求和普通的HTTP请求不同，包含可一些附加头信息，其中附加头信息”Upgrade:WebSocket”表面这是一个申请协议升级的HTTP请求，服务器端解析这些附加的头信息请求中时间戳与服务器，然后产生应答信息返回给客户端，客户端和服务器端的WebSocket连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。
4.websocket优点
(1)较少的控制开销。在连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小。在不包含扩展的情况下，对于服务器到客户端的内容，此头部大小只有2至10字节（和数据包长度有关）；对于客户端到服务器的内容，此头部还需要加上额外的4字节的掩码。相对于HTTP请求每次都要携带完整的头部，此项开销显著减少了。
(2)更强的实时性。由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少；即使是和Comet等类似的长轮询比较，其也能在短时间内更多次地传递数据。
(3)保持连接状态。与HTTP不同的是，Websocket需要先创建连接，这就使得其成为一种有状态的协议请求中时间戳与服务器，之后通信时可以省略部分状态信息。而HTTP请求可能需要在每个请求都携带状态信息（如身份认证等）。
(4)更好的二进制支持。Websocket定义了二进制帧，相对HTTP，可以更轻松地处理二进制内容。
(5)可以支持扩展。Websocket定义了扩展，用户可以扩展协议、实现部分自定义的子协议。如部分浏览器支持压缩等。
(6)更好的压缩效果。相对于HTTP压缩，Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率。
(7)WebSocket 是独立的、创建在 TCP 上的协议。Websocket 通过HTTP/1.1 协议的101状态码进行握手。为了创建Websocket连接，需要通过浏览器发出请求，之后服务器进行回应，这个过程通常称为“握手”（handshaking）。
5.总结
本篇文章总结了一些基础的WbeSocket知识，对于完全没有接触过的朋友可以有个了解。欢迎关注，转发，点赞，收藏。
【1 WebSocket基础讲解】本文到此结束，希望对大家有所帮助！

1 WebSocket基础讲解

猜你喜欢