当前位置： 首页 > article >正文

了解 WebSocket

article 2024/10/25 11:31:17

了解 WebSocket

    • 轮询方式、
      • 短轮询
      • 长轮询
      • SSE
    • WebSocket
      • 为什么说 WebSocket 是基于 Http 协议的？
      • 如何通过 `Sec-WebSocket-Key` 与 验证 `Sec-WebSocket-Accept`
        • 验证 demo
    • SpringBoot 中使用 WebSocket
      • 引入依赖
      • 增加 WebSocketConfig
      • 修改 ServerEndpointConfig
      • 定义 ServerEndpoint
      • @OnOpen
      • @OnClose
      • @OnMessage
      • Session
      • 样例
    • 前端使用 WebSocket
      • 样例

轮询方式、

短轮询

实现方式：浏览器以指定的时间向服务器发出 HTTP 请求，服务器实时返回数据给浏览器。

长轮询

HTTP1.1

浏览器发送异步请求，服务端如果没有数据返回则在服务端进行阻塞，有数据返回则立马返回。超时则触发超时机制。

SSE

server-send event 服务器发送事件。

  • SSE 在服务器和客户端之间打开一个单向通道。服务器 -> 客户端。
  • 服务端响应的不再是一次性的数据包。而是 text/event-stream 类型的数据流信息
  • 服务器有数据变更时将数据流式传输到客户端。

WebSocket

WebSocket 是一种基于 TCP 连接进行全双工通信的协议，允许服务器主动向客户端推送信息，客户端也能实时接收服务器的响应。

全双工：允许数据在两个方向上同时传输。TCP 协议是全双工的。

半双工：允许数据在两个方向上传输，但是同一时间段内只允许一个方向上传输。

image-20240902214914519

为什么说 WebSocket 是基于 Http 协议的？

建立全双工通信的关键步骤

  1. 客户端发起 握手请求：客户端通过 HTTP 请求来开始握手过程，请求中包括 Connection：Upgrade、Upgrade：websocket，Sec-WebSocket-Key：随机的Base64值 等特殊的请求头。
  2. 服务端响应 握手请求：如果服务器支持 WebSokcet 并接受客户端的请求，它就会响应一个 HTTP 101 Switching Protocols 状态码并会提供 Sec-WebSocket-Accept 响应头信息。
  3. 握手成功，客户端与服务器之间就建立了一个 WebSocket 的连接。并且这个阶段就跟 http 无关了，可以实时双向传输数据。

  • 请求头

    • Upgrade：必须设置为 websocket，表示希望升级到 WebSocket 协议。

    • Sec-WebSocket-Key：一个随机生成的 16 字节的字符串，经过 Base64 编码，用于验证握手的安全性。

    • Sec-WebSocket-Version：指定 WebSocket 协议的版本，必须为 13。

    • Sec-WebSocket-Protocol：可选字段，表示客户端希望使用的子协议列表。

    • Sec-WebSocket-Extensions：可选字段，表示客户端希望使用的扩展列表。

  • 响应头

  • HTTP/1.1 101 Switching Protocols：状态行，表示服务器接受了请求并将连接升级。

  • Connection：必须设置为 Upgrade，表示这是一个升级请求。

  • Upgrade：必须设置为 websocket，表示已成功升级到 WebSocket 协议。

  • Sec-WebSocket-Accept：服务器通过对 Sec-WebSocket-Key 进行 SHA-1 哈希计算并 Base64 编码后生成的值，用于验证握手的安全性。

  • Sec-WebSocket-Protocol：可选字段，表示服务器选择的子协议。

  • Sec-WebSocket-Extensions：可选字段，表示服务器选择的扩展。

如何通过 Sec-WebSocket-Key 与 验证 Sec-WebSocket-Accept

258EAFA5-E914-47DA-95CA-C5AB0DC85B11 这个是一个固定的 guid 是 WebSocket 协议规范的一部分，它在 RFC 6455 文档中定义。

  1. Sec-WebSocket-Key+ 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 凭借后转换为 字节序列
  2. 对这个字节序列进行 SHA-1的哈希计算 （不可逆）
  3. 再对加密后的字节序列进行 Base64编码
  4. 比较 Sec-WebSocket-Accept 是否一致，一致代表验证成功
验证 demo
public static void main(String[] args) {
        try {
            // 客户端提供的 Sec-WebSocket-Key
            String webSocketKey = "q/cmokhHZFPydhuFxTTC/Q==";

            // 固定的 GUID
            String magicGuid = "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";

            // 拼接字符串
            String concatenated = webSocketKey + magicGuid;

            // 计算 SHA-1 哈希值
            MessageDigest digest = MessageDigest.getInstance("SHA-1");
            byte[] hash = digest.digest(concatenated.getBytes());
            // 进行 Base64 编码
            String webSocketAccept = Base64.getEncoder().encodeToString(hash);

            // 输出计算结果
            System.out.println("编码后 Sec-WebSocket-Accept: " + webSocketAccept);

            // 比较计算结果与提供的 Sec-WebSocket-Accept
            String providedWebSocketAccept = "wPTfN8RfqGIiK9Wgk5jnefJSZA8=";
            if (webSocketAccept.equals(providedWebSocketAccept)) {
                System.out.println("Sec-WebSocket-Accept 标头有效。");
            } else {
                System.out.println("Sec-WebSocket-Accept 标头无效。");
            }
        } catch (NoSuchAlgorithmException e) {
        }
    }

SpringBoot 中使用 WebSocket

引入依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

增加 WebSocketConfig

@Configuration
@EnableWebSocket  // 开启WebSocket支持
public class WebSocketConfig {

    /**
     * 自动将标注@ServerEndpoint的端点自动注册到WebSocket服务器中
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

修改 ServerEndpointConfig

自定义 WebSocket 服务器端点配置的类，像修改握手请求，设置子协议等。


/**
 * 获取HttpSession，这样的话，ChatEndpoint类就能操作HttpSession
 */
public class GetHttpSessionConfig extends ServerEndpointConfig.Configurator {

    /**
     * 修改握手请求
     * @param serverEndpointConfig
     * @param request
     * @param response
     */
    @Override
    public void modifyHandshake(ServerEndpointConfig serverEndpointConfig, HandshakeRequest request, HandshakeResponse response) {
        // 获取 HttpSession 对象
        HttpSession httpSession = (HttpSession) request.getHttpSession();

        // 将 httpSession 对象保存起来，存到 ServerEndpointConfig 对象中
        // 在 ChatEndpoint 类的 onOpen 方法就能通过 EndpointConfig 对象获取在这里存入的数据
        serverEndpointConfig.getUserProperties().put(HttpSession.class.getName(), httpSession);
    }
}

定义 ServerEndpoint

@ServerEndpoint(value = "/chat", configurator = GetHttpSessionConfig.class)

用于定义 WebSocket 端点，设置 websocket 地址，设置端点的配置

@OnOpen

@OnOpen
public void onOpen(Session session, EndpointConfig config){
    
}

建立 websocket 连接后，会触发标注@OnOpen 的方法

@OnClose

@OnClose
public void onClose(Session session, EndpointConfig config){
    
}

关闭 websocket 连接时，会触发标注@OnClose 的方法

@OnMessage

@OnMessage
public void onMessage(String message, EndpointConfig config) {
    
}

接受消息时，会触发标注@OnMessage 的方法

Session

jakarta.websocket.Session

Session 对象代表了服务器与客户端之间的一个单独的 WebSocket 连接，用来管理链接的生命周期，以及通过这个连接发送和接收数据。

可以向与之链接的对方发送消息。可以发送同步消息与异步消息

 // 使用 getBasicRemote() 方法发送同步消息   
session.getBasicRemote().sendText(message);

 // 使用 getAsyncRemote() 方法发送异步消息   
session.getAsyncRemote().sendText(message);

样例



package cn.edu.scau.websocket;

import cn.edu.scau.config.GetHttpSessionConfig;
import cn.edu.scau.model.dto.Message;
import cn.edu.scau.model.dto.OnlineAndOfflineMessage;
import cn.edu.scau.model.dto.OnlineUserMessage;
import cn.edu.scau.model.dto.PrivateChatMessage;
import cn.edu.scau.model.enums.MessageEnum;
import com.alibaba.fastjson2.JSON;
import com.alibaba.fastjson2.JSONObject;
import jakarta.servlet.http.HttpSession;
import jakarta.websocket.*;
import jakarta.websocket.server.ServerEndpoint;
import org.springframework.stereotype.Component;

import java.io.IOException;
import java.util.Map;
import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;

@ServerEndpoint(value = "/chat", configurator = GetHttpSessionConfig.class)
@Component
public class ChatEndpoint {
    // 保存在线的用户，key为用户名，value为 Session 对象
    private static final Map<String, Session> onlineUsers = new ConcurrentHashMap<>();

    private HttpSession httpSession;

    /**
         * 建立websocket连接后，被调用
         *
         * @param session Session
         */
    @OnOpen
    public void onOpen(Session session, EndpointConfig config) {
        this.httpSession = (HttpSession) config.getUserProperties().get(HttpSession.class.getName());
        String currentUser = (String) this.httpSession.getAttribute("currentUser");
        if (currentUser != null) {
            onlineUsers.put(currentUser, session);
        }
        Message onlineMessage = new Message();
        onlineMessage.setType(MessageEnum.ONLINE_MESSAGE);
        OnlineAndOfflineMessage onlineAndOfflineMessage = new OnlineAndOfflineMessage();
        onlineAndOfflineMessage.setUser(currentUser);
        onlineMessage.setData(onlineAndOfflineMessage);

        Message message = new Message();
        message.setType(MessageEnum.ONLINE_USER_MESSAGE);
        OnlineUserMessage onlineUserMessage = new OnlineUserMessage();
        onlineUserMessage.setOnlineUsers(getFriends());
        message.setData(onlineUserMessage);
        // 通知所有用户，当前用户上线了
        try {
            Set<Map.Entry<String, Session>> entries = onlineUsers.entrySet();

            for (Map.Entry<String, Session> entry : entries) {
                // 获取到所有用户对应的 session 对象
                Session toSession = entry.getValue();
                // 使用 getBasicRemote() 方法发送同步消息
                toSession.getBasicRemote().sendText(JSON.toJSONString(message));
                if(!session.equals(toSession)){
                    toSession.getBasicRemote().sendText(JSON.toJSONString(onlineMessage));
                }
            }
        } catch (Exception exception) {
            exception.printStackTrace();
        }
    }

    private Set<String> getFriends() {
        return onlineUsers.keySet();
    }

    private void broadcastAllUsers(String... messages) {
        try {
            Set<Map.Entry<String, Session>> entries = onlineUsers.entrySet();

            for (Map.Entry<String, Session> entry : entries) {
                // 获取到所有用户对应的 session 对象
                Session session = entry.getValue();

                for (String message : messages) {
                    // 使用 getBasicRemote() 方法发送同步消息
                    session.getBasicRemote().sendText(message);
                }
            }
        } catch (Exception exception) {
            exception.printStackTrace();
        }
    }

    /**
         * 浏览器发送消息到服务端时该方法会被调用，也就是私聊
         * 张三  -->  李四
         *
         * @param message String
         */
    @OnMessage
    public void onMessage(String message) {
        try {
            // 将消息推送给指定的用户
            Message msg = JSON.parseObject(message, Message.class);
            MessageEnum type = msg.getType();
            switch (type){
                case PRIVATE_CHAT_MESSAGE: {
                    PrivateChatMessage privateChatMessage = JSONObject.from(msg.getData()).to(PrivateChatMessage.class);
                    // 获取消息接收方的用户名
                    String toUser = privateChatMessage.getToUser();
                    Session session = onlineUsers.get(toUser);
                    session.getBasicRemote().sendText(message);
                }
            }
        } catch (Exception exception) {
            exception.printStackTrace();
        }
    }

    /**
         * 断开 websocket 连接时被调用
         *
         * @param session Session
         */
    @OnClose
    public void onClose(Session session) throws IOException {
        // 1.从 onlineUsers 中删除当前用户的 session 对象，表示当前用户已下线
        String currentUser = (String) this.httpSession.getAttribute("currentUser");
        if (currentUser != null) {
            Session remove = onlineUsers.remove(currentUser);
            if (remove != null) {
                remove.close();
            }
            session.close();
        }

        // 2.通知其他用户，当前用户已下线
        // 注意：不是发送类似于 xxx 已下线的消息，而是向在线用户重新发送一次当前在线的所有用户
        Message message = new Message();
        message.setType(MessageEnum.ONLINE_USER_MESSAGE);
        OnlineUserMessage onlineUserMessage = new OnlineUserMessage();
        onlineUserMessage.setOnlineUsers(getFriends());
        message.setData(onlineUserMessage);

        Message onlineMessage = new Message();
        onlineMessage.setType(MessageEnum.OFFLINE_MESSAGE);
        OnlineAndOfflineMessage onlineAndOfflineMessage = new OnlineAndOfflineMessage();
        onlineAndOfflineMessage.setUser(currentUser);
        onlineMessage.setData(onlineAndOfflineMessage);
        // 通知所有用户，当前用户上线了
        broadcastAllUsers(JSON.toJSONString(message),JSON.toJSONString(onlineMessage));
    }
}

前端使用 WebSocket

// 建立 WebSocket 链接
webSocket.value = new WebSocket(‘ws://127.0.0.1:7024/chat’)

// 关闭链接时触发
onclose: ((this: WebSocket, ev: CloseEvent) => any) | null;

// 接受消息时触发
onmessage: ((this: WebSocket, ev: MessageEvent) => any) | null;

// 建立链接时触发
onopen: ((this: WebSocket, ev: Event) => any) | null;

WebSocket 也可以发送消息到服务端

样例

const init = async () => {
   // 创建 WebSocket 对象
  webSocket.value = new WebSocket('ws://127.0.0.1:7024/chat')

  webSocket.value.onopen = onOpen

  // 接收到服务端推送的消息后触发
  webSocket.value.onmessage = onMessage

  webSocket.value.onclose = onClose
}

const onOpen = () => {}


const onClose = () => {}


const onMessage = (event) => {}

http://www.kler.cn/news/364348.html

相关文章：

  • 微信小程序/uniapp动态修改tabBar信息及常见报错
  • COVON全意卫生巾，轻薄透气，绵柔速干，马来西亚热销中
  • php流程控制
  • K8S系列-Kubernetes网络
  • 【论文阅读】ESRGAN
  • Java八股文-Mysql
  • 【格物刊】龙信刊物已上新
  • 【linux开发-驱动】SPI驱动开发相关
  • node和npm
  • 指增和中性产品的申赎加减仓及资金调拨自动化伪代码思路
  • 【数据仓库】数据仓库面试题
  • ANSI C、ISO C、POSIX标准、GNU的含义
  • 【机器学习】多元线性回归
  • python回调函数概念及应用场景举例
  • AD画的原理图如何导出PDF
  • 如何使用DBeaver连接flink
  • 图像重建方法之最近邻插值
  • C#知识高阶语法汇总
  • 软考系统架构师一些知识点记录--质量评估效用树Utility Tree
  • C++实现获取小球在任意路径上的圆心滚动路径
  • Java八股文-Mysql
  • VScode远程服务器之远程容器进行开发（四）
  • Axure大屏可视化模板：打造跨领域数据分析平台的原型设计案例
  • 【力扣】Go语言实现力扣115不同的子序列
  • RHCE【web服务器】
  • pytorh学习笔记——cifar10（七）inception网络