WebSocket介绍和入门案例

news2024/10/21 16:39:33

一、WebSocket 详解

1. 定义与特点：

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许客户端和服务器之间进行实时、双向的数据传输，克服了传统 HTTP 协议只能由客户端发起请求、服务器响应的单向通信模式的局限性。
特点包括低延迟、实时性强、减少不必要的网络流量和服务器资源消耗等。
HTTP协议和WebSocket协议对比：

HTTP是短连接
WebSocket是长连接
HTTP通信是单向的，基于请求响应模式（浏览器发送请求给服务器）
WebSocket支持双向通信
HTTP和WebSocket底层都是TCP连接

2. 工作原理：

建立连接：客户端向服务器发起 WebSocket 连接请求，该请求通过 HTTP 协议进行握手。如果服务器支持 WebSocket，它会返回一个特殊的 HTTP 响应，通知客户端可以将连接升级为 WebSocket 连接。
数据传输：一旦连接建立，客户端和服务器可以随时双向发送数据。数据以帧的形式进行传输，可以是文本数据或二进制数据。
连接关闭：任何一方都可以发送关闭连接的请求，关闭连接后双方不能再进行数据传输。

**思考**：既然WebSocket支持双向通信，功能看似比HTTP强大，那么我们是不是可以基于WebSocket开发所有的业务功能？

WebSocket缺点：

服务器长期维护长连接需要一定的成本
各个浏览器支持程度不一
WebSocket 是长连接，受网络限制比较大，需要处理好重连

结论：WebSocket并不能完全取代HTTP，它只适合在特定的场景下使用

3. 应用场景：

实时聊天应用：实现用户之间的即时通信，消息实时推送。
在线游戏：同步游戏状态，实时交互。
金融交易平台：实时显示股票价格、交易数据等。
监控系统：实时反馈系统状态、设备运行数据等。
弹幕的实现

二、入门案例

以下是一个使用 Java 和 Spring Boot 实现的简单 WebSocket 入门案例：

创建一个 Spring Boot 项目，并在项目的依赖管理文件（如 pom.xml）中添加 Spring Boot WebSocket 的依赖：

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

配置 WebSocket：

创建一个配置类，用于配置 WebSocket 端点：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(sampleWebSocketHandler(), "/ws").setAllowedOrigins("*");
    }

    @Bean
    public SampleWebSocketHandler sampleWebSocketHandler() {
        return new SampleWebSocketHandler();
    }
}

创建 WebSocket 处理类：

import org.springframework.stereotype.Component;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@Component
public class SampleWebSocketHandler extends TextWebSocketHandler {

    private List<WebSocketSession> sessions = new ArrayList<>();

    @Override
    public void handleTextMessage(WebSocketSession session, TextMessage message) throws IOException {
        // 当接收到客户端消息时，可以进行处理并向所有连接的客户端广播
        String payload = message.getPayload();
        for (WebSocketSession s : sessions) {
            s.sendMessage(message);
        }
    }

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        // 当连接建立时，将 session 添加到列表中
        sessions.add(session);
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        // 当连接关闭时，从列表中移除 session
        sessions.remove(session);
    }
}

在前端页面中使用 WebSocket：

<!DOCTYPE html>
<html>

<head>
    <script>
        var socket = new WebSocket("ws://localhost:8080/ws");
        socket.onmessage = function (event) {
            console.log(event.data);
        };
        function sendMessage() {
            var message = document.getElementById("messageInput").value;
            socket.send(message);
        }
    </script>
</head>

<body>
    <input type="text" id="messageInput">
    <button onclick="sendMessage()">发送消息</button>
</body>

</html>