WebSocket详解

什么是WebSocket？

WebSocket是一种在单个TCP连接上进行全双工通信的协议，工作在OSI模型的应用层。它允许浏览器和服务器之间建立持久连接，从而进行双向实时的数据传输。

WebSocket协议原理

WebSocket协议在建立连接时，会使用HTTP进行初始握手，成功后升级为WebSocket连接。握手过程包括请求升级和服务器确认升级。建立连接后，数据以帧的形式传输，每个帧都有一个固定的头部，包含帧的长度和数据类型。

为什么需要WebSocket？

• 早期很多网站为了推送消息，用的技术都是轮询。轮询是指客户端每隔一段时间就向服务器发送HTTP请求，然后服务器返回最新的数据给客户端。这种传统的模式有很大的缺点，即HTTP协议无法实现服务器主动向客户端发起消息，客户端需要不断地向服务器发送请求，而HTTP请求与响应可能会包含较长的头部，其中有效的数据只是很小的一部分，所以会消耗很多带宽资源。

• WebSocket通过在单个TCP连接上进行全双工通信，解决了HTTP轮询的缺陷。相比于长轮询和服务器发送事件（SSE），WebSocket的低延时和高效能使其在实时性要求高的场景中更具优势。

WebSocket的优点

1. 全双工通信：WebSocket允许服务器和客户端之间的双向通信，传统的HTTP请求/响应模式是单向的。
2. 低延时：由于WebSocket连接是持续的，消除了HTTP的频繁请求/响应开销，因此数据可以及时的传输，极大的降低了延迟。
3. 节省带宽：在HTTP中，每次请求都需要发送完整的头部信息，而WebSocket链接建立之后，数据帧头部非常小，只有2-14字节，极大的减少了带宽的消耗。
4. 实时性：全双工通信允许服务器向客户端推送消息，不需要客户端不断的轮询服务器，使得数据能及时更新。

创建WebSocket对象

    private createWebSocket(url: string): WebSocket {
        let self = this;    
        let ws = new WebSocket(url);
        //与服务端连接成功会触发
        ws.onopen = function (): void {
            if (self._onOpen != null) {
                self._onOpen();
            }
        }
        //与服务端连接关闭时触发
        ws.onclose = function (ev): void {
            if (self._onClose != null) {
                self._onClose();
            }
        }
        //与服务端连接异常时触发
        ws.onerror = function (error): void {
            if (self._onError != null) {
                self._onError(error);
            }
            self.close();
        }
        //接收到来自服务端的消息时触发。
        ws.onmessage = function (event: MessageEvent) {
            if (event == null) {
                return;
            }
            var data = event.data;
            if (data == null) {
                return;
            }
			// 处理接收到的数据
        }
        return ws;
    }

WebSocket使用

//关闭连接
ws.close();
//发送命令
ws.send();

WebSocket的应用案例

• 实时聊天应用：例如微信、QQ等，使用WebSocket实现即时消息传递。
• 在线游戏：实时传输游戏数据，保证玩家之间的同步。
• 实时数据推送：如股票行情、体育比分更新等。

与HTTP和HTTPS的区别

• HTTP：一种无状态、请求/响应的协议，主要用于客户端和服务器之间的通信。每次请求都会重新建立连接。
• HTTPS：是在HTTP的基础上加入SSL/TLS加密，保证数据传输的安全性。
• WebSocket：一种全双工、持久连接的协议，一旦连接建立，客户端和服务器可以随时互相发送消息。
• WebSocket与HTTPS：WebSocket可以在HTTPS上运行，称为wss，确保通信的安全性。