掌握webSocket，玩转双向通信

后端

2023-01-29 09:26:07

WebSocket：实时数据传输的革命性协议

WebSocket 是一种改变了客户端和服务器之间通信方式的革命性协议。它使双方能够在单一的持久连接上实现全双工通信，从而打开了广泛的应用可能性。

WebSocket 的运作原理

WebSocket 是一个基于 TCP 的应用层协议，它利用 HTTP 作为握手协议。在建立连接后，客户端和服务器可以使用四种不同类型的数据帧在 WebSocket 连接上进行通信：

连接关闭帧 (0x00) ：关闭 WebSocket 连接。
文本帧 (0x01) ：传输文本数据。
二进制帧 (0x02) ：传输二进制数据。
Ping 帧 (0x08) ：发送 ping 消息以检查连接状态。

WebSocket 的优势

WebSocket 提供了许多优势，使其成为各种应用的理想选择：

全双工通信： 允许客户端和服务器同时发送和接收数据。
持久性连接： 建立后，WebSocket 连接将保持打开状态，直至一方明确关闭它。
低延迟： 与 HTTP 轮询或长轮询等其他方法相比，WebSocket 的延迟更低，响应更迅速。
低开销： WebSocket 连接非常轻量级，在网络资源有限的情况下也能有效运行。

WebSocket 的应用场景

WebSocket 在各种应用场景中大放异彩，包括：

实时聊天： 实现实时聊天应用程序，让用户在同一聊天室中进行即时交流。
在线游戏： 创建多人在线游戏，允许玩家在游戏中进行实时互动。
数据推送： 从服务器向客户端推送数据，例如新闻更新、股票行情或天气预报。
远程控制： 远程控制设备，例如机器人或无人机。
文件传输： 安全可靠地传输文件，例如图片、视频或文档。

服务端操作

要在服务端使用 WebSocket，需要使用各种 WebSocket 库，例如：

Java：Spring Boot、Vert.x、Netty
Python：Django Channels、Flask-SocketIO、Twisted
Node.js：Socket.IO、ws、engine.io

服务器端需要创建一个 WebSocket 服务器并监听特定端口。当客户端连接时，服务器与客户端进行握手。握手成功后，通信就可以开始。

代码示例：

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@SpringBootApplication
@EnableWebSocket
public class WebSocketServerApplication implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new MyWebSocketHandler(), "/websocket");
    }

    public static void main(String[] args) {
        SpringApplication.run(WebSocketServerApplication.class, args);
    }
}

客户端操作

在客户端，需要使用 WebSocket 库，例如：

JavaScript：WebSocket、SockJS、Primus
Java：Spring Boot、Vert.x、Netty
Python：Django Channels、Flask-SocketIO、Twisted
Node.js：Socket.IO、ws、engine.io

客户端需要创建 WebSocket 连接并连接到服务器。连接成功后，通信就可以开始。

代码示例：

const socket = new WebSocket('ws://localhost:8080/websocket');

socket.onopen = () => {
    console.log('Connected to WebSocket server.');
};

socket.onmessage = (event) => {
    console.log('Received message: ', event.data);
};

socket.send('Hello from client!');