WebSocket

发表于 更新于 分类于
本文字数： 9.5k 阅读时长 ≈ 9 分钟
简单介绍WebSocket相关知识，内容包括：简介（为什么需要WebSocket、什么是WebSocket、优点、WebSocket和Socket、一次Websocket握手请求、支持Websocket的服务器），HTML5 WebSocket（WebSocket属性、WebSocket事件、WebSocket方法、WebSocket实例），实现（STOMP、引入依赖、配置、消息类、控制器、网站客户端、Android客户端）。

WebSocket

第一节 简介

1.1 为什么需要WebSocket

我们已经有了HTTP协议，为什么还需要使用WebSocket呢？答案就是解决HTTP的缺陷-通信只能由客户端发起。

很多场景下我们需要由服务端主动向客户端推送消息，而HTTP协议这种单向请求的设计注定了服务器端有连续的状态变化时，客户端很难去获知。

早期，很多网站为了实现推送技术，所用的技术都是轮询。轮询是指由浏览器每隔一段时间（如每秒）向服务器发出HTTP请求，然后服务器返回最新的数据给客户端。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求与回复可能会包含较长的头部，其中真正有效的数据可能只是很小的一部分，所以这样会消耗很多带宽资源，最常见的场景就是聊天室。

比较新的轮询技术是Comet。这种技术虽然可以实现双向通信，但仍然需要反复发出请求。而且在Comet中普遍采用的HTTP长连接也会消耗服务器资源。

由此契机催生了WebSocket协议，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

1.2 什么是WebSocket

WebSocket是一种网络传输协议，可在单个TCP连接上进行全双工通信，位于OSI模型的应用层。

WebSocket协议诞生于2008年，最初在HTML5规范中被引用为TCPConnection，作为基于TCP的套接字API的占位符。2008年6月，Michael Carter进行了一系列讨论，最终形成了称为WebSocket的协议。

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

WebSocket是一种与HTTP不同的协议。两者都位于OSI模型的应用层，并且都依赖于传输层的TCP协议。 虽然它们不同，但是RFC 6455中规定：it is designed to work over HTTP ports 80 and 443 as well as to support HTTP proxies and intermediaries（WebSocket通过HTTP端口80和443进行工作，并支持HTTP代理和中介），从而使其与HTTP协议兼容。 为了实现兼容性，WebSocket握手使用HTTP Upgrade头[1]从HTTP协议更改为WebSocket协议。

WebSocket协议支持Web浏览器（或其他客户端应用程序）与Web服务器之间的交互，具有较低的开销，便于实现客户端与服务器的实时数据传输。 服务器可以通过标准化的方式来实现，而无需客户端首先请求内容，并允许消息在保持连接打开的同时来回传递。通过这种方式，可以在客户端和服务器之间进行双向持续对话。 通信通过TCP端口80或443完成，这在防火墙阻止非Web网络连接的环境下是有益的。另外，Comet之类的技术以非标准化的方式实现了类似的双向通信。

与HTTP不同，WebSocket提供全双工通信。[2][3]此外，WebSocket还可以在TCP之上实现消息流。TCP单独处理字节流，没有固有的消息概念。 在WebSocket之前，使用Comet可以实现全双工通信。但是Comet存在TCP握手和HTTP头的开销，因此对于小消息来说效率很低。WebSocket协议旨在解决这些问题。

  • 单工通信：即只能A到B（广播），同一时间只允许一方向另一方传送消息，另一方则不允许反过来传送。
  • 全双工：指在发送数据的同时也能接收数据，二者同步进行。
  • 半双工：指在一个时间段内只有一个动作发生，数据信息可以沿两个方向传送，但同一时刻一个信道只允许单方向传送，因此也称为双向交替通信。如果要改变传输方向，需由开关进行切换。半双工方式要求收发两端都有发送装置和接收装置。由于这种方式要频繁变换信道方向，故效率低，但可以节约传输线路。半双工方式适用于终端与终端之间的会话式通信。

WebSocket协议规范将ws（WebSocket）和wss（WebSocket Secure）定义为两个新的统一资源标识符（URI）方案[4]，分别对应明文和加密连接，其中wss表示使用了TLS的Websocket。除了方案名称和片段ID（不支持#）之外，其余的URI组件都被定义为此URI的通用语法。[5]

1
2
ws://example.com/wsapi
wss://secure.example.com/wsapi

默认情况下，Websocket协议使用80端口；运行在TLS之上时，默认使用443端口。

使用浏览器开发人员工具，开发人员可以检查WebSocket握手以及WebSocket框架。

1.3 优点

  • 较少的控制开销。在连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小。在不包含扩展的情况下，对于服务器到客户端的内容，此头部大小只有2至10字节（和数据包长度有关）；对于客户端到服务器的内容，此头部还需要加上额外的4字节的掩码。相对于HTTP请求每次都要携带完整的头部，此项开销显著减少了。

  • 更强的实时性。由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少；即使是和Comet等类似的长轮询比较，其也能在短时间内更多次地传递数据。

  • 保持连接状态。与HTTP不同的是，Websocket需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息。而HTTP请求可能需要在每个请求都携带状态信息（如身份认证等）。

  • 更好的二进制支持。Websocket定义了二进制帧，相对HTTP，可以更轻松地处理二进制内容。

  • 可以支持扩展。Websocket定义了扩展，用户可以扩展协议、实现部分自定义的子协议。如部分浏览器支持压缩等。

  • 更好的压缩效果。相对于HTTP压缩，Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率。[14]

1.4 WebSocket和Socket

WebSocket和Socket 的区别：

  • 软件通信有七层结构，下三层结构偏向与数据通信，上三层更偏向于数据处理，中间的传输层则是连接上三层与下三层之间的桥梁，每一层都做不同的工作，上层协议依赖与下层协议。基于这个通信结构的概念。
  • Socket 其实并不是一个协议，是应用层与 TCP/IP 协议族通信的中间软件抽象层，它是一组接口。当两台主机通信时，让 Socket 去组织数据，以符合指定的协议。TCP 连接则更依靠于底层的 IP 协议，IP 协议的连接则依赖于链路层等更低层次。
  • WebSocket 则是一个典型的应用层协议。
  • 总的来说：Socket 是传输控制层协议，WebSocket 是应用层协议。

1.5 一次Websocket握手请求

客户端请求

1
2
3
4
5
6
7
GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: example.com
Origin: http://example.com
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13

服务器回应：

1
2
3
4
5
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=
Sec-WebSocket-Location: ws://example.com/
  • Connection 必须设置 Upgrade，表示客户端希望连接升级。
  • Upgrade 字段必须设置 Websocket，表示希望升级到 Websocket 协议。
  • Sec-WebSocket-Key 是随机的字符串，服务器端会用这些数据来构造出一个 SHA-1 的信息摘要。把 “Sec-WebSocket-Key” 加上一个特殊字符串 “258EAFA5-E914-47DA-95CA-C5AB0DC85B11”，然后计算 SHA-1 摘要，之后进行 BASE-64 编码，将结果做为 “Sec-WebSocket-Accept” 头的值，返回给客户端。如此操作，可以尽量避免普通 HTTP 请求被误认为 Websocket 协议。
  • Sec-WebSocket-Version 表示支持的 Websocket 版本。RFC6455 要求使用的版本是 13，之前草案的版本均应当弃用。
  • Origin 字段是可选的，通常用来表示在浏览器中发起此 Websocket 连接所在的页面，类似于 Referer。但是，与 Referer 不同的是，Origin 只包含了协议和主机名称。
  • 其他一些定义在 HTTP 协议中的字段，如 Cookie 等，也可以在 Websocket 中使用。

1.6 支持Websocket的服务器

在服务器方面，网上都有不同对websocket支持的服务器：

第二节 HTML5 WebSocket

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

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

以下 API 用于创建 WebSocket 对象。

1
var Socket = new WebSocket(url, [protocol]);

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

2.1 WebSocket 属性

属性 描述
Socket.readyState 只读属性 readyState 表示连接状态，可以是以下值：0 - 表示连接尚未建立。1 - 表示连接已建立，可以进行通信。2 - 表示连接正在进行关闭。3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

2.2 WebSocket 事件

事件 事件处理程序 描述
open Socket.onopen 连接建立时触发
message Socket.onmessage 客户端接收服务端数据时触发
error Socket.onerror 通信发生错误时触发
close Socket.onclose 连接关闭时触发

2.3 WebSocket 方法

方法 描述
Socket.send() 使用连接发送数据
Socket.close() 关闭连接

2.4 WebSocket 实例

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

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

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
<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>菜鸟教程(runoob.com)</title>
    
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>

python服务部分省略。

第三节 实现

有多种方式来实现 WebSocket 协议，Spring Boot 采用基于 STOMP 的实现，常见的还有如 Socket.IO等。

3.1 STOMP

STOMP：即Simple Text Orientated Messaging Protocol，它是一个简单的文本消息传输协议，属于 WebSocket 的子协议， 提供了一个可互操作的连接格式，允许STOMP客户端与任意STOMP消息代理（Broker）进行交互。STOMP协议由于设计简单， 易于开发客户端，因此在多种语言和多种平台上得到广泛地应用。

3.2 引入依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
    <exclusions>
        <exclusion>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
        </exclusion>
    </exclusions>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-jetty</artifactId>
</dependency>

此处使用jetty代替内置的Tomcat服务器，可以只引入spring-boot-starter-websocket即可。

3.3 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
        stompEndpointRegistry.addEndpoint("/simple")
                .setAllowedOrigins("*") //解决跨域问题
                .withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
    }
}
  • @EnableWebSocketMessageBroker 注解表示开启使用STOMP协议，来传输基于代理的消息，Broker即代理。
  • registerStompEndpoints方法表示注册STOMP协议的节点，并指定映射的URL。
  • addEndpoint().withSockJS()用来注册STOMP协议节点，同时指定使用SockJS。
  • configureMessageBroker方法用来配置消息代理，此处实现推送功能，所以是/topic。

3.4 消息类

请求消息类。

1
2
3
4
5
6
7
public class RequestMessage {
    private String name;

    public String getName() {
        return name;
    }
}

响应消息类。

1
2
3
4
5
6
7
8
9
10
11
public class ResponseMessage {
    private String responseMessage;

    public ResponseMessage(String responseMessage) {
        this.responseMessage = responseMessage;
    }

    public String getResponseMessage() {
        return responseMessage;
    }
}

3.5 控制器

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
@Controller
public class WsController {

    private final SimpMessagingTemplate messagingTemplate;

    @Autowired
    public WsController(SimpMessagingTemplate messagingTemplate) {
        this.messagingTemplate = messagingTemplate;
    }

    @MessageMapping("/welcome")
    @SendTo("/topic/say")
    public ResponseMessage say(RequestMessage message) {
        System.out.println(message.getName());
        return new ResponseMessage("welcome," + message.getName() + " !");
    }

    /**
     * 定时推送消息
     */
    @Scheduled(fixedRate = 1000)
    public void callback() {
        // 发现消息
        DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        messagingTemplate.convertAndSend("/topic/callback", "定时推送消息时间: " + df.format(new Date()));
    }
}

  • say方法上添加的@MessageMapping注解和我们之前使用的@RequestMapping类似。

  • @SendTo注解表示当服务器有消息需要推送的时候， 会对订阅了@SendTo中路径的浏览器发送消息。

  • 除此之外，还定义了一个定时推送消息方法，这个方法每隔1秒会主动给订阅了主题/topic/callback的客户端推送消息。

  • 到此为止服务器端就编写完成，可以看到服务器的编写非常简单。

3.6 网站客户端

测试代码

页面上面点击”连接”按钮后，开始连接到/simple节点。输入名字后点击发送，将向/welcome的url发送消息。

同时订阅了两个主题：/topic/say 和 /topic/callback，会接收到服务器的say方法的返回，以及定时推送消息。

3.7 Android客户端

参考 StompProtocolAndroid

参考：

🔗 WebSocket-维基百科
🔗 html5-websocket-菜鸟教程
🔗 WebSocket 教程
🔗 SpringBoot系列 - 集成WebSocket实时通信