Websocket通讯简析-优快云博客

本文详细介绍了WebSocket协议的工作原理，包括建立连接的过程、数据帧的传输规则以及常见错误处理。并通过JavaScript示例展示了如何使用WebSocket进行客户端和服务器间的实时通信。此外，还提供了多种WebSocket服务器实现的开源资源及浏览器支持情况的概述。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是Websocket

Websocket是一种全新的协议，不属于HTTP无状态协议，协议名为"ws"，这意味着一个Websocket连接地址会是这样的写法：ws://**。
Websocket协议本质上是一个基于TCP的协议。建立连接需要握手，客户端（浏览器）首先向服务器（web server）发起一条特殊的HTTP请求，web server解析后生成应答到浏览器，这样子一个Websocket连接就建立了，直到某一方关闭连接。

1. Client try to connect to WebSocket server
2. Server recognize client
3. If client is not registered with server then add client (this is known as handshaking process which is based on headers transmission)
4. Send and receive data
5. Close connection

WebScoket数据帧

WebScoket协议中，数据以帧序列的形式传输，具体的协议标准可以参考rfc6455。
（1）客户端向服务器传输的数据帧必须进行掩码处理：服务器若接收到未经过掩码处理的数据帧，则必须主动关闭连接。
（2）服务器向客户端传输的数据帧一定不能进行掩码处理。客户端若接收到经过掩码处理的数据帧，则必须主动关闭连接。
针对上情况，发现错误的一方可向对方发送close帧（状态码是1002，表示协议错误），以关闭连接。

客户端API

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">
            function WebSocketTest() {
                if ("WebSocket" in window) {
                    alert("WebSocket is supported by your Browser!");
                    // Let us open a web socket
                    var ws = new WebSocket("ws://localhost:9998/echo");
                    ws.onopen = function () {
                        // Web Socket is connected, send data using send()
                        ws.send("Message to send");
                        alert("Message is sent...");
                    };
                    ws.onmessage = function (evt) {
                        var received_msg = evt.data;
                        alert("Message is received...");
                    };
                    ws.onclose = function () {
                        // websocket is closed.
                        alert("Connection is closed...");
                    };
                } else {
                    // The browser doesn't support WebSocket
                    alert("WebSocket NOT supported by your Browser!");
                }
            }
        </script>
    </head>
    <body>
        <div id="sse">
            <a href="javascript:WebSocketTest()">Run WebSocket</a>
        </div>
    </body>
</html>