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

websocket初识

article 2024/9/30 14:19:17

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

一，WebSocket 的特点

建立连接后全双工通信：
- WebSocket 连接建立后，客户端和服务器可以同时发送数据，实现双向通信。
轻量级的通信协议：
- WebSocket 协议的数据包头非常小，相比于 HTTP 请求，它可以更高效地传输数据。
持久性连接：
- 与 HTTP 的无状态请求不同，WebSocket 连接是持久的，只要双方都不关闭连接，就可以一直保持通信状态。
减少延迟：
- 由于 WebSocket 是基于 TCP 的持久连接，因此它减少了每次数据传输时的握手延迟。
支持文本和二进制数据：
- WebSocket 支持发送纯文本和二进制数据，适用于多种应用场景。

二，WebSocket 的工作原理

握手：
- 客户端通过 HTTP 协议发起一个特殊的请求，请求建立 WebSocket 连接。
- 服务器收到请求后，通过 HTTP 响应来接受或拒绝这个请求。
- 如果服务器接受请求，则客户端和服务器之间建立了 WebSocket 连接。
数据传输：
- 一旦连接建立，客户端和服务器就可以开始发送数据帧。
- 数据帧可以是文本或二进制格式。
- WebSocket 协议定义了一种帧格式来封装数据，包括控制帧和应用数据帧。
关闭连接：
- 当不再需要通信时，客户端或服务器可以通过发送一个特殊的关闭帧来关闭连接。
- 关闭帧包含一个状态代码和可选的关闭原因。

三，WebSocket 的使用场景

实时聊天应用：
- 实时聊天应用需要客户端和服务端之间持续的双向通信，WebSocket 非常适合这种场景。
在线游戏：
- 在线游戏需要低延迟的数据传输，WebSocket 可以提供这种性能。
实时数据分析：
- 对于需要实时更新数据的应用程序，如股票报价、传感器数据等，WebSocket 可以实现实时数据流。
协作编辑工具：
- 多人协作编辑文档时，需要实时同步编辑内容，WebSocket 可以提供高效的解决方案。

四，WebSocket 的实现

要实现 WebSocket，既可以在服务器端进行 WebSocket 支持的配置，也可以在客户端使用 WebSocket API 进行连接和通信。下面是如何在客户端和服务器端分别实现 WebSocket 的步骤。

1. 客户端实现

在浏览器中，WebSocket API 提供了非常简单的方法来与服务器建立 WebSocket 连接，并进行数据传输。使用 WebSocket API 的基本流程如下：

创建 WebSocket 连接：使用 new WebSocket(url) 创建一个 WebSocket 实例，并传入要连接的 WebSocket 服务器的 URL。
```
const socket = new WebSocket('ws://example.com/socket');
```
连接事件处理：监听 WebSocket 的 onopen 事件，当连接成功建立时，会调用该回调函数。你可以在这个事件中发送初始的消息。
```
socket.onopen = function(event) {
    console.log('WebSocket is open now.');
    socket.send('Hello Server!');
};
```
接收消息：使用 onmessage 事件来接收服务器发送的消息，服务器可以发送文本或二进制数据。
```
socket.onmessage = function(event) {
    console.log('Message from server ', event.data);
};
```

错误处理：如果连接过程中发生错误，可以使用 onerror 事件处理。

socket.onerror = function(error) {
    console.log('WebSocket Error: ', error);
};

关闭连接：使用 onclose 事件来处理 WebSocket 连接的关闭。客户端或服务器都可以关闭连接。
```
socket.onclose = function(event) {
    console.log('WebSocket is closed now.');
};
```
手动关闭 WebSocket 连接：在需要时，客户端可以调用 socket.close() 手动关闭连接。
```
socket.close();
```

2. 服务器端实现

在服务器端，WebSocket 的实现可以使用多种语言和框架。以下是常见的 WebSocket 服务器实现方式之一——基于 Java 的实现。

使用 Java 的 WebSocket 实现（基于 `javax.websocket`）

Java 提供了对 WebSocket 的原生支持，开发者可以使用 javax.websocket API 进行服务器端的 WebSocket 实现。

导入依赖：首先需要在项目中添加对 WebSocket 的依赖。例如，在 Maven 中可以这样添加依赖：

<dependency>
    <groupId>javax.websocket</groupId>
    <artifactId>javax.websocket-api</artifactId>
    <version>1.1</version>
</dependency>

创建 WebSocket 服务器端点：使用 @ServerEndpoint 注解创建一个 WebSocket 端点，定义与客户端通信的方法。

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/socket")
public class WebSocketServer {

    @OnOpen
    public void onOpen(Session session) {
        System.out.println("New connection opened: " + session.getId());
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("Message received: " + message);
        try {
            // Echo the message back to the client
            session.getBasicRemote().sendText("Echo: " + message);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @OnClose
    public void onClose(Session session) {
        System.out.println("Connection closed: " + session.getId());
    }
}

在这个例子中，@OnOpen、@OnMessage 和 @OnClose 注解分别处理 WebSocket 连接的打开、消息接收和连接关闭事件。

部署 WebSocket 服务器：将 WebSocket 端点类部署到支持 Java EE 的服务器（如 Tomcat、Jetty）。当客户端连接到 ws://localhost:8080/your-app/socket 时，服务器将处理 WebSocket 消息。

3. 其他服务器端实现（Node.js 示例）

除了 Java，Node.js 也是实现 WebSocket 服务器的常用语言之一。下面是使用 ws 库在 Node.js 中实现 WebSocket 的例子：

安装 WebSocket 库：
```
npm install ws
```

编写 WebSocket 服务器：

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(message) {
        console.log('received: %s', message);
        ws.send(`Echo: ${message}`);
    });

    ws.send('Welcome to the WebSocket server!');
});

console.log('WebSocket server is running on ws://localhost:8080');

运行这个脚本后，服务器就可以监听来自客户端的 WebSocket 连接并处理消息。

五，WebSocket 和 HTTP 的区别

通信模型：
- HTTP 是请求-响应模型，客户端主动发起请求，服务器被动响应。而 WebSocket 是全双工通信，客户端和服务器可以随时主动发送数据。
连接持久性：
- HTTP 是无状态协议，通常每次请求都会建立和关闭连接。而 WebSocket 一旦握手成功，连接就会保持，直到客户端或服务器主动关闭。
协议头的开销：
- HTTP 每次请求都要带上大量的头部信息，而 WebSocket 在握手之后，数据包的头部很小，通信更加高效。
数据传输模式：
- HTTP 主要传输文本数据，而 WebSocket 除了支持文本，还可以传输二进制数据，适合多种数据传输场景。