WebSocket技术

ゝ一纸荒年。 2023-10-08 21:26 5阅读 0赞

### **1，WebSocket** ###

--------------------

#### **1.1 WebSocket介绍** ####

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

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

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

这种通信模型有一个弊端：HTTP 协议无法实现服务器主动向客户端发起消息。

这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。大多数 Web 应用程序将通过频繁的异步 AJAX 请求实现长轮询。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。

http协议：

![87b7e2fb9732445b96d660ade676327f.png][]

websocket协议：

![aa0a430784374f8aa28e7420a782a8a6.png][]

#### **1.2 websocket协议** ####

本协议有两部分：握手和数据传输。

握手是基于http协议的。

来自客户端的握手看起来像如下形式：

GET ws://localhost/chat HTTP/1.1
    Host: localhost
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
    Sec-WebSocket-Extensions: permessage-deflate
    Sec-WebSocket-Version: 13

来自服务器的握手看起来像如下形式：

HTTP/1.1 101 Switching Protocols
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
    Sec-WebSocket-Extensions: permessage-deflate

字段说明：

<table style=""> 
 <tbody> 
 <tr> 
 <td style="width:369px;vertical-align:top;height:52px;">头名称</td> 
 <td style="width:369px;vertical-align:top;height:52px;">说明</td> 
 </tr> 
 <tr> 
 <td style="width:369px;vertical-align:top;height:52px;">Connection：Upgrade</td> 
 <td style="width:369px;vertical-align:top;height:52px;">标识该HTTP请求是一个协议升级请求</td> 
 </tr> 
 <tr> 
 <td style="width:369px;vertical-align:top;height:52px;">Upgrade: WebSocket</td> 
 <td style="width:369px;vertical-align:top;height:52px;">协议升级为WebSocket协议</td> 
 </tr> 
 <tr> 
 <td style="width:369px;vertical-align:top;height:52px;">Sec-WebSocket-Version: 13</td> 
 <td style="width:369px;vertical-align:top;height:52px;">客户端支持WebSocket的版本</td> 
 </tr> 
 <tr> 
 <td style="width:369px;vertical-align:top;height:52px;">Sec-WebSocket-Key：</td> 
 <td style="width:369px;vertical-align:top;height:52px;">客户端采用base64编码的24位随机字符序列，服务器接受客户端HTTP协议升级的证明。要求服务端响应一个对应加密的Sec-WebSocket-Accept头信息作为应答</td> 
 </tr> 
 <tr> 
 <td style="width:369px;vertical-align:top;height:52px;">Sec-WebSocket-Extensions</td> 
 <td style="width:369px;vertical-align:top;height:52px;">协议扩展类型</td> 
 </tr> 
 </tbody> 
</table>

#### **1.3 客户端（浏览器）实现** ####

##### **1.3.1 websocket对象** #####

实现 WebSockets 的 Web 浏览器将通过 WebSocket 对象公开所有必需的客户端功能（主要指支持 Html5 的浏览器）。

以下 API 用于创建 WebSocket 对象：

varws=newWebSocket(url);

> 参数url格式说明： ws://ip地址:端口号/资源名称

##### **1.3.2 websocket事件** #####

WebSocket 对象的相关事件

<table style=""> 
 <tbody> 
 <tr> 
 <td style="width:246px;vertical-align:top;height:52px;">事件</td> 
 <td style="width:246px;vertical-align:top;height:52px;">事件处理程序</td> 
 <td style="width:246px;vertical-align:top;height:52px;">描述</td> 
 </tr> 
 <tr> 
 <td style="width:246px;vertical-align:top;height:52px;">open</td> 
 <td style="width:246px;vertical-align:top;height:52px;">websocket对象.onopen</td> 
 <td style="width:246px;vertical-align:top;height:52px;">连接建立时触发</td> 
 </tr> 
 <tr> 
 <td style="width:246px;vertical-align:top;height:52px;">message</td> 
 <td style="width:246px;vertical-align:top;height:52px;">websocket对象.onmessage</td> 
 <td style="width:246px;vertical-align:top;height:52px;">客户端接收服务端数据时触发</td> 
 </tr> 
 <tr> 
 <td style="width:246px;vertical-align:top;height:52px;">error</td> 
 <td style="width:246px;vertical-align:top;height:52px;">websocket对象.onerror</td> 
 <td style="width:246px;vertical-align:top;height:52px;">通信发生错误时触发</td> 
 </tr> 
 <tr> 
 <td style="width:246px;vertical-align:top;height:52px;">close</td> 
 <td style="width:246px;vertical-align:top;height:52px;">websocket对象.onclose</td> 
 <td style="width:246px;vertical-align:top;height:52px;">连接关闭时触发</td> 
 </tr> 
 </tbody> 
</table>

##### **1.3.3 WebSocket方法** #####

WebSocket 对象的相关方法:

<table style=""> 
 <tbody> 
 <tr> 
 <td style="width:369px;vertical-align:top;height:52px;">方法</td> 
 <td style="width:369px;vertical-align:top;height:52px;">描述</td> 
 </tr> 
 <tr> 
 <td style="width:369px;vertical-align:top;height:52px;">send()</td> 
 <td style="width:369px;vertical-align:top;height:52px;">使用连接发送数据</td> 
 </tr> 
 </tbody> 
</table>

#### **1.4 服务端实现** ####

Tomcat的7.0.5 版本开始支持WebSocket,并且实现了Java WebSocket规范(JSR356)。

Java WebSocket应用由一系列的WebSocketEndpoint组成。Endpoint 是一个java对象，代表WebSocket链接的一端，对于服务端，我们可以视为处理具体WebSocket消息的接口， 就像Servlet之与http请求一样。

我们可以通过两种方式定义Endpoint:

*  第一种是编程式， 即继承类 javax.websocket.Endpoint并实现其方法。

*  第二种是注解式, 即定义一个POJO, 并添加 @ServerEndpoint相关注解。

Endpoint实例在WebSocket握手时创建，并在客户端与服务端链接过程中有效，最后在链接关闭时结束。在Endpoint接口中明确定义了与其生命周期相关的方法， 规范实现者确保生命周期的各个阶段调用实例的相关方法。生命周期方法如下：

<table style=""> 
 <tbody> 
 <tr> 
 <td style="width:246px;vertical-align:top;height:52px;">方法</td> 
 <td style="width:246px;vertical-align:top;height:52px;">含义描述</td> 
 <td style="width:246px;vertical-align:top;height:52px;">注解</td> 
 </tr> 
 <tr> 
 <td style="width:246px;vertical-align:top;height:52px;">onClose</td> 
 <td style="width:246px;vertical-align:top;height:52px;">当会话关闭时调用。</td> 
 <td style="width:246px;vertical-align:top;height:52px;">@OnClose</td> 
 </tr> 
 <tr> 
 <td style="width:246px;vertical-align:top;height:52px;">onOpen</td> 
 <td style="width:246px;vertical-align:top;height:52px;">当开启一个新的会话时调用, 该方法是客户端与服务端握手成功后调用的方法。</td> 
 <td style="width:246px;vertical-align:top;height:52px;">@OnOpen</td> 
 </tr> 
 <tr> 
 <td style="width:246px;vertical-align:top;height:52px;">onError</td> 
 <td style="width:246px;vertical-align:top;height:52px;">当连接过程中异常时调用。</td> 
 <td style="width:246px;vertical-align:top;height:52px;">@OnError</td> 
 </tr> 
 </tbody> 
</table>

**服务端如何接收客户端发送的数据呢？**

通过为 Session 添加 MessageHandler 消息处理器来接收消息，当采用注解方式定义Endpoint时，我们还可以通过 @OnMessage 注解指定接收消息的方法。

**服务端如何推送数据给客户端呢？**

发送消息则由 RemoteEndpoint 完成， 其实例由 Session 维护， 根据使用情况， 我们可以通过Session.getBasicRemote 获取同步消息发送的实例 ， 然后调用其 sendXxx()方法就可以发送消息， 可以通过Session.getAsyncRemote 获取异步消息发送实例。

服务端代码：

@ServerEndpoint("/robin")
 public class ChatEndPoint {
 
 private static Set<ChatEndPoint> webSocketSet = new HashSet<>();
 
 private Session session;
 
 @OnMessage
 public void onMessage(String message, Session session) throws IOException {
 System.out.println("接收的消息是：" + message);
 System.out.println(session);
 //将消息发送给其他的用户
 for (Chat chat : webSocketSet) {
 if(chat != this) {
 chat.session.getBasicRemote().sendText(message);
 }
 }
 }
 
 @OnOpen
 public void onOpen(Session session) {
 this.session = session;
 webSocketSet.add(this);
 }
 
 @OnClose
 public void onClose(Session seesion) {
 System.out.println("连接关闭了。。。");
 }
 
 @OnError
 public void onError(Session session,Throwable error) {
 System.out.println("出错了。。。。" + error.getMessage());
 }
 }

[87b7e2fb9732445b96d660ade676327f.png]: https://img-blog.csdnimg.cn/img_convert/87b7e2fb9732445b96d660ade676327f.png
[aa0a430784374f8aa28e7420a782a8a6.png]: https://img-blog.csdnimg.cn/img_convert/aa0a430784374f8aa28e7420a782a8a6.png