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

应用层协议之WebSocket

article 2024/11/17 13:30:15

WebSocket是一种在单个TCP连接上进行全双工通信的协议，它允许在客户端和服务器之间建立持久性的连接，使得数据可以在双方之间进行实时交换，而不需要客户端发起多个HTTP请求。WebSocket特别适用于需要实时通信、实时推送数据、实时同步编辑等场景。

一、WebSocket的特点

1. 双向通信：

WebSocket实现了服务器与客户端之间的双向通信，即服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。

2. 持久连接：

一旦WebSocket连接建立，它将持续存在，直到被显式关闭。这种持久连接避免了HTTP请求/响应模式中的频繁握手和断开连接的开销。

3. 高效性：

WebSocket使用较少的开销来维持连接，并且数据格式轻量，性能开销小，通信高效。

4. 兼容性和灵活性：

WebSocket与HTTP协议有着良好的兼容性，默认端口也是80和443，并且握手阶段采用HTTP协议。此外，WebSocket可以发送文本和二进制数据，并且没有同源限制。

二、WebSocket与HTTP的区别

1. 连接性质：

WebSocket是一种持久化的协议，连接不会在一次请求之后立即断开，而HTTP协议是基于请求-响应模式的，每次请求都需要客户端发起新的连接，并在收到响应后关闭。

2. 通信方式：

WebSocket允许在客户端和服务器之间建立持久性的双向连接，客户端和服务器可以通过这个连接实时的交换数据。HTTP协议则是无状态的请求-响应协议，客户端向服务器发送请求，服务器处理请求并返回响应。

3. 数据格式：

WebSocket协议支持传输文本或二进制数据，数据格式更加灵活，可以根据应用程序的需要自定义。HTTP协议通常用于传输文档、图像、视频等静态资源或者动态资源，数据格式通常是文本或者是二进制，但在每次请求和响应中都需要携带HTTP的头部信息。

4. 性能和效率：

WebSocket通过在客户端和服务器之间建立持久连接，减少建立和关闭的开销，通信效率更高，延迟更低。HTTP协议在每次请求-响应周期中都需要消耗额外的资源来建立和关闭连接，通信效率相对较低。

三、WebSocket的握手过程

WebSocket连接的建立从一个HTTP请求开始，这个请求通常被称为“握手”请求。在请求中，客户端通过Upgrade和Connection头字段表示希望将协议从HTTP升级到WebSocket。服务器如果同意升级，会返回一个状态码为101 Switching Protocols的响应，表示协议升级成功。

四、WebSocket的常用应用场景

1. 实时聊天：

WebSocket可以用于实现即时通讯功能，如在线聊天室、多人游戏等。

2. 实时数据更新：

WebSocket可以用于实时地推送数据更新，如实时股票行情、实时天气预报等。

3. 协同编辑：

WebSocket可以用于实现多人协同编辑功能，如在线文档协作、团队代码编辑等。

4. 实时监控：

WebSocket可以用于实时监控系统，如监控设备的运行状态、实时监测交通流量等。

五、WebSocket的前端（Vue）实现

在Vue中使用WebSocket可以通过以下几个步骤来实现：

1. 创建WebSocket实例：

const socket = new WebSocket('ws://your-websocket-server-url');

在这个示例中，用WebSocket构造函数创建了一个新的WebSocket实例，并传入了WebSocket服务器的URL。

2. 处理WebSocket事件：

// 连接打开事件
socket.onopen = function(event) {
    console.log('WebSocket is open now.');
};

// 消息接收事件
socket.onmessage = function(event) {
    console.log('WebSocket message received:', event);
};

// 错误事件
socket.onerror = function(event) {
    console.error('WebSocket error observed:', event);
};

// 连接关闭事件
socket.onclose = function(event) {
    console.log('WebSocket is closed now.');
};

3. 在Vue组件中使用WebSocket：

<template>
    <div>
        <h1>WebSocket Example</h1>
        <p>{{ message }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            socket: null,
            message: ''
        };
    },
    created() {
        // 创建WebSocket实例
        this.socket = new WebSocket('ws://your-websocket-server-url');

        // 连接打开事件
        this.socket.onopen = (event) => {
            console.log('WebSocket is open now.');
        };

        // 消息接收事件
        this.socket.onmessage = (event) => {
            console.log('WebSocket message received:', event);
            this.message = event.data;
        };

        // 错误事件
        this.socket.onerror = (event) => {
            console.error('WebSocket error observed:', event);
        };

        // 连接关闭事件
        this.socket.onclose = (event) => {
            console.log('WebSocket is closed now.');
        };
    },
    beforeDestroy() {
        // 组件销毁前关闭WebSocket连接
        if (this.socket) {
            this.socket.close();
        }
    }
};
</script>

在这个示例中，我们在Vue组件的created生命周期钩子中创建了WebSocket实例，并添加了相应的事件处理程序。此外，我们还在组件销毁前的beforeDestroy钩子中关闭了WebSocket连接，以确保资源的正确释放。

六、WebSocket的后端（Java）实现

在Java后端使用WebSocket，首先需要添加WebSocket的依赖：

<!-- 引入websocket -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
    <version>2.1.8.RELEASE</version>
</dependency>

接下来，创建一个WebSocket配置类：

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

然后，定义一个WebSocket服务端组件：

@Component
@ServerEndpoint("/ws/{clientId}")
public class WebSocketServer {
    private static Map<String, Session> sessionMap = new HashMap<>();

    @OnOpen
    public void opOpen(Session session, @PathParam("clientId") String clientId) {
        System.err.println("客户端:" + clientId + "建立连结");
        sessionMap.put(clientId, session);
    }

    @OnClose
    public void onClose(@PathParam("clientId") String clientId) {
        sessionMap.remove(clientId);
    }

    @OnMessage
    public void onMessage(String message, @PathParam("clientId") String clientId) {
        System.err.println("收到来自客户端" + clientId + "的消息:" + message);
    }

    public void sendToAllClient(String message) {
        Collection<Session> sessions = sessionMap.values();
        for (Session session : sessions) {
            try {
                session.getBasicRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}