WebSocket 原理_websocket原理

一、 什么是 WebSocket

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工（full-duplex）通信，即允许服务器主动发送信息给客户端。因此，在WebSocket中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，客户端和服务器之间的数据交换变得更加简单。

什么是单工、半双工、全工通信？

• 信息只能单向传送为单工；
• 信息能双向传送但不能同时双向传送称为半双工；
• 信息能够同时双向传送则称为全双工。

在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接， 并进行双向数据传输。

WebSocket 本质上一种计算机网络应用层的协议，用来弥补 http 协议在持久通信能力上的不足。

WebSocket 协议在2008年诞生，2011年成为国际标准。现在最新版本浏览器都已经支持了。

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

WebSocket 的其他特点包括：

（1）建立在 TCP 协议之上，服务器端的实现比较容易。
（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据。
（5）没有同源限制，客户端可以与任意服务器通信。
（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

二、为什么需要 WebSocket？

我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？
因为 HTTP 协议有一个缺陷：通信只能由客户端发起，不具备服务器推送能力。比如，我们想了解查询今天的实时数据，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。在WebSocket出现之前，我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。轮询的效率低，非常浪费资源。

传统的实现即时通信的方式

• ajax轮询
  ajax轮询的原理非常简单，让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。ajax轮询 需要服务器有很快的处理速度和资源。
• long poll（长轮询）
  long poll 其实原理跟 ajax轮询 差不多，都是采用轮询的方式，不过采取的是阻塞模型（一直打电话，没收到就不挂电话），也就是说，客户端发起连接后，如果没消息，就一直不返回Response给客户端。直到有消息才返回，返回完之后，客户端再次建立连接，周而复始。long poll 需要有很高的并发，也就是说同时接待客户的能力。

在 WebSocket 协议出现以前，创建一个和服务端进双通道通信的 web 应用，需要依赖HTTP协议，进行不停的轮询，这会导致一些问题：

• 服务端被迫维持来自每个客户端的大量不同的连接
• 大量的轮询请求会造成高开销。

因为http协议本身是没有持久通信能力的，但是我们在实际的应用中，是很需要这种能力的，所以为了解决这些问题，WebSocket 协议由此而生。

三、WebSocket 与 HTTP 的区别

http协议是短链接，每次请求之后，都会关闭连接，下次重新请求数据，需要再次打开连接。
WebSocket协议是一种长连接，只需要通过一次请求来初始化链接，然后所有的请求和响应都是通过这个TCP链接进行通信。

WebSocket 与 HTTP 的关系图：

相同点： 都是一样基于TCP的，都是可靠性传输协议。都是应用层协议。

联系： WebSocket在建立握手时，数据是通过HTTP传输的。但是建立之后，在真正传输时候是不需要HTTP协议的。

不同点：
1、 WebSocket 是双向通信协议，模拟 Socket 协议，可以双向发送或接受信息，而 HTTP 是单向的；
2、 WebSocket 是需要浏览器和服务器握手进行建立连接的，而 http 是浏览器发起向服务器的连接。
3、 虽然 HTTP/2 也具备服务器推送功能，但 HTTP/2 只能推送静态资源，无法推送指定的信息。

Socket
Socket其实并不是一个协议，而是为了方便使用TCP或UDP而抽象出来的一层，是位于应用层和传输控制层之间的一组接口。当两台主机通信时，必须通过Socket连接，Socket则利用TCP/IP协议建立TCP连接。TCP连接则更依靠于底层的IP协议，IP协议的连接则依赖于链路层等更低层次。

WebSocket与Socket区别：
Socket是传输控制层协议，WebSocket是应用层协议。

四、WebSocket协议的原理

与http协议一样， WebSocket 协议也需要通过已建立的TCP连接来传输数据。具体实现上是通过http协议建立通道，然后在此基础上用真正 WebSocket 协议进行通信，所以WebSocket协议和http协议是有一定的交叉关系的。

WebSocket 是一个持久化的协议，相对于 HTTP 这种非持久的协议来说。HTTP 的生命周期通过 Request 来界定，也就是一个 Request 一个 Response ，那么在 HTTP1.0 中，这次 HTTP 请求就结束了。
在 HTTP1.1 中进行了改进，使得有一个 keep-alive，也就是说，在一个 HTTP 连接中，可以发送多个 Request，接收多个 Response。但是 Request = Response， 在 HTTP 中永远是这样，也就是说一个 Request 只能有一个 Response。而且这个 Response 也是被动的，不能主动发起。
首先 WebSocket 是基于 HTTP 协议的，或者说借用了 HTTP 协议来完成一部分握手。

首先我们来看个典型的 WebSocket 握手

	GET /chat HTTP/1.1
	Host: server.example.com
	Upgrade: websocket
	Connection: Upgrade
	Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
	Sec-WebSocket-Protocol: chat, superchat
	Sec-WebSocket-Version: 13
	Origin: http://example.com  
1
2
3
4
5
6
7
8

熟悉 HTTP 的童鞋可能发现了，这段类似 HTTP 协议的握手请求中，多了这么几个东西。

	Upgrade: websocket
	Connection: Upgrade
1
2

这个就是 WebSocket 的核心了，告诉 Apache 、 Nginx 等服务器：注意啦，我发起的请求要用 WebSocket 协议，快点帮我找到对应的助理处理~而不是那个老土的 HTTP 。

	Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
	Sec-WebSocket-Protocol: chat, superchat
	Sec-WebSocket-Version: 13
1
2
3

首先， Sec-WebSocket-Key 是一个 Base64 encode 的值，这个是浏览器随机生成的，告诉服务器：泥煤，不要忽悠我，我要验证你是不是真的是 WebSocket 助理。
然后， Sec_WebSocket-Protocol 是一个用户定义的字符串，用来区分同 URL 下，不同的服务所需要的协议。简单理解：今晚我要服务A，别搞错啦~
最后， Sec-WebSocket-Version 是告诉服务器所使用的 WebSocket Draft （协议版本），在最初的时候，WebSocket 协议还在 Draft 阶段，各种奇奇怪怪的协议都有，而且还有很多期奇奇怪怪不同的东西，什么 Firefox 和 Chrome 用的不是一个版本之类的，当初 WebSocket 协议太多可是一个大难题。不过现在还好，已经定下来啦~大家都使用同一个版本：服务员，我要的是13岁的噢→_→

然后服务器会返回下列东西，表示已经接受到请求， 成功建立 WebSocket 啦！

	HTTP/1.1 101 Switching Protocols
	Upgrade: websocket
	Connection: Upgrade
	Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
	Sec-WebSocket-Protocol: chat
1
2
3
4
5

这里开始就是 HTTP 最后负责的区域了，告诉客户，我已经成功切换协议啦~

	Upgrade: websocket
	Connection: Upgrade
1
2

依然是固定的，告诉客户端即将升级的是 WebSocket 协议，而不是 mozillasocket ，lurnarsocket 或者 shitsocket。

然后， Sec-WebSocket-Accept 这个则是经过服务器确认，并且加密过后的 Sec-WebSocket-Key。服务器：好啦好啦，知道啦，给你看我的 ID CARD 来证明行了吧。

后面的， Sec-WebSocket-Protocol 则是表示最终使用的协议。至此，HTTP 已经完成它所有工作了，接下来就是完全按照 WebSocket 协议进行了。

WebSocket 连接的过程是：

• 首先，客户端发起http请求，经过3次握手后，建立起TCP连接；http 请求里存放 WebSocket 支持的版本号等信息，如：Upgrade、Connection、WebSocket-Version等；
• 然后，服务器收到客户端的握手请求后，同样采用HTTP协议回馈数据；
• 最后，客户端收到连接成功的消息后，开始借助于TCP传输信道进行全双工通信。

五、WebSocket 的优缺点

优点：

• WebSocket 协议一旦建议后，互相沟通所消耗的请求头是很小的
• 服务器可以向客户端推送消息了

缺点：

• 少部分浏览器不支持，浏览器支持的程度与方式有区别

六、WebSocket 的使用

1. WebSocket 构造函数

WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例。

语法：var ws = new WebSocket(url，[protocol]);

• url：指定连接的 URL
• protocol：第二个参数 protocol 是可选的，指定了可接受的子协议。它既可以是字符串，也可以是字符串数组。服务端和客户端使用的协议必须一致，这样收发消息彼此才能理解，你可以定义一个或多个客户端使用的协议，服务端会选择一个来使用，一个客户端和一个服务端之间只能有一个协议。

协议这个参数有三种：
1.注册协议：根据RFC6455（WebSocket 协议）和IANA被官方注册的标准协议。例如 微软的SOAP。
2.开放协议：被广泛使用的标注协议，例如XMPP和STOMP。但没有被正式注册。
3.自定义协议：自己编写和使用的WebSocket的协议。

2. WebSocket 属性

3. WebSocket 事件

4. WebSocket 方法

5. 在Vue 中的使用WebSocket

（1）首先需要判断浏览器是否支持WebSocket 。

方法一：
	if (typeof WebSocket != 'undefined') {
	    console.log("您的浏览器支持Websocket通信协议")
	}else{
		alert("您的浏览器不支持Websocket通信协议，请使用Chrome或者Firefox浏览器！")
	}
	
方法二：
	if (!!window.WebSocket && window.WebSocket.prototype.send) ｛
	     console.log("您的浏览器支持Websocket通信协议")
	}else{
		alert("您的浏览器不支持Websocket通信协议，请使用Chrome或者Firefox浏览器！")
	}
1
2
3
4
5
6
7
8
9
10
11
12
13

WebSocket在各个浏览器上的支持情况：

（2）在组件加载的时候连接WebSocket ，在组件销毁的时候断开WebSocket 。

核心代码

<template>
    <div>
        <button @click="send">发消息</button>
    </div>
</template>

<script>
export default {
    data () {
        return {
            path:"ws://192.168.0.200:8005/qrCodePage/ID=1/refreshTime=5",
            socket:""
        }
    },
    mounted () {
        // 初始化
        this.init()
    },
    methods: {
        init: function () {
            if(typeof WebSocket != 'undefined'){
                alert("您的浏览器不支持WebSocket ")
            }else{
                // 实例化socket
                this.socket = new WebSocket(this.path)
                // 监听socket连接
                this.socket.onopen = this.open
                // 监听socket错误信息
                this.socket.onerror = this.error
                // 监听socket消息
                this.socket.onmessage = this.getMessage
            }
        },
        open: function () {
            console.log("WebSocket 连接成功")
        },
        error: function () {
            console.log("连接错误")
        },
        getMessage: function (msg) {
            console.log(msg.data)
        },
        send: function () {
            this.socket.send(params)
        },
        close: function () {
            console.log("WebSocket 已经关闭")
        }
    },
    destroyed () {
        // 销毁监听
        this.socket.onclose = this.close();
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

七、WebSocket应用场景

八、与WebSocket相似的技术

1.Server-Sent Events(SSE)：服务端推送技术
2. SPDY :目前已经不再维护，由HTTP/2取代
3.WebRTC :处理流数据，现在多用于直播等