WebSocket系列之基础知识以及设计思路

一、WebSocket介绍
- 1.为什么要使用WebSocket
- 2.WebSocket能够有效的解决以下问题：
二、WebSocket协议内容
- 1.请求Header
- 2.响应Header
三、WebSocket API介绍
四、基础知识
- 1.后端基础知识
- 2.前端基础知识
五、总体实现思路
六、总结

一、WebSocket介绍

WebSockets 是一个可以创建和服务器间进行双向会话的高级技术。通过这个API你可以向服务器发送消息并接受基于事件驱动的响应，这样就不用向服务器轮询获取数据了。

双向会话 指的是客户端和服务端都能够通过WebSocket来进行数据的互相传递，即服务端可以给客户端推送数据，客户端也可以通过WebSocket来传递数据。例如，我们的一个聊天室功能就是一个典型的场景。

1.为什么要使用WebSocket

在不使用WebSocket时，如果我们需要建立一条长连接，有以下几种方法：

轮询
长轮询（常用）
SSE(Server Send Event)

下面，我们对这几个都进行简单的介绍。

轮询
轮询是最早在客户端用来模拟长连接的一种方式。他通过客户端定时向服务端发送HTTP请求来模拟客户端向服务端发送数据，而服务端的数据则是在客户端发送HTTP请求后跟随返回。

这种方案能够让客户端的数据几乎实时的到达，但是缺点也显而易见：服务端的数据需要在客户端的请求回来后才能带回。如果HTTP请求的间隔太短，则会导致大量的网络开销；如果间隔太长，这将导致数据传递的不及时。

长轮询
长轮询是在轮询的基础上改进的一种方式。在客户端发送HTTP请求且服务端收到请求时，服务端会先维持这个请求不返回。在特定的时间内（一般为30秒，因为通常HTTP判断超时时间为30秒），如果服务端没有数据，则回应这个请求；服务端有数据需要发送时，则立即通过HTTP请求的响应将数据传递给客户端。客户端收到响应后，立即发起下一次的HTTP请求。

这种方案能够解决轮询中带来的服务端数据不能及时传递的问题，但是带来的网络花销大的问题仍然无法解决。

SSE(Server Send Event)
SSE是一个新的协议，作用为服务端向客户端推送数据。他通过自定义的SSE协议来实现单向的数据推送。SSE的缺点是数据只能从服务端像客户端传递，而数据不能通过客户端向服务端传递。

2.WebSocket能够有效的解决以下问题：

带宽问题：WebSocket相对于HTTP来说协议头更加小，同时按需传递。
数据实时性问题：WebSocket相对于轮询和长轮询来说，能够实时传递数据，延迟更小。
状态问题：相较于HTTP的无状态请求，WebSocket在建立连接后能够维持特定的状态。

二、WebSocket协议内容

WebSocket协议是通过HTTP协议升级而来。只需要在HTTP协议基础上增加两次握手，即可建立WebSocket连接（如果是需要通过SSL加密，则还需要进行SSL握手过程），下面我们简单介绍以下Header相关字段。

1.请求Header

请求Header如下：

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

其中：

Host: server.example.com：表示将要连接的WebSocket地址。
Connection: Upgrade：需要升级HTTP连接。
Upgrade: websocket：将HTTP连接升级至WebSocket连接。
Sec-WebSocket-Key:dGhlIHNhbXBsZSBub25jZQ== ：客户端生成的WebSocket连接密钥。
Sec-WebSocket-Protocol: chat, superchat：指定哪些协议是客户端可以接受的。
Sec-WebSocket-Version: 13：WebSocket版本号。

2.响应Header

响应Header如下：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat

其中：

Upgrade: websocket：确认将HTTP连接升级至WebSocket连接。
-Connection: Upgrade ：确认升级HTTP连接。
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo：服务端根据客户端的连接密钥生成的服务端密钥。
Sec-WebSocket-Protocol: chat：选择的WebSocket协议。

三、WebSocket API介绍

对WebSocket的协议有了一个初步的了解，下面让我们看下，在具体的使用场景中，如何使用WebSocket。

WebSocket的API不多，下面我们就根据使用的顺序：

建立连接
收到消息
发送消息
关闭连接

1.建立连接

WebSocket通过初始化实例来建立连接，通过 open 事件回调函数来确认连接建立成功，具体示例如下：

const webSocket = new WebSocket('ws://server.example.com');

webSocket.addEventListener('open', (event) => {
    
    
    // 建立连接成功
});

在WebSocket建立ws连接时，url可以是域名或者IP地址；但是当建立的连接是wss（加密WebSocket）时，url必须是域名，因为需要配置相应的证书，而证书是针对域名的。

2.收到消息

WebSocket通过 message 事件来接收消息。

socket.addEventListener('message', function (event) {
    
    
    console.log('Message from server', event.data);
});

WebSocket可以传递 String 、 ArrayBuffer 和 Blob 三种数据类型，因此在收到消息时可能是其中的任意一种。其中， String 和 ArrayBuffer 使用的最多。

如果是 String 类型，直接通过字符串处理函数即可进行相关转换，如JSON等格式。
如果是二进制 Blob 类型，则需要使用ArrayBuffer和DataView来进行处理。

3.发送消息

WebSocket通过 send 方法来发送消息。


webSocket.send(data);

示例中的data字段，也有可能是收到消息所说的String、ArrayBuffer和Blob三种数据类型之一。

4.关闭连接

4.1 被动关闭

当服务端主动关闭WebSocket连接时，会通过WebSocket向客户端发送一个close数据包，WebSocket的 close 事件会触发。此时，客户端是被动关闭了连接。

webSocket.addEventListener('close', (closeEvent) => {
    
    
    
});

注：当网络断开时，WebSocket连接并不会被动关闭，因为没有收到关闭的数据包。

4.2 主动关闭

客户端可以通过WebSocket提供的 close 方法来主动关闭长连接。


webSocket.close();

目前该方法有两个参数：

第一个参数表示关闭连接的状态号，默认为1000，表示正常关闭。
第二个参数为关闭原因，是一个不长于123字节的UTF-8文本。

四、基础知识

1.后端基础知识

后端通过配置文件注册一个ServerEndpointExporter类型的bean，顾名思义，该类叫做服务端点导出器，该bean会自动扫描并组测用注解@ServerEndpoint标记的类。
使用@ServerEndpoint标注的类，会被ServerEndpointExporter扫描注册成一个服务端点，可以理解为一个webSocket的服务器，@ServerEndpoint具有一个value属性，该属性用来指定连接该服务端点的uri，该uri可以包含如/chatServer/{id}这样的uri模板，只要id不同则可进行多个webSocket连接，否则如value设置为"/chatServer"的服务端点将只会接受一个uri为"/chatServer"的连接。
@ServerEndpoint标注的服务端点类，包含一下几个常用的注解

@OnOpen

用于监听建立连接，当有客户端与该服务端点建立连接时，将会自回调该注解标注的方法

@OnClose

用于监听连接关闭，当客户端与该服务端点断开连接时，将会回调该注解标注的方法

@OnError

用于监听该连接上的任何错误，当客户端与该服务端点的连接发生任何异常，都将回调该注解标注的方法

注意该方法的参数必选Throwable，可选Sessiion以及0-n个String参数，且String参数需要使用@PathParam注解标注

@OnMessage

用于监听客户端向服务端发送消息，当客户端与服务端发送消息时，将会回调该注解标注的方法

@OnPathParam

用以获取连接上的uri模块中的值

session对象

一个session即一个webSocket连接，使用对应的session调用其getBasicRemote().sendText(“message”)即可向其发送消息

2.前端基础知识

构建一个连接服务端点的socketUrl,WebSocket使用的是ws协议，所以以ws开头，uri和后端服务端点定义的value保持一致，如@ServerEndpoint(value=“/chatServer/{username}”)


let socketUrl = "ws://localhost:8080/chatServer/" + username;

根据socketUrl创建一个socket对象


const socket = new WebSocket(socketUrl);

为socket对象的属性设置回调函数

//连接建立时触发
socket.opopen = () - > {
    
    }
//接收到来自服务器的消息时触发
socket.onmessage = () -> {
    
    }
//连接关闭时触发
socket.onclose= () -> {
    
    }
//连接发生异常时触发
socket.οnerrοr= ()-> {
    
    }

使用socket对象的方法发送消息


socket.send("message")；

关闭socket的连接


socket.close();

五、总体实现思路

后端利用@ServerEndpointExporter和@ServerEndpoint注册一个WebSocket的服务端点，并通过注解监听相应的事件，前端创建一个WebSocket的对象，通过为WebSocket的属性设置回调函数监听以及send()方法向服务器发送消息

业务细节：

后端需要使用一个集合保存当前连接的用户的session，用于向这些session连接发送消息，最好为每个session使用一个key标记

比如使用hashMap，key为用户名，value为该用户的session，接收到消息时根据消息中的用户名去拿到对应的消息，然后向其发送消息。

六、总结

本文主要是介绍了一下WebSocket相关的基础知识。

通过WebSocket的长连接，客户端和服务端可以进行大量的数据传输而不会带来相关的性能问题，这给Web端带来了极大的功能增强。目前Web端可以使用WebSocket来进行IM相关功能开发，或者实时协作等需要与服务端进行大量数据交互的功能，并且不需要像之前一样使用长轮询的Hack方式来实现。