WebSocket 理论知识整理

最近工做用到websocket, 以前虽然也用到了一些简单的东西，可是并无认真整理一下。因此此次准备了解一下WebSocket.

WebSocket产生的背景

WebSocket是一种在单个TCP链接上进行全双工通讯的协议. 这意味着双方能够同时进行通讯和交换数据

对于咱们都很是熟悉的HTTP协议，通讯只能经过客户端发起，没法作到服务器主动向客户端推送消息
这样若是在服务端出问题的时候，客户端想要知道就比较麻烦，笨的办法就是咱们采用轮询的方式，每隔一段时间问一下服务端：“喂，你还在么，你怎么样了，还没死吧？” 从而来肯定服务端的一些状态变化。

关于轮询：其实就是客户端在指定的时间间隔向服务器发送请求

可是咱们都知道这种笨办法是很是浪费资源的。而WebSocket也能够说就是这样诞生了

为何咱们须要web socket

Internet was conceived to be a collection of Hypertext Mark-up Language (HTML) pages linking one another to form a conceptual web of information. During the course of time, static resources increased in number and richer items, such as images and began to be a part of the web fabric.

Server technologies advanced which allowed dynamic server pages - pages whose content was generated based on a query.

Soon, the requirement to have more dynamic web pages lead to the availability of Dynamic Hypertext Mark-up Language (DHTML). All thanks to JavaScript. Over the following years, we saw cross frame communication in an attempt to avoid page reloads followed by HTTP Polling within frames.

However, none of these solutions offered a truly standardized cross browser solution to real-time bi-directional communication between a server and a client.

This gave rise to the need of Web Sockets Protocol. It gave rise to full-duplex communication bringing desktop-rich functionality to all web browsers.

WebSocket 长啥样 ？

咱们仍是用HTTP来对比，咱们一般访问一个网站如google,咱们会在浏览器中输入：
http://www.google.com
或者：
https://www.google.com

其实webSocket和http也很是相似，以下图：

 

web socket 是HTML5 规范的一部分， 容许网页和远程主机之间进行全双工通讯，该协议实现如下好处：

经过单个链接而不是两个链接使用全双工减小没必要要的网络流量和延迟
经过代理和防火墙进行流式传输，同时支持上游和下游通讯

websocket 和http 对比

websockets 角色

Events and Actions

有四个主要的API events
Open
Message
Close
Error

每个事件都分别经过实现onopen onmessage onclose 和onerror函数来处理

Open
一旦客户端和服务器之间创建了链接，就会从web socket 实例触发open 事件，这个被称为客户端和服务器之间的初始握手
一旦创建链接就会触发的事件称为onopen事件

Message
一般发生在服务器发送一些数据的时候触发该消息事件
服务器发送给客户端的消息能够包括纯文本消息，二进制数据或者图像。可是不管哪一种数据都会触发onmessage函数

close
该事件标志着服务器和客户端之间通讯结束
当触发onclose事件以后能够关闭链接，同时标记中通讯结束，服务器和客户端之间没法进一步传输消息

error
onerror 事件以后老是随后终止链接

Actions

当咱们想要发生某事件的时候作一些操做，经过用户显示调用的方法有：
send()
close()

参考链接：http://www.ruanyifeng.com/blog/2017/05/websocket.html
https://www.tutorialspoint.com/websockets/index.htm