WebSocket：在WebSocket握手期间发生错误：发送了非空的'Sec-WebSocket-Protocol'头，但未收到响应。

Question

我正在尝试与我的tornado服务器创建WS连接。服务器代码很简单：

class WebSocketHandler(tornado.websocket.WebSocketHandler):

    def open(self):
        print("WebSocket opened")

    def on_message(self, message):
        self.write_message(u"You said: " + message)

    def on_close(self):
        print("WebSocket closed")

def main():

    settings = {
        "static_path": os.path.join(os.path.dirname(__file__), "static")
    }


    app = tornado.web.Application([
            (r'/ws', WebSocketHandler),
            (r"/()$", tornado.web.StaticFileHandler, {'path':'static/index.html'}),
        ], **settings)


    app.listen(8888)
    tornado.ioloop.IOLoop.current().start()

我从这里复制粘贴了客户端代码：

$(document).ready(function () {
    if ("WebSocket" in window) {

        console.log('WebSocket is supported by your browser.');

        var serviceUrl = 'ws://localhost:8888/ws';
        var protocol = 'Chat-1.0';
        var socket = new WebSocket(serviceUrl, protocol);

        socket.onopen = function () {
            console.log('Connection Established!');
        };

        socket.onclose = function () {
            console.log('Connection Closed!');
        };

        socket.onerror = function (error) {
            console.log('Error Occured: ' + error);
        };

        socket.onmessage = function (e) {
            if (typeof e.data === "string") {
                console.log('String message received: ' + e.data);
            }
            else if (e.data instanceof ArrayBuffer) {
                console.log('ArrayBuffer received: ' + e.data);
            }
            else if (e.data instanceof Blob) {
                console.log('Blob received: ' + e.data);
            }
        };

        socket.send("Hello WebSocket!");
        socket.close();
    }
});

当它尝试连接时，我在浏览器控制台上看到了以下输出：

WebSocket connection to 'ws://localhost:8888/ws' failed: Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was received

为什么会这样呢？

- Midiparse

---

发布您的客户端连接代码，否则我们只能猜测... - Myst

我使用了 Chat-1 协议。最终我删除了该部分，并在未指定协议的情况下打开了 WS，它可以正常工作。我仍然想知道如何配置服务器端以接受它。 - Midiparse

Answer 1

正如在whatwg.org的 Websocket 文档中所指出的(它是从标准的草案中复制过来的):

WebSocket(url,protocols) 构造函数需要一个或两个参数。第一个参数 url 指定要连接到哪个 URL 。第二个参数 protocols，如果存在，则可以是字符串或字符串数组。如果是字符串，则等效于只包含该字符串的数组；如果省略，则相当于空数组。数组中的每个字符串都是子协议名称。仅当服务器报告已选择这些子协议之一时，才会建立连接。 子协议名称必须是符合 WebSocket 协议规范定义的 Sec-WebSocket-Protocol 字段值组成元素要求的字符串。

由于你的服务器没有支持Chat-1子协议，因此服务器回应 websocket 连接请求时带有空的Sec-WebSocket-Protocol头部。

由于你既写服务端也写客户端(除非你正在编写一个要共享的API)，设置特定的子协议名称并不是非常重要。

你可以通过从 JavaScript 连接中删除子协议名称来修复此问题:

var socket = new WebSocket(serviceUrl);

或者通过修改您的服务器以支持所请求的协议。

我可以给出一个Ruby示例，但是由于没有足够的信息，我无法给出Python示例。

编辑（Ruby示例）

由于在评论中被问到，这里有一个Ruby示例。

此示例需要使用iodine HTTP/WebSockets服务器，因为它支持rack.upgrade规范草案（在此处详细介绍）并添加了发布/订阅API。

服务器代码可以通过终端执行，也可以作为config.ru文件中的Rack应用程序运行（从命令行运行iodine以启动服务器）。

# frozen_string_literal: true

class ChatClient
  def on_open client
    @nickname = client.env['PATH_INFO'].to_s.split('/')[1] || "Guest"
    client.subscribe :chat    
    client.publish :chat , "#{@nickname} joined the chat."
    if client.env['my_websocket.protocol']
      client.write "You're using the #{client.env['my_websocket.protocol']} protocol"
    else
      client.write "You're not using a protocol, but we let it slide"
    end
  end
  def on_close client
    client.publish :chat , "#{@nickname} left the chat."
  end
  def on_message client, message
    client.publish :chat , "#{@nickname}: #{message}"
  end
end

module APP
  # the Rack application
  def self.call env
    return [200, {}, ["Hello World"]] unless env["rack.upgrade?"]
    env["rack.upgrade"] = ChatClient.new
    protocol = select_protocol(env)
    if protocol
      # we will use the same client for all protocols, because it's a toy example
      env['my_websocket.protocol'] = protocol # <= used by the client
      [101, { "Sec-Websocket-Protocol" => protocol }, []]
    else
      # we can either refuse the connection, or allow it without a match
      # here, it is allowed
      [101, {}, []]
    end
  end

  # the allowed protocols
  PROTOCOLS = %w{ chat-1.0 soap raw }

  def select_protocol(env)
    request_protocols = env["HTTP_SEC_WEBSOCKET_PROTOCOL"]
    unless request_protocols.nil?
      request_protocols = request_protocols.split(/,\s?/) if request_protocols.is_a?(String)
      request_protocols.detect { |request_protocol| PROTOCOLS.include? request_protocol }
    end # either `nil` or the result of `request_protocols.detect` are returned
  end

  # make functions available as a singleton module
  extend self
end

# config.ru
if __FILE__.end_with? ".ru"
  run APP 
else
# terminal?
  require 'iodine'
  Iodine.threads = 1
  Iodine.listen2http app: APP, log: true
  Iodine.start
end

为测试代码，以下JavaScript应该有效：

ws = new WebSocket("ws://localhost:3000/Mitchel", "chat-1.0");
ws.onmessage = function(e) { console.log(e.data); };
ws.onclose = function(e) { console.log("Closed"); };
ws.onopen = function(e) { e.target.send("Yo!"); };

- Myst

---

我对Ruby示例非常感兴趣。我正在尝试使用wamp gem并遇到了相同的问题（https://github.com/bradylove/wamp-ruby），但它使用v1。我正在考虑编写一个v2 WAMP gem... - awenkhh

@awenkhh - 我不确定我理解你的问题。这是一个客户端相关的问题，而你提到的 gem 是一个服务器实现。也许你可以打开一个新的问题，附上完整的跟踪信息，并留下一个链接回到这里？ - Myst

嘿，如果你还有的话，能给我一个Ruby的例子吗？ - alt-ja

@alt-ja，我编辑了答案并添加了一个Ruby的例子以方便您。祝你好运！ - Myst

对我来说，解决方法确实是在构造函数中删除子协议名称（第二个参数）。 - Jan

Answer 2

对于使用云形成模板的人，AWS有一个很好的例子这里。

更新

关键是连接函数中的响应。在上述AWS示例中展示了如何完成此操作：

exports.handler = async (event) => {
    if (event.headers != undefined) {
        const headers = toLowerCaseProperties(event.headers);
        
        if (headers['sec-websocket-protocol'] != undefined) {
            const subprotocolHeader = headers['sec-websocket-protocol'];
            const subprotocols = subprotocolHeader.split(',');
            
            if (subprotocols.indexOf('myprotocol') >= 0) {
                const response = {
                    statusCode: 200,
                    headers: {
                        "Sec-WebSocket-Protocol" : "myprotocol"
                    }
                };
                return response;
            }
        }
    }
    
    const response = {
        statusCode: 400
    };
        
    return response;
};

function toLowerCaseProperties(obj) {
    var wrapper = {};
    for (var key in obj) {
        wrapper[key.toLowerCase()] = obj[key];
    }
    return wrapper;
}       

请注意响应中的头部设置。此响应必须传递给请求者，因此必须配置响应集成。

在AWS示例中，请考虑以下代码：

MyIntegration:
Type: AWS::ApiGatewayV2::Integration
Properties:
  ApiId: !Ref MyAPI
  IntegrationType: AWS_PROXY
  IntegrationUri: !GetAtt MyLambdaFunction.Arn
  IntegrationMethod: POST
  ConnectionType: INTERNET 

最重要的是最后两行。

- FullStackDev.online