| HTML, 网络, WebSocket

网络之WebSocket双向通信

1. 背景

协议：HTTP/HTTPS协议（HTTPS协议只是在HTTP协议基础之上加密了而已）
版本：HTTP/1.0 HTTP/1.1
举一个例子：比如我发送10张图片，用HTTP/1.0版本的话，需要TCP连接和断开10次，这样比较浪费性能；因此在HTTP/1.1中进行了一个升级，同样我要发送10张图片，我向服务器先建立一个TCP连接，把10个请求同时发送出去，10个响应同时拿到，此时这个连接断开。（这样相当于只连接和断开一次TCP，就很节约性能了）

注意：不管是HTTP/1.0版本还是HTTP/1.1版本，我们想要数据，只能由客户端发起请求到服务器，服务器才能给我们响应，服务器是没有办法主动的把数据推送给我们的。所以说我们用的HTTP协议是单向的，是由客户端发起的。

2. WebSocket是什么？

WebSocket是一个双向通信的，它既可以由客户端向服务器发送请求，也可以由服务器主动的给客户端推送数据。WebSocket其实是一个新协议，跟HTTP协议基本没有关系。因为HTTP协议是单向的，而WebSocket是双向的。

WebSocket对象提供了一组 API，用于创建和管理 WebSocket连接,以及通过连接发送和接收数据。

注意：连接成功之后，WebSocket是一个持久的连接。

3. WebSocket的使用

创建WebSocket：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var Socket = new WebSocket('ws://echo.websocket.org')   //创建一个WebSocket连接，与'ws://echo.websocket.org'WebSocket服务器建立连接
//注意：'ws://echo.websocket.org'是WebSocket协议的后台接口
Socket.onopen = function(){ // 如果建立成功的话，就会触发这个事件
	Socket.send('hello world'); // 用于发送数据
}
// onmessage事件用于接收发送回来的数据，是服务器主动推送给你的
Socket.onmessage = function(messageEvent){
	console.log(messageEvent);  // 打印的内容看下面的图片一
	
	// 此时数据发送和接收完了，那么想把它断开的话可以用close()方法
	Socket.close();
	// 你可以进行一个测试，如：再发送一个数据，如果数据发送不出去，证明已经断开了
	Socket.send("hello world"); // 此时控制台会有一个报错信息，如下面图二所示
}

图一：
打印出来的内容图一

图二：
报错信息图二

当然也有一个断开服务器的事件：

1
2
3
4
5
6
7
8
9
10
11
12
var Socket = new WebSocket('ws://echo.websocket.org');
Socket.onopen = function(){
	Socket.send("hello world");
}
Socket.onmessage = function(e){
	console.log(e);
	Socket.close();
	Socket.send("hello world");
}
Socket.onclose = function(){    // 断开服务器事件
	console.log("当前正处于已断开！");
}

此时控制台打印出来的内容如下图所示：
断开服务器事件

还会有一个错误事件：

1
2
// 当错误的时候就会触发这个事件
Socket.onerror = function(){console.log("error");}

需要注意的是：如果想发送数据的话，要等连接成功再发送，连接是需要时间的，如果你直接把发送的内容放在外面的话，会报一定的错误，如下代码所示：

1
2
3
 var Socket = new WebSocket('ws://echo.websocket.org');
Socket.onopen = function(){};
Socket.send("hello world");

此时控制台会报错，如下图所示：
报错信息
正确写法应该是如下所示：

1
2
3
4
var Socket = new WebSocket('ws://echo.websocket.org');
Socket.onopen = function(){
	Socket.send("hello world");
};

4. WebSocket的优点

  1. WebSocket是一个双向通信，客户端与服务器都可以主动传送数据给对方；
  2. 不用频繁创建TCP请求及销毁请求，减少网络带宽资源的占用，同时也节省服务器资源。

现阶段，对于WebSocket协议的使用量不是很大，大家可以相对了解一下。

5. 你是否了解过WebSocket

WebSocket和http一样，同属于应用层协议。它最重要的用途是实现了客户端和服务端之间的全双工通信，当服务端数据变化时，可以第一时间通知到客户端。
除此之外，它与http协议不同的地方还有：

  1. http只能由客户端发起，而WebSocket是双向的；
  2. WebSocket传输的数据包相对于http而言很小，很适合移动端使用；
  3. 没有同源限制，可以跨域共享资源。