WebSocket 双向通信

我不是女神ヾ 2024-04-17 10:19 92阅读 0赞

![在这里插入图片描述][8d8e0d8a542946af858489a536162608.gif_pic_center]

> 个人简介：Java领域新星创作者；阿里云技术博主、星级博主、专家博主；正在Java学习的路上摸爬滚打，记录学习的过程~  
> 个人主页：[.29.的博客][.29.]  
> 学习社区：[进去逛一逛~][Link 1]

> [![在这里插入图片描述][4501e7efa26a46eca0e67f062c7d75bd.png]][4501e7efa26a46eca0e67f062c7d75bd.png 1]

#### WebSocket 双向通信 ####

*   *  ?消息推送
     *  ?WebSocket API
     *   *  ⚪客户端 API
         *  ⚪服务端 API

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

### ?消息推送 ###

`消息推送的常见方式`：

*  **轮询方式：**
 *   *  1.  **客户端发起轮询请求：** 客户端定期（例如每隔一定时间）向服务器发送请求，询问是否有新的消息。这可以通过使用定时器或定时任务实现。
        2.  **服务器响应：** 服务器接收到客户端的轮询请求后，检查是否有新的消息或数据。如果有，服务器将相关信息作为响应返回给客户端；否则，服务器返回一个空响应或一个标识表示没有新消息。
        3.  **客户端处理响应：** 客户端收到服务器的响应后，解析响应数据。如果有新消息，则处理这些消息；如果响应为空或表示没有新消息，则继续等待下一次轮询。
        4.  **重复过程：** 客户端在一定的时间间隔内不断重复上述轮询过程，以确保及时获取到新消息。

*  **长轮询方式：**
 *   *  1.  **客户端发起请求：** 客户端通过Ajax等方式向服务器发送一个长轮询请求。
        2.  **服务器等待：** 服务器收到请求后，检查是否有新消息。如果没有新消息，服务器不会立即响应，而是等待一段时间。
        3.  **有新消息时响应：** 如果在等待期间有新消息到达，服务器会立即将消息作为响应发送给客户端。
        4.  **客户端处理响应：** 客户端收到响应后，处理消息，并立即发起下一个长轮询请求。
        5.  **重复过程：** 上述步骤反复进行，形成一个长轮询的循环。

*  **SEE(server-sent event)方式：服务器发送事件，是一种在客户端和服务器之间实现单向实时通信的技术。**
 *   *  SEE在服务器与客户端之间打开了一个单向通道；
     *  服务器响应不再是一次性的数据包，而是`Content-Type: text/event-stream`类型的数据流消息；
     *  当服务器有数据变更时，将数据 流式地传输到客户端；

*  **WebSocket方式：** WebSocket是一种**全双工通信协议，适用于实时双向通信。**
 *   *  1.  **建立WebSocket连接：** 客户端通过创建一个 WebSocket 对象来与服务器建立连接，使用 WebSocket 的 URL（例如 `ws://example.com/socket`）来指定连接的目标。
        2.  **监听WebSocket事件：** 客户端可以监听多种事件，例如 `open`、`message`、`close` 和 `error`。其中，`open` 事件表示连接已经建立，`message` 事件用于接收服务器发送的消息。
        3.  **服务器发送消息：** 服务器端通过 WebSocket 连接向客户端发送消息，在服务器用WebSocket对象的 `send` 方法实现。
        4.  **客户端发送消息（可选）：** 客户端也可通过 WebSocket 连接向服务器发消息。
        5.  **关闭WebSocket连接：** 当通信结束时，可以通过调用 WebSocket 对象的 `close` 方法来关闭连接。

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

### ?WebSocket API ###

#### ⚪客户端 API ####

在浏览器中，JavaScript提供了WebSocket API，它使开发人员能够创建WebSocket连接、发送和接收消息。基本的WebSocket客户端API包括以下几个主要接口和方法：

*  `WebSocket`: 这是WebSocket的主要接口，用于创建WebSocket实例。
 *  `onopen`: 当连接建立时触发的事件处理程序。
 *  `onmessage`: 当接收到消息时触发的事件处理程序。
 *  `send(data)`: 用于将数据发送到服务器。
 *  `onclose`: 当连接关闭时触发的事件处理程序。
 *  `onerror`: 当发生错误时触发的事件处理程序。

`JS代码示例`：

#### ⚪服务端 API ####

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

Java WebSocket 应用由一系列的`Endpoint`组成。`Endpoint`是一个java对象，代表WebSocket链接的一端，对于服务端，我  
们可以视为处理具体WebSocket消息的接口。

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

*  第一种是**编程式** ，即继`承类javax.websocket.Endpoint并实现其方法`。
 *  第二种是**注解式** ，即定义一个POJO,并`添加@ServerEndpoint相关注解`。

> Endpoint实例在WebSocket握手时创建，并在客户端与服务端链接过程中有效，最后在链接关闭时结束。**在Endpoint接口中明**  
> **确定义了与其生命周期相关的方法** ，规范实现者确保生命周期的各个阶段调用实例的相关方法。生命周期方法如下：
> 
> ![在这里插入图片描述][615afebf40ec43e29a740578c583e81d.png]

> ![在这里插入图片描述][b3a3104edd484f638fd65087932bd1f7.png]

*  在Java中，使用`javax.websocket`创建WebSocket服务器的基本示例：

import javax.websocket.*;
    import javax.websocket.server.ServerEndpoint;
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/3b8b4d905ddb42a48406a7269b1f48d6.png)
    
    @ServerEndpoint("/websocket")
    @Component
    public class MyWebSocketServer {
        
    
        @OnOpen
        public void onOpen(Session session) {
        
            System.out.println("WebSocket connection opened: " + session.getId());
        }
    
        @OnMessage
        public void onMessage(String message, Session session) {
        
            System.out.println("Message from client: " + message);
            session.getAsyncRemote().sendText("Hello, client!");
        }
    
        @OnClose
        public void onClose(Session session) {
        
            System.out.println("WebSocket connection closed: " + session.getId());
        }
    }

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

[![在这里插入图片描述][20a7f1b58dfb4660b75d7f021c157d57.png_pic_center]][20a7f1b58dfb4660b75d7f021c157d57.png_pic_center 1]

[8d8e0d8a542946af858489a536162608.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/ee6be5c295de41fe8edee22f7e04c10d.gif
[.29.]: https://blog.csdn.net/ebb29bbe?spm=1018.2226.3001.5343
[Link 1]: https://bbs.csdn.net/forums/185241f773fb401b8ca7994dc3d02333?joinKey=cyru4ex9o7wq-mz6v1koj5x-1-add3ae8dc3827dbbd4360c79af92bbbe
[4501e7efa26a46eca0e67f062c7d75bd.png]: https://img-blog.csdnimg.cn/direct/4501e7efa26a46eca0e67f062c7d75bd.png
[4501e7efa26a46eca0e67f062c7d75bd.png 1]: https://blog.csdn.net/ebb29bbe/category_12007200.html?spm=1001.2014.3001.5482
[615afebf40ec43e29a740578c583e81d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/77a4633efb9e4fc9bc18e1fe16095238.png
[b3a3104edd484f638fd65087932bd1f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/4bacbb1ff3984ab09a4baa10da9fa72d.png
[20a7f1b58dfb4660b75d7f021c157d57.png_pic_center]: https://img-blog.csdnimg.cn/20a7f1b58dfb4660b75d7f021c157d57.png#pic_center
[20a7f1b58dfb4660b75d7f021c157d57.png_pic_center 1]: https://blog.csdn.net/ebb29bbe?type=blog