js中如何设置WebSocket子协议答案

【问题标题】：How to set the WebSocket subprotocol in jsjs中如何设置WebSocket子协议
【发布时间】：2020-03-25 15:37:02
【问题描述】：

我正在使用 javascript 创建客户端 websocket 并且丢失了将这个密钥“Sec-WebSocket-Key : dGhlIHNhbXBsZSBub25jZQ==”放在哪里尝试使用下面的代码，但出现错误

index.html:14 未捕获的 DOMException：无法构造“WebSocket”：子协议“dGhlIHNhbXBsZSBub25jZQ==”无效。在 WebSocketTest (file:///C:/handshake/index.html:14:16) 在:1:1

<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://192.168.1.104:9001");
			   var ws = new WebSocket("wss://192.168.1.104:9001", "dGhlIHNhbXBsZSBub25jZQ==");
                ws.onopen = function() {
                  //test open connectin
				  alert("Connection Established...");
                  // 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>

  <body>
      <div id = "sse">
         <a href = "javascript:WebSocketTest()">Run WebSocket</a>
		 <p> Tested </p>
      </div>
      
   </body>

   </body>

【问题讨论】：

标签： javascript html websocket

【解决方案1】：

有点奇怪，这个问题的标题是关于设置 WebSocket 子协议的，但问题的文本和代码摘录都与 WebSocket 安全密钥有关。这是两个完全不同的东西。

JavaScript WebSocket object 无法访问 Sec-WebSocket-Key 标头。该标头由浏览器的 WebSocket 实现在内部生成。在 JavaScript 中，您无法设置该密钥，也无法读取该密钥。

WebSocket 构造函数的第二个参数允许您为Sec-WebSocket-Protocol 标头指定内容（一个或多个子协议名称），而不是为Sec-WebSocket-Key。这就是为什么当您将 "dGhlIHNhbXBsZSBub25jZQ==" 作为该参数传递时，错误消息会抱怨给出的子协议名称无效。

【讨论】：

所以服务器在 js 客户端发送请求时需要该密钥。我该如何解决。
服务器是否需要特定的键值？没有办法强制浏览器发送那个确切的密钥。浏览器将制作自己的密钥并将该制作的密钥发送到服务器。抛出错误是因为"dGhlIHNhbXBsZSBub25jZQ==" 不是合法的子协议名称。子协议名称不允许包含“=”字符。
好的，我已经删除了那里的键值，但是抛出了一个新错误。失败：“WebSocket 握手期间出错：net::ERR_INVALID_HTTP_RESPONSE WebSocketTest @ index.html:14 (anonymous) @ VM127:1”
我会在服务器日志中寻找线索。您确定服务器需要 TLS (SSL) 加密的 WebSocket (wss:) 而不仅仅是纯文本 WebSocket (ws:) 吗？如果一切正常，那么我将使用 Wireshark 检查网络流量。
无论我使用“ws”还是“wss”，它都会给出相同的“WebSocket 握手期间出错：net::ERR_INVALID_HTTP_RESPONSE”