html5 websocket_kong websocket upgrade字段-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_31214097/article/details/84711592

本文详细介绍了WebSocket协议，一种在单个TCP连接上进行全双工通信的方法，增强了客户端与服务器的数据交换能力，支持服务端向客户端推送数据。通过示例展示了如何使用JavaScript在浏览器中创建WebSocket连接，并解释了WebSocket与传统AJAX轮询的区别。

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

websocket 是html5开始提供的一种在单个tcp连接上进行全双功能通信的协议.

使得客户端和服务器之间的数据交换变得更加简单.允许服务端向客户端推送数据.

websocket api中,服务器只需要与客户端完成一次握手,两者之间就直接可以创建持久性的链接.

并进行数据通信.

浏览器通过js向服务器发出建立websocket连接的请求.链接请求建立之后,客户端和服务器就可以TCP链接直接交换数据.

传统方式是通过ajax轮询的机制,不断向服务器发出请求.

var socket = new WebSocket(url,[protocol]);

代表制定链接的url,第二个参数是可选的,指定了可接受的子协议.

websocket协议本质上是一个基于TCP的协议. 是现有http协议的一次补充.

参考博客:https://www.cnblogs.com/jingmoxukong/p/7755643.html

应用场景:及时通信 QQ,微信,视频聊天.B站等一系列视频弹幕等. 可用node js实现简单的一个聊天工作室功能.

为了建立websocket链接.客户端首先向服务器发出一个http请求,这个请求和通常的http请求有些不同.加了一些附加头信息,其中一个附加头信息就是"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>菜鸟教程(runoob.com)</title>
    
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>

一个典型的http请求如下.

GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: example.com
Origin: http://example.com
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13

Connection 必须设置 Upgrade，表示客户端希望连接升级。
Upgrade 字段必须设置 Websocket，表示希望升级到 Websocket 协议。

服务器端响应

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=
Sec-WebSocket-Location: ws://example.com/

websocket如何工作

浏览器和服务器都必须实现websockets协议.由于 WebSockets 连接长期存在，与典型的HTTP连接不同，对服务器有重要的影响。

websocket在服务器端有多种实现方式,node js,java等都有自己的实现方式,在这不具体展开.