粗略了解 WebSocket 是什么

首先了解WebSocket，轮询

 

一.H5 WebSocket简单介绍

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

官方解释

从以上解释可总结出：

 

WebSocket 是什么？

---

WebSocket 是一种网络通信协议。RFC6455 定义了它的通信标准。

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

 

为什么需要 WebSocket ？

---

既然已经有了 HTTP 网络通信协议，为什么还需要 WebSocket ？它能带来什么好处？

 

1、了解HTTP 协议

• 特点：HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。
• 缺点：通信只能由客户端发起

比如：我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。

这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，向服务器发出请求，查询是否有新的数据改动（常见的场景：WebQQ）。或长轮询：减少频繁请求响应，只在数据更新时响应。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。

 

2、基于这种问题的产生，WebSocket 就此发明。

WebSocket 连接允许客户端和服务器之间进行全双工通信，使得任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接，就可以一直保持连接状态。这相比于轮询方式的不停建立连接显然效率要大大提高。

所以，WebSocket 最大特点是：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

 

 

WebSocket 如何工作？

---

WebSocket 协议本质上是一个基于 TCP 的协议。

为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

var ws = new WebSocket("wss://echo.websocket.org");  //创建 WebSocket 对象

ws.onopen = function(evt) {        //onopen事件，用于指定连接成功后的回调函数。
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");          // send()方法用于向服务器发送数据
};

ws.onmessage = function(evt) {      // onmessage事件，用于指定收到服务器数据后的回调函数。接收到的数据可以是：文本、二进制数据
  console.log( "Received Message: " + evt.data);
  ws.close();                           // colse()方法 关闭连接
};

ws.onclose = function(evt) {             //onclose事件，用于指定连接关闭后的回调函数
  console.log("Connection closed.");
};      

Socket.readyState 只读属性，表示连接状态，可以是以下值

• CONNECTING：值为0，表示正在连接。
• OPEN：值为1，表示连接成功，可以通信了。
• CLOSING：值为2，表示连接正在关闭。
• CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

 

特点：

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

ws://example.com:80/some/path

 

关于可以跨域，可以先看这篇博客WebSocket跨域问题解决，还有思考进程间通信方式

 

 

总结：

• websocket是什么
  • 一种区别于HTTP的网络通信协议
• 与http的区别 / websocket的特点
  • http：只能实现客户端向服务器发送数据请求，是一种单向的请求/响应模式（半双工）
  • websocket：允许客户端和服务器通过建立连接，实现双方可以互相推送数据（全双工）
• websocket的实际作用：
  •  解决了客户端和服务器的一些即时通讯问题，减少轮询写起网页 app 会方便不少
• 建立WebSocket：
  • new WebSocket(url) 创建实例
  • onopen,onmessage,onclose 事件
  • send，close 方法

 

 

 

参考：WebSocket的使用

WebSocket 详解教程   

阮一峰——WebSocket 教程