【网络协议】WebSocket讲解

news2025/4/16 4:17:07

webSocket简介

连接原理解析:

客户端API

服务端API（java）

实战案例

（1）引入依赖

（2）编写服务端逻辑

（3）注册配置类

（4）前端连接 WebSocket 示例

Websocket与其他消息推送对比

总结

大家好，我是jstart千语。相信大家或多或少都听说过webSocket，与http协议都是TCP下的一种通信协议。主要用于客户端和服务端可以相互通信的协议，与http协议不同，http协议只能由客户端想服务端发送请求后，服务端才能向客户端响应消息。而webSocket协议却可以主动向客户端发送消息，这就是全双工通信。

webSocket简介

WebSocket 是一种基于 TCP 的网络通信协议，设计用于在客户端（通常是浏览器）和服务器之间建立一个持久化的、双向通信通道。记住最主要的一句话就可以了：实时通信。

传统的 HTTP 协议是请求-响应模式，不适合实时性要求高的应用。而 WebSocket 允许服务器主动向客户端推送消息，非常适合用于聊天室、在线游戏、股票行情、实时通知等场景。

全双工与半双工通信的区别：

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

特点：

WebSocket 是一种基于 TCP 的双向通信协议，它与 HTTP 一样在应用层运行，但一旦连接建立，通信通道就会一直保持开启。

它具备以下特点：

全双工通信：客户端和服务端都可以主动发送消息
长连接：连接建立后无需频繁重连
低延迟：没有 HTTP 多次握手的开销
浏览器支持广泛：现代浏览器均已支持

连接原理解析:

首先还是会通过TCP的三次握手来建立连接
先由http发送一次请求，请求携带对应的请求头，告诉服务端要升级协议
如果服务端支持该协议，也响应对应的响应头，并且响应状态码设置为101，表示要切换协议
协议切换成功后，就可以使用webSocket进行双向通信了

建立流程示例：

客户端API

示例：

<script>
    let ws = new WebSocket("ws://localhost/chat")
    ws.onopen = function(){

    };
    ws.onmessage = function(evt){
        //通过evt.data 可以获取服务器发送的数据
    };
    ws.onclose(){
    
    };

<script>

服务端API（java）

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

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

其中，Endpoint对象就是客户端与服务端建立连接时就创建的一个对象, 一个客户端对应一个Endpoint对象。每个客户端建立时都会创建一个。

Endpoint有两种定义方式：编程试和注解试：

onOpen	当开启一个新的会话时调用,该方法是客户端与服务端握手成功后调用的方法	@onOpen
onClose	当会话关闭时调用	@onClose
onError	当连接过程异常时调用	@onError

如何向客户端发送消息？

发送消息则由 RemoteEndpoint完成,其实例由 Session维护。

通过session.getBasicRemote获取同步消息发送的实例，然后调用其sendXxx()方法发送消息通过session.getAsyncRemote获取异步消息发送实例，然后调用其sendXxx()方法发送消息

实战案例

（1）引入依赖

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

（2）编写服务端逻辑

@ServerEndpoint("/ws/chat")
@Component
public class ChatEndpoint {

    private static final Set<Session> sessions = ConcurrentHashMap.newKeySet();

    @OnOpen
    public void onOpen(Session session) {
        sessions.add(session);
        System.out.println("用户连接: " + session.getId());
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("收到消息: " + message);
        // 广播给所有人
        for (Session s : sessions) {
            s.getAsyncRemote().sendText(message);
        }
    }

    @OnClose
    public void onClose(Session session) {
        sessions.remove(session);
        System.out.println("用户断开: " + session.getId());
    }

    @OnError
    public void onError(Session session, Throwable error) {
        System.err.println("错误: " + error.getMessage());
    }
}

（3）注册配置类

这个类用于识别扫描所有添加了webSocket相关注解的类

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

（4）前端连接 WebSocket 示例

<script>
  const socket = new WebSocket("ws://localhost:8080/ws/chat");

  socket.onopen = () => {
      console.log("连接已建立");
      socket.send("你好 WebSocket！");
  };

  socket.onmessage = (event) => {
      console.log("收到消息: " + event.data);
  };

  socket.onclose = () => {
      console.log("连接关闭");
  };
</script>